npmpackage.info

Gathering detailed insights and metrics for @csstools/css-tokenizer

Other packages similar to @csstools/css-tokenizer

@csstools/tokenizer

3.1.1

Tokenize CSS according to the CSS Syntax

Gathering detailed insights and metrics for @csstools/css-tokenizer

@csstools/css-tokenizer - 3.0.3 | npmpackage.info

@csstools/css-tokenizer

PostCSS Tools and Plugins

3.0.3

963

MIT-0

CSS

4.58 kB

370,342,792 5.9

Installations

npm install @csstools/css-tokenizer

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Min. Node Version

>=18

Node Version

22.1.0

NPM Version

10.7.0 Score

100

Supply Chain

100

Quality

84.5

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

5

Total

1,200

Closed

165

Merged

1,030

Issues

Open

6

Total

358

Closed

352

Releases

Unable to fetch releases

Languages

CSS

JavaScript

TypeScript

HTML

Nunjucks

Shell

SCSS

CSS (43.36%)

JavaScript (30.33%)

TypeScript (22.68%)

HTML (3.06%)

Nunjucks (0.48%)

Shell (0.1%)

Developer

csstools

Download Statistics

Total Downloads

370,342,792

Last Day

1,754,529

Last Week

9,112,123

Last Month

36,828,843

Last Year

246,530,035

GitHub Statistics

MIT-0 License

963 Stars

4,267 Commits

75 Forks

9 Watchers

6 Branches

130 Contributors

Updated on May 14, 2025

Bundle Size

21.56 kB

Minified

4.58 kB

Minified + Gzipped

Bundlephobia

Sponsor this package

https://github.com/sponsors/csstools https://opencollective.com/csstools

Maintainers

View All 130 Contributors

Package Meta Information

Latest Version

3.0.3

Package Id

@csstools/css-tokenizer@3.0.3

Unpacked Size

71.08 kB

Size

14.68 kB

File Count

NPM Version

10.7.0

Node Version

22.1.0

Published on

Oct 25, 2024

Total Downloads

Cumulative downloads

Total Downloads

370,342,792

Last Day

-1.1%

1,754,529

Compared to previous day

Last Week

12.1%

9,112,123

Compared to previous week

Last Month

13.1%

36,828,843

Compared to previous month

Last Year

119.3%

246,530,035

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

No dependencies detected.

CSS Tokenizer

Implemented from : https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/

API

Read the API docs

Usage

Add CSS Tokenizer to your project:

1npm install @csstools/css-tokenizer --save-dev

1import { tokenizer, TokenType } from '@csstools/css-tokenizer';
2
3const myCSS = `@media only screen and (min-width: 768rem) {
4	.foo {
5		content: 'Some content!' !important;
6	}
7}
8`;
9
10const t = tokenizer({
11	css: myCSS,
12});
13
14while (true) {
15	const token = t.nextToken();
16	if (token[0] === TokenType.EOF) {
17		break;
18	}
19
20	console.log(token);
21}

Or use the tokenize helper function:

1import { tokenize } from '@csstools/css-tokenizer';
2
3const myCSS =  `@media only screen and (min-width: 768rem) {
4	.foo {
5		content: 'Some content!' !important;
6	}
7}
8`;
9
10const tokens = tokenize({
11	css: myCSS,
12});
13
14console.log(tokens);

Options

1{
2	onParseError?: (error: ParseError) => void
3}

`onParseError`

The tokenizer is forgiving and won't stop when a parse error is encountered.

To receive parsing error information you can set a callback.

1import { tokenizer, TokenType } from '@csstools/css-tokenizer';
2
3const t = tokenizer({
4	css: '\\',
5}, { onParseError: (err) => console.warn(err) });
6
7while (true) {
8	const token = t.nextToken();
9	if (token[0] === TokenType.EOF) {
10		break;
11	}
12}

Parser errors will try to inform you where in the tokenizer logic the error happened. This tells you what kind of error occurred.

Goals and non-goals

Things this package aims to be:

specification compliant CSS tokenizer
a reliable low level package to be used in CSS parsers

What it is not:

opinionated
fast
small

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Security-Policy

Determines if the project has published a security policy.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

7

SAST

Determines if the project uses static code analysis.

3

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 3

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/codeql.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-preset-env.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/deploy-preset-env.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-preset-env.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/deploy-preset-env.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/labeler.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/labeler.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/lint.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/lint.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/csstools/postcss-plugins/test.yml/main?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/test.yml:98
Info: 0 out of 11 GitHub-owned GitHubAction dependencies pinned
Info: 6 out of 7 npmCommand dependencies pinned

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

Score

5.9

/10

Last Scanned on 2025-05-12

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More