diff --git a/packages/css-parser-algorithms/dist/index.d.ts b/packages/css-parser-algorithms/dist/index.d.ts index 9759d0572..67796e8cb 100644 --- a/packages/css-parser-algorithms/dist/index.d.ts +++ b/packages/css-parser-algorithms/dist/index.d.ts @@ -15,7 +15,7 @@ * Parse a string of CSS into a component value: * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseComponentValue } from '@csstools/css-parser'; + * import { parseComponentValue } from '@csstools/css-parser-algorithms'; * * const myCSS = `calc(1px * 2)`; * @@ -35,7 +35,7 @@ * If your context allows a list of component values, use {@link parseListOfComponentValues}: * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseListOfComponentValues } from '@csstools/css-parser'; + * import { parseListOfComponentValues } from '@csstools/css-parser-algorithms'; * * parseComponentValue(tokenize({ css: `10x 20px` })); * ``` @@ -43,7 +43,7 @@ * If your context allows a comma-separated list of component values, use {@link parseCommaSeparatedListOfComponentValues}: * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser'; + * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms'; * * parseCommaSeparatedListOfComponentValues(tokenize({ css: `20deg, 50%, 30%` })); * ``` @@ -53,7 +53,7 @@ * * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseComponentValue, isSimpleBlockNode } from '@csstools/css-parser'; + * import { parseComponentValue, isSimpleBlockNode } from '@csstools/css-parser-algorithms'; * * const myCSS = `calc(1px * (5 / 2))`; * @@ -344,7 +344,7 @@ export declare function isWhitespaceNode(x: unknown): x is WhitespaceNode; * @example * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser'; + * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms'; * * parseCommaSeparatedListOfComponentValues(tokenize({ css: `20deg, 50%, 30%` })); * ``` @@ -359,7 +359,7 @@ export declare function parseCommaSeparatedListOfComponentValues(tokens: Array, options?: { * @example * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseListOfComponentValues } from '@csstools/css-parser'; + * import { parseListOfComponentValues } from '@csstools/css-parser-algorithms'; * * parseListOfComponentValues(tokenize({ css: `20deg 30%` })); * ``` @@ -524,7 +524,7 @@ export declare class TokenNode { * @example * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseListOfComponentValues, isSimpleBlockNode } from '@csstools/css-parser'; + * import { parseListOfComponentValues, isSimpleBlockNode } from '@csstools/css-parser-algorithms'; * * const myCSS = `calc(1px * (5 / 2)) 10px`; * diff --git a/packages/css-parser-algorithms/docs/css-parser-algorithms.api.json b/packages/css-parser-algorithms/docs/css-parser-algorithms.api.json index f52de0853..3cac9e469 100644 --- a/packages/css-parser-algorithms/docs/css-parser-algorithms.api.json +++ b/packages/css-parser-algorithms/docs/css-parser-algorithms.api.json @@ -161,7 +161,7 @@ }, "kind": "Package", "canonicalReference": "@csstools/css-parser-algorithms!", - "docComment": "/**\n * Parse CSS following the {@link https://drafts.csswg.org/css-syntax/#parsing | CSS Syntax Level 3 specification}.\n *\n * @remarks\n *\n * The tokenizing and parsing tools provided by CSS Tools are designed to be low level and generic with strong ties to their respective specifications.\n *\n * 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.\n *\n * The implementation of the AST nodes is kept lightweight and simple. Do not expect magic methods, instead assume that arrays and class instances behave like any other JavaScript.\n *\n * @example\n *\n * Parse a string of CSS into a component value:\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseComponentValue } from '@csstools/css-parser';\n *\n * const myCSS = `calc(1px * 2)`;\n *\n * const componentValue = parseComponentValue(tokenize({\n * \tcss: myCSS,\n * }));\n *\n * console.log(componentValue);\n * ```\n *\n * @example\n *\n * Use the right algorithm for the job.\n *\n * Algorithms that can parse larger structures (comma-separated lists, ...) can also parse smaller structures. However, the opposite is not true.\n *\n * If your context allows a list of component values, use {@link parseListOfComponentValues}:\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseListOfComponentValues } from '@csstools/css-parser';\n *\n * parseComponentValue(tokenize({ css: `10x 20px` }));\n * ```\n *\n * If your context allows a comma-separated list of component values, use {@link parseCommaSeparatedListOfComponentValues}:\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser';\n *\n * parseCommaSeparatedListOfComponentValues(tokenize({ css: `20deg, 50%, 30%` }));\n * ```\n *\n * @example\n *\n * Use the stateful walkers to keep track of the context of a given component value.\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseComponentValue, isSimpleBlockNode } from '@csstools/css-parser';\n *\n * const myCSS = `calc(1px * (5 / 2))`;\n *\n * const componentValue = parseComponentValue(tokenize({ css: myCSS }));\n *\n * let state = { inSimpleBlock: false };\n * componentValue.walk((entry) => {\n * \tif (isSimpleBlockNode(entry)) {\n * \t\tentry.state.inSimpleBlock = true;\n * \t\treturn;\n * \t}\n *\n * \tif (entry.state.inSimpleBlock) {\n * \t\tconsole.log(entry.node.toString()); // `5`, ...\n * \t}\n * }, state);\n * ```\n *\n * @packageDocumentation\n */\n", + "docComment": "/**\n * Parse CSS following the {@link https://drafts.csswg.org/css-syntax/#parsing | CSS Syntax Level 3 specification}.\n *\n * @remarks\n *\n * The tokenizing and parsing tools provided by CSS Tools are designed to be low level and generic with strong ties to their respective specifications.\n *\n * 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.\n *\n * The implementation of the AST nodes is kept lightweight and simple. Do not expect magic methods, instead assume that arrays and class instances behave like any other JavaScript.\n *\n * @example\n *\n * Parse a string of CSS into a component value:\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseComponentValue } from '@csstools/css-parser-algorithms';\n *\n * const myCSS = `calc(1px * 2)`;\n *\n * const componentValue = parseComponentValue(tokenize({\n * \tcss: myCSS,\n * }));\n *\n * console.log(componentValue);\n * ```\n *\n * @example\n *\n * Use the right algorithm for the job.\n *\n * Algorithms that can parse larger structures (comma-separated lists, ...) can also parse smaller structures. However, the opposite is not true.\n *\n * If your context allows a list of component values, use {@link parseListOfComponentValues}:\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseListOfComponentValues } from '@csstools/css-parser-algorithms';\n *\n * parseComponentValue(tokenize({ css: `10x 20px` }));\n * ```\n *\n * If your context allows a comma-separated list of component values, use {@link parseCommaSeparatedListOfComponentValues}:\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms';\n *\n * parseCommaSeparatedListOfComponentValues(tokenize({ css: `20deg, 50%, 30%` }));\n * ```\n *\n * @example\n *\n * Use the stateful walkers to keep track of the context of a given component value.\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseComponentValue, isSimpleBlockNode } from '@csstools/css-parser-algorithms';\n *\n * const myCSS = `calc(1px * (5 / 2))`;\n *\n * const componentValue = parseComponentValue(tokenize({ css: myCSS }));\n *\n * let state = { inSimpleBlock: false };\n * componentValue.walk((entry) => {\n * \tif (isSimpleBlockNode(entry)) {\n * \t\tentry.state.inSimpleBlock = true;\n * \t\treturn;\n * \t}\n *\n * \tif (entry.state.inSimpleBlock) {\n * \t\tconsole.log(entry.node.toString()); // `5`, ...\n * \t}\n * }, state);\n * ```\n *\n * @packageDocumentation\n */\n", "name": "@csstools/css-parser-algorithms", "preserveMemberOrder": false, "members": [ @@ -1868,7 +1868,7 @@ { "kind": "Function", "canonicalReference": "@csstools/css-parser-algorithms!parseCommaSeparatedListOfComponentValues:function(1)", - "docComment": "/**\n * Parse a comma-separated list of component values.\n *\n * @example\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser';\n *\n * parseCommaSeparatedListOfComponentValues(tokenize({ css: `20deg, 50%, 30%` }));\n * ```\n *\n */\n", + "docComment": "/**\n * Parse a comma-separated list of component values.\n *\n * @example\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms';\n *\n * parseCommaSeparatedListOfComponentValues(tokenize({ css: `20deg, 50%, 30%` }));\n * ```\n *\n */\n", "excerptTokens": [ { "kind": "Content", @@ -1957,7 +1957,7 @@ { "kind": "Function", "canonicalReference": "@csstools/css-parser-algorithms!parseComponentValue:function(1)", - "docComment": "/**\n * Parse a single component value.\n *\n * @example\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser';\n *\n * parseCommaSeparatedListOfComponentValues(tokenize({ css: `10px` }));\n * parseCommaSeparatedListOfComponentValues(tokenize({ css: `calc((10px + 1x) * 4)` }));\n * ```\n *\n */\n", + "docComment": "/**\n * Parse a single component value.\n *\n * @example\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms';\n *\n * parseCommaSeparatedListOfComponentValues(tokenize({ css: `10px` }));\n * parseCommaSeparatedListOfComponentValues(tokenize({ css: `calc((10px + 1x) * 4)` }));\n * ```\n *\n */\n", "excerptTokens": [ { "kind": "Content", @@ -2050,7 +2050,7 @@ { "kind": "Function", "canonicalReference": "@csstools/css-parser-algorithms!parseListOfComponentValues:function(1)", - "docComment": "/**\n * Parse a list of component values.\n *\n * @example\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseListOfComponentValues } from '@csstools/css-parser';\n *\n * parseListOfComponentValues(tokenize({ css: `20deg 30%` }));\n * ```\n *\n */\n", + "docComment": "/**\n * Parse a list of component values.\n *\n * @example\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseListOfComponentValues } from '@csstools/css-parser-algorithms';\n *\n * parseListOfComponentValues(tokenize({ css: `20deg 30%` }));\n * ```\n *\n */\n", "excerptTokens": [ { "kind": "Content", @@ -2906,7 +2906,7 @@ { "kind": "Function", "canonicalReference": "@csstools/css-parser-algorithms!walk:function(1)", - "docComment": "/**\n * Walks each item in a list of component values all of their children.\n *\n * @param cb - The callback function to execute for each item. The function receives an object containing the current node (`node`), its parent (`parent`), and an optional `state` object. A second parameter is the index of the current node. The function can return `false` to stop the iteration.\n *\n * @param state - An optional state object that can be used to pass additional information to the callback function. The state object is cloned for each iteration. This means that changes to the state object are not reflected in the next iteration. However changes are passed down to child node iterations.\n *\n * @returns `false` if the iteration was halted, `undefined` otherwise.\n *\n * @example\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseListOfComponentValues, isSimpleBlockNode } from '@csstools/css-parser';\n *\n * const myCSS = `calc(1px * (5 / 2)) 10px`;\n *\n * const componentValues = parseListOfComponentValues(tokenize({ css: myCSS }));\n *\n * let state = { inSimpleBlock: false };\n * walk(componentValues, (entry) => {\n * \tif (isSimpleBlockNode(entry)) {\n * \t\tentry.state.inSimpleBlock = true;\n * \t\treturn;\n * \t}\n *\n * \tif (entry.state.inSimpleBlock) {\n * \t\tconsole.log(entry.node.toString()); // `5`, ...\n * \t}\n * }, state);\n * ```\n *\n */\n", + "docComment": "/**\n * Walks each item in a list of component values all of their children.\n *\n * @param cb - The callback function to execute for each item. The function receives an object containing the current node (`node`), its parent (`parent`), and an optional `state` object. A second parameter is the index of the current node. The function can return `false` to stop the iteration.\n *\n * @param state - An optional state object that can be used to pass additional information to the callback function. The state object is cloned for each iteration. This means that changes to the state object are not reflected in the next iteration. However changes are passed down to child node iterations.\n *\n * @returns `false` if the iteration was halted, `undefined` otherwise.\n *\n * @example\n * ```js\n * import { tokenize } from '@csstools/css-tokenizer';\n * import { parseListOfComponentValues, isSimpleBlockNode } from '@csstools/css-parser-algorithms';\n *\n * const myCSS = `calc(1px * (5 / 2)) 10px`;\n *\n * const componentValues = parseListOfComponentValues(tokenize({ css: myCSS }));\n *\n * let state = { inSimpleBlock: false };\n * walk(componentValues, (entry) => {\n * \tif (isSimpleBlockNode(entry)) {\n * \t\tentry.state.inSimpleBlock = true;\n * \t\treturn;\n * \t}\n *\n * \tif (entry.state.inSimpleBlock) {\n * \t\tconsole.log(entry.node.toString()); // `5`, ...\n * \t}\n * }, state);\n * ```\n *\n */\n", "excerptTokens": [ { "kind": "Content", diff --git a/packages/css-parser-algorithms/docs/css-parser-algorithms.md b/packages/css-parser-algorithms/docs/css-parser-algorithms.md index ac8bc1263..79027c58b 100644 --- a/packages/css-parser-algorithms/docs/css-parser-algorithms.md +++ b/packages/css-parser-algorithms/docs/css-parser-algorithms.md @@ -20,7 +20,7 @@ Parse a string of CSS into a component value: ```js import { tokenize } from '@csstools/css-tokenizer'; -import { parseComponentValue } from '@csstools/css-parser'; +import { parseComponentValue } from '@csstools/css-parser-algorithms'; const myCSS = `calc(1px * 2)`; @@ -41,7 +41,7 @@ If your context allows a list of component values, use [parseListOfComponentValu ```js import { tokenize } from '@csstools/css-tokenizer'; -import { parseListOfComponentValues } from '@csstools/css-parser'; +import { parseListOfComponentValues } from '@csstools/css-parser-algorithms'; parseComponentValue(tokenize({ css: `10x 20px` })); ``` @@ -49,7 +49,7 @@ If your context allows a comma-separated list of component values, use [parseCom ```js import { tokenize } from '@csstools/css-tokenizer'; -import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser'; +import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms'; parseCommaSeparatedListOfComponentValues(tokenize({ css: `20deg, 50%, 30%` })); ``` @@ -60,7 +60,7 @@ Use the stateful walkers to keep track of the context of a given component value ```js import { tokenize } from '@csstools/css-tokenizer'; -import { parseComponentValue, isSimpleBlockNode } from '@csstools/css-parser'; +import { parseComponentValue, isSimpleBlockNode } from '@csstools/css-parser-algorithms'; const myCSS = `calc(1px * (5 / 2))`; diff --git a/packages/css-parser-algorithms/docs/css-parser-algorithms.parsecommaseparatedlistofcomponentvalues.md b/packages/css-parser-algorithms/docs/css-parser-algorithms.parsecommaseparatedlistofcomponentvalues.md index 9db0ac704..74e5cec4c 100644 --- a/packages/css-parser-algorithms/docs/css-parser-algorithms.parsecommaseparatedlistofcomponentvalues.md +++ b/packages/css-parser-algorithms/docs/css-parser-algorithms.parsecommaseparatedlistofcomponentvalues.md @@ -30,7 +30,7 @@ export declare function parseCommaSeparatedListOfComponentValues(tokens: Array, opti ```js import { tokenize } from '@csstools/css-tokenizer'; -import { parseListOfComponentValues } from '@csstools/css-parser'; +import { parseListOfComponentValues } from '@csstools/css-parser-algorithms'; parseListOfComponentValues(tokenize({ css: `20deg 30%` })); ``` diff --git a/packages/css-parser-algorithms/docs/css-parser-algorithms.walk.md b/packages/css-parser-algorithms/docs/css-parser-algorithms.walk.md index 7fc41efe4..1666e0aa8 100644 --- a/packages/css-parser-algorithms/docs/css-parser-algorithms.walk.md +++ b/packages/css-parser-algorithms/docs/css-parser-algorithms.walk.md @@ -37,7 +37,7 @@ false \| undefined ```js import { tokenize } from '@csstools/css-tokenizer'; -import { parseListOfComponentValues, isSimpleBlockNode } from '@csstools/css-parser'; +import { parseListOfComponentValues, isSimpleBlockNode } from '@csstools/css-parser-algorithms'; const myCSS = `calc(1px * (5 / 2)) 10px`; diff --git a/packages/css-parser-algorithms/src/index.ts b/packages/css-parser-algorithms/src/index.ts index 7a12e9b02..4a9460b63 100644 --- a/packages/css-parser-algorithms/src/index.ts +++ b/packages/css-parser-algorithms/src/index.ts @@ -15,7 +15,7 @@ * Parse a string of CSS into a component value: * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseComponentValue } from '@csstools/css-parser'; + * import { parseComponentValue } from '@csstools/css-parser-algorithms'; * * const myCSS = `calc(1px * 2)`; * @@ -35,7 +35,7 @@ * If your context allows a list of component values, use {@link parseListOfComponentValues}: * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseListOfComponentValues } from '@csstools/css-parser'; + * import { parseListOfComponentValues } from '@csstools/css-parser-algorithms'; * * parseComponentValue(tokenize({ css: `10x 20px` })); * ``` @@ -43,7 +43,7 @@ * If your context allows a comma-separated list of component values, use {@link parseCommaSeparatedListOfComponentValues}: * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser'; + * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms'; * * parseCommaSeparatedListOfComponentValues(tokenize({ css: `20deg, 50%, 30%` })); * ``` @@ -53,7 +53,7 @@ * * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseComponentValue, isSimpleBlockNode } from '@csstools/css-parser'; + * import { parseComponentValue, isSimpleBlockNode } from '@csstools/css-parser-algorithms'; * * const myCSS = `calc(1px * (5 / 2))`; * diff --git a/packages/css-parser-algorithms/src/parse/comma-separated-list-of-component-values.ts b/packages/css-parser-algorithms/src/parse/comma-separated-list-of-component-values.ts index b59b44a7b..418f0b3d5 100644 --- a/packages/css-parser-algorithms/src/parse/comma-separated-list-of-component-values.ts +++ b/packages/css-parser-algorithms/src/parse/comma-separated-list-of-component-values.ts @@ -7,7 +7,7 @@ import { ComponentValue, consumeComponentValue } from '../consume/component-bloc * @example * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser'; + * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms'; * * parseCommaSeparatedListOfComponentValues(tokenize({ css: `20deg, 50%, 30%` })); * ``` diff --git a/packages/css-parser-algorithms/src/parse/component-value.ts b/packages/css-parser-algorithms/src/parse/component-value.ts index 03cc11b09..eced490c4 100644 --- a/packages/css-parser-algorithms/src/parse/component-value.ts +++ b/packages/css-parser-algorithms/src/parse/component-value.ts @@ -7,7 +7,7 @@ import { consumeComponentValue } from '../consume/component-block-function'; * @example * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser'; + * import { parseCommaSeparatedListOfComponentValues } from '@csstools/css-parser-algorithms'; * * parseCommaSeparatedListOfComponentValues(tokenize({ css: `10px` })); * parseCommaSeparatedListOfComponentValues(tokenize({ css: `calc((10px + 1x) * 4)` })); diff --git a/packages/css-parser-algorithms/src/parse/list-of-component-values.ts b/packages/css-parser-algorithms/src/parse/list-of-component-values.ts index e29192586..4a2f12e41 100644 --- a/packages/css-parser-algorithms/src/parse/list-of-component-values.ts +++ b/packages/css-parser-algorithms/src/parse/list-of-component-values.ts @@ -7,7 +7,7 @@ import { ComponentValue, consumeComponentValue } from '../consume/component-bloc * @example * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseListOfComponentValues } from '@csstools/css-parser'; + * import { parseListOfComponentValues } from '@csstools/css-parser-algorithms'; * * parseListOfComponentValues(tokenize({ css: `20deg 30%` })); * ``` diff --git a/packages/css-parser-algorithms/src/util/walk.ts b/packages/css-parser-algorithms/src/util/walk.ts index df28c9511..c4bf2f808 100644 --- a/packages/css-parser-algorithms/src/util/walk.ts +++ b/packages/css-parser-algorithms/src/util/walk.ts @@ -73,7 +73,7 @@ export function forEach>( * @example * ```js * import { tokenize } from '@csstools/css-tokenizer'; - * import { parseListOfComponentValues, isSimpleBlockNode } from '@csstools/css-parser'; + * import { parseListOfComponentValues, isSimpleBlockNode } from '@csstools/css-parser-algorithms'; * * const myCSS = `calc(1px * (5 / 2)) 10px`; *