Socket
Socket
Sign inDemoInstall

@csstools/css-tokenizer

Package Overview
Dependencies
Maintainers
3
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@csstools/css-tokenizer - npm Package Compare versions

Comparing version 2.2.2 to 2.2.3

14

CHANGELOG.md
# Changes to CSS Tokenizer
### 2.2.3
_December 31, 2023_
- Improve documentation.
### 2.2.2

@@ -15,10 +21,2 @@

### 2.2.0
_July 24, 2023_
- Add support for `unicode-range-token`
- Add `signCharacter` to `DimensionToken`, `NumberToken` and `PercentageToken`
- Correctly tokenize negative zero `-0`
[Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer/CHANGELOG.md)

@@ -0,3 +1,42 @@

/**
* Tokenize CSS following the {@link https://drafts.csswg.org/css-syntax/#tokenization | CSS Syntax Level 3 specification}.
*
* @remarks
* The tokenizing and parsing tools provided by CSS Tools are designed to be low level and generic with strong ties to their respective specifications.
*
* Any analysis or mutation of CSS source code should be done with the least powerful tool that can accomplish the task.
* For many applications it is sufficient to work with tokens.
* For others you might need to use {@link https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms | @csstools/css-parser-algorithms} or a more specific parser.
*
* @example
* Tokenize a string of CSS into an array of tokens:
* ```js
* import { tokenize } from '@csstools/css-tokenizer';
*
* const myCSS = `@media only screen and (min-width: 768rem) {
* .foo {
* content: 'Some content!' !important;
* }
* }
* `;
*
* const tokens = tokenize({
* css: myCSS,
* });
*
* console.log(tokens);
* ```
*
* @packageDocumentation
*/
/**
* Deep clone a list of tokens.
* Useful for mutations without altering the original list.
*/
export declare function cloneTokens(tokens: Array<CSSToken>): Array<CSSToken>;
/**
* @internal
*/
export declare type CodePointReader = {

@@ -16,17 +55,71 @@ representationStart: number;

/**
* The union of all possible CSS tokens
*/
export declare type CSSToken = TokenAtKeyword | TokenBadString | TokenBadURL | TokenCDC | TokenCDO | TokenColon | TokenComma | TokenComment | TokenDelim | TokenDimension | TokenEOF | TokenFunction | TokenHash | TokenIdent | TokenNumber | TokenPercentage | TokenSemicolon | TokenString | TokenURL | TokenWhitespace | TokenOpenParen | TokenCloseParen | TokenOpenSquare | TokenCloseSquare | TokenOpenCurly | TokenCloseCurly | TokenUnicodeRange;
/**
* The type of hash token
*/
export declare enum HashType {
/**
* The hash token did not start with an ident sequence (e.g. `#-2`)
*/
Unrestricted = "unrestricted",
/**
* The hash token started with an ident sequence (e.g. `#foo`)
* Only hash tokens with the "id" type are valid ID selectors.
*/
ID = "id"
}
/**
* Assert that a given value has the general structure of a CSS token:
* 1. is an array.
* 2. has at least four items.
* 3. has a known token type.
* 4. has a string representation.
* 5. has a start position.
* 6. has an end position.
*/
export declare function isToken(x: any): x is CSSToken;
/**
* Get the mirror variant of a given token
*
* @example
*
* ```js
* const input = [TokenType.OpenParen, '(', 0, 1, undefined];
* const output = mirrorVariant(input);
*
* console.log(output); // [TokenType.CloseParen, ')', -1, -1, undefined]
* ```
*/
export declare function mirrorVariant(token: CSSToken): CSSToken | null;
/**
* Get the mirror variant type of a given token type
*
* @example
*
* ```js
* const input = TokenType.OpenParen;
* const output = mirrorVariantType(input);
*
* console.log(output); // TokenType.CloseParen
* ```
*/
export declare function mirrorVariantType(type: TokenType): TokenType | null;
/**
* Set the ident value and update the string representation.
* This handles escaping.
*/
export declare function mutateIdent(ident: TokenIdent, newValue: string): void;
/**
* The type of number token
* Either `integer` or `number`
*/
export declare enum NumberType {

@@ -37,2 +130,6 @@ Integer = "integer",

/**
* The CSS Tokenizer is forgiving and will never throw on invalid input.
* Any errors are reported through the `onParseError` callback.
*/
export declare class ParseError extends Error {

@@ -48,2 +145,5 @@ /** The index of the start character of the current token. */

/**
* @internal
*/
export declare class Reader implements CodePointReader {

@@ -64,67 +164,157 @@ cursor: number;

/**
* Concatenate the string representation of a list of tokens.
* This is not a proper serializer that will handle escaping and whitespace.
* It only produces valid CSS for a token list that is also valid.
*/
export declare function stringify(...tokens: Array<CSSToken>): string;
export declare type Token<T extends TokenType, U> = [
/** The type of token */
T,
/** The token representation */
string,
/** Start position of representation */
number,
/** End position of representation */
number,
/** Extra data */
U
];
/**
* The CSS Token interface
*
* @remarks
* CSS Tokens are fully typed and have a strict structure.
* This makes it easier to iterate and analyze a token stream.
*
* The string representation and the parsed value are stored separately for many token types.
* It is always assumed that the string representation will be used when stringifying, while the parsed value should be used when analyzing tokens.
*/
export declare interface Token<T extends TokenType, U> extends Array<T | string | number | U> {
/**
* The type of token
*/
0: T;
/**
* The token representation
*
* @remarks
* This field will be used when stringifying the token.
* Any stored value is assumed to be valid CSS.
*
* You should never use this field when analyzing the token when there is a parsed value available.
* But you must store mutated values here.
*/
1: string;
/**
* Start position of representation
*/
2: number;
/**
* End position of representation
*/
3: number;
/**
* Extra data
*
* @remarks
* This holds the parsed value of each token.
* These values are unescaped, unquoted, converted to numbers, etc.
*
* You should always use this field when analyzing the token.
* But you must not assume that mutating only this field will have any effect.
*/
4: U;
}
export declare type TokenAtKeyword = Token<TokenType.AtKeyword, {
export declare interface TokenAtKeyword extends Token<TokenType.AtKeyword, {
/**
* The unescaped at-keyword name without the leading `@`.
*/
value: string;
}>;
}> {
}
export declare type TokenBadString = Token<TokenType.BadString, undefined>;
export declare interface TokenBadString extends Token<TokenType.BadString, undefined> {
}
export declare type TokenBadURL = Token<TokenType.BadURL, undefined>;
export declare interface TokenBadURL extends Token<TokenType.BadURL, undefined> {
}
export declare type TokenCDC = Token<TokenType.CDC, undefined>;
export declare interface TokenCDC extends Token<TokenType.CDC, undefined> {
}
export declare type TokenCDO = Token<TokenType.CDO, undefined>;
export declare interface TokenCDO extends Token<TokenType.CDO, undefined> {
}
export declare type TokenCloseCurly = Token<TokenType.CloseCurly, undefined>;
export declare interface TokenCloseCurly extends Token<TokenType.CloseCurly, undefined> {
}
export declare type TokenCloseParen = Token<TokenType.CloseParen, undefined>;
export declare interface TokenCloseParen extends Token<TokenType.CloseParen, undefined> {
}
export declare type TokenCloseSquare = Token<TokenType.CloseSquare, undefined>;
export declare interface TokenCloseSquare extends Token<TokenType.CloseSquare, undefined> {
}
export declare type TokenColon = Token<TokenType.Colon, undefined>;
export declare interface TokenColon extends Token<TokenType.Colon, undefined> {
}
export declare type TokenComma = Token<TokenType.Comma, undefined>;
export declare interface TokenComma extends Token<TokenType.Comma, undefined> {
}
export declare type TokenComment = Token<TokenType.Comment, undefined>;
export declare interface TokenComment extends Token<TokenType.Comment, undefined> {
}
export declare type TokenDelim = Token<TokenType.Delim, {
export declare interface TokenDelim extends Token<TokenType.Delim, {
/**
* The delim character.
*/
value: string;
}>;
}> {
}
export declare type TokenDimension = Token<TokenType.Dimension, {
export declare interface TokenDimension extends Token<TokenType.Dimension, {
/**
* The numeric value.
*/
value: number;
signCharacter?: '+' | '-';
/**
* The unescaped unit name.
*/
unit: string;
/**
* `integer` or `number`
*/
type: NumberType;
}>;
/**
* The sign character as it appeared in the source.
* This is only useful if you need to determine if a value was written as "2px" or "+2px".
*/
signCharacter?: '+' | '-';
}> {
}
export declare type TokenEOF = Token<TokenType.EOF, undefined>;
export declare interface TokenEOF extends Token<TokenType.EOF, undefined> {
}
export declare type TokenFunction = Token<TokenType.Function, {
export declare interface TokenFunction extends Token<TokenType.Function, {
/**
* The unescaped function name without the trailing `(`.
*/
value: string;
}>;
}> {
}
export declare type TokenHash = Token<TokenType.Hash, {
export declare interface TokenHash extends Token<TokenType.Hash, {
/**
* The unescaped hash value without the leading `#`.
*/
value: string;
/**
* The hash type.
*/
type: HashType;
}>;
}> {
}
export declare type TokenIdent = Token<TokenType.Ident, {
export declare interface TokenIdent extends Token<TokenType.Ident, {
/**
* The unescaped ident value.
*/
value: string;
}>;
}> {
}
/**
* Tokenize a CSS string into a list of tokens.
*/
export declare function tokenize(input: {

@@ -139,2 +329,5 @@ css: {

/**
* Create a tokenizer for a CSS string.
*/
export declare function tokenizer(input: {

@@ -152,93 +345,197 @@ css: {

export declare type TokenNumber = Token<TokenType.Number, {
export declare interface TokenNumber extends Token<TokenType.Number, {
/**
* The numeric value.
*/
value: number;
/**
* `integer` or `number`
*/
type: NumberType;
/**
* The sign character as it appeared in the source.
* This is only useful if you need to determine if a value was written as "2" or "+2".
*/
signCharacter?: '+' | '-';
type: NumberType;
}>;
}> {
}
export declare type TokenOpenCurly = Token<TokenType.OpenCurly, undefined>;
export declare interface TokenOpenCurly extends Token<TokenType.OpenCurly, undefined> {
}
export declare type TokenOpenParen = Token<TokenType.OpenParen, undefined>;
export declare interface TokenOpenParen extends Token<TokenType.OpenParen, undefined> {
}
export declare type TokenOpenSquare = Token<TokenType.OpenSquare, undefined>;
export declare interface TokenOpenSquare extends Token<TokenType.OpenSquare, undefined> {
}
export declare type TokenPercentage = Token<TokenType.Percentage, {
export declare interface TokenPercentage extends Token<TokenType.Percentage, {
/**
* The numeric value.
*/
value: number;
/**
* The sign character as it appeared in the source.
* This is only useful if you need to determine if a value was written as "2%" or "+2%".
*/
signCharacter?: '+' | '-';
}>;
}> {
}
export declare type TokenSemicolon = Token<TokenType.Semicolon, undefined>;
export declare interface TokenSemicolon extends Token<TokenType.Semicolon, undefined> {
}
export declare type TokenString = Token<TokenType.String, {
export declare interface TokenString extends Token<TokenType.String, {
/**
* The unescaped string value without the leading and trailing quotes.
*/
value: string;
}>;
}> {
}
/**
* All possible CSS token types
*/
export declare enum TokenType {
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#comment-diagram */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#comment-diagram}
*/
Comment = "comment",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-at-keyword-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-at-keyword-token}
*/
AtKeyword = "at-keyword-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-bad-string-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-bad-string-token}
*/
BadString = "bad-string-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-bad-url-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-bad-url-token}
*/
BadURL = "bad-url-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-cdc-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-cdc-token}
*/
CDC = "CDC-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-cdo-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-cdo-token}
*/
CDO = "CDO-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-colon-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-colon-token}
*/
Colon = "colon-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-comma-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-comma-token}
*/
Comma = "comma-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-delim-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-delim-token}
*/
Delim = "delim-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-dimension-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-dimension-token}
*/
Dimension = "dimension-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-eof-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-eof-token}
*/
EOF = "EOF-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-function-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-function-token}
*/
Function = "function-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-hash-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-hash-token}
*/
Hash = "hash-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-ident-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-ident-token}
*/
Ident = "ident-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-percentage-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-percentage-token}
*/
Number = "number-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-percentage-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-percentage-token}
*/
Percentage = "percentage-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-semicolon-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-semicolon-token}
*/
Semicolon = "semicolon-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-string-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-string-token}
*/
String = "string-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-url-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-url-token}
*/
URL = "url-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-whitespace-token */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#typedef-whitespace-token}
*/
Whitespace = "whitespace-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#tokendef-open-paren */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#tokendef-open-paren}
*/
OpenParen = "(-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#tokendef-close-paren */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#tokendef-close-paren}
*/
CloseParen = ")-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#tokendef-open-square */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#tokendef-open-square}
*/
OpenSquare = "[-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#tokendef-close-square */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#tokendef-close-square}
*/
CloseSquare = "]-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#tokendef-open-curly */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#tokendef-open-curly}
*/
OpenCurly = "{-token",
/** https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#tokendef-close-curly */
/**
* @see {@link https://www.w3.org/TR/2021/CRD-css-syntax-3-20211224/#tokendef-close-curly}
*/
CloseCurly = "}-token",
/** https://drafts.csswg.org/css-syntax/#typedef-unicode-range-token */
/**
* Only appears in the token stream when the `unicodeRangesAllowed` option is set to true.
*
* @example
* ```js
* import { tokenize } from '@csstools/css-tokenizer';
*
* const tokens = tokenize({
* css: `U+0025-00FF, U+4??`,
* unicodeRangesAllowed: true,
* });
*
* console.log(tokens);
* ```
*
* @see {@link https://drafts.csswg.org/css-syntax/#typedef-unicode-range-token}
*/
UnicodeRange = "unicode-range-token"
}
export declare type TokenUnicodeRange = Token<TokenType.UnicodeRange, {
export declare interface TokenUnicodeRange extends Token<TokenType.UnicodeRange, {
startOfRange: number;
endOfRange: number;
}>;
}> {
}
export declare type TokenURL = Token<TokenType.URL, {
export declare interface TokenURL extends Token<TokenType.URL, {
/**
* The unescaped URL value without the leading `url(` and trailing `)`.
*/
value: string;
}>;
}> {
}
export declare type TokenWhitespace = Token<TokenType.Whitespace, undefined>;
export declare interface TokenWhitespace extends Token<TokenType.Whitespace, undefined> {
}
export { }
{
"name": "@csstools/css-tokenizer",
"description": "Tokenize CSS",
"version": "2.2.2",
"version": "2.2.3",
"contributors": [

@@ -6,0 +6,0 @@ {

@@ -9,2 +9,6 @@ # CSS Tokenizer

## API
[Read the API docs](./docs/css-tokenizer.md)
## Usage

@@ -21,3 +25,3 @@

const myCSS = `@media only screen and (min-width: 768rem) {
const myCSS = `@media only screen and (min-width: 768rem) {
.foo {

@@ -73,3 +77,2 @@ content: 'Some content!' !important;

The tokenizer is forgiving and won't stop when a parse error is encountered.
Parse errors also aren't tokens.

@@ -93,4 +96,4 @@ To receive parsing error information you can set a callback.

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

@@ -97,0 +100,0 @@ ## Goals and non-goals

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc