diff --git a/packages/css-parser-algorithms/dist/index.d.ts b/packages/css-parser-algorithms/dist/index.d.ts index a89e0b391..b25c7e1b6 100644 --- a/packages/css-parser-algorithms/dist/index.d.ts +++ b/packages/css-parser-algorithms/dist/index.d.ts @@ -37,7 +37,7 @@ * import { tokenize } from '@csstools/css-tokenizer'; * import { parseListOfComponentValues } from '@csstools/css-parser-algorithms'; * - * parseComponentValue(tokenize({ css: `10x 20px` })); + * parseListOfComponentValues(tokenize({ css: `10x 20px` })); * ``` * * If your context allows a comma-separated list of component values, use {@link parseCommaSeparatedListOfComponentValues}: 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 d1fa05de7..1f56507e8 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-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", + "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 * parseListOfComponentValues(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": [ diff --git a/packages/css-parser-algorithms/docs/css-parser-algorithms.md b/packages/css-parser-algorithms/docs/css-parser-algorithms.md index ccbcc83cc..621006102 100644 --- a/packages/css-parser-algorithms/docs/css-parser-algorithms.md +++ b/packages/css-parser-algorithms/docs/css-parser-algorithms.md @@ -43,7 +43,7 @@ If your context allows a list of component values, use [parseListOfComponentValu import { tokenize } from '@csstools/css-tokenizer'; import { parseListOfComponentValues } from '@csstools/css-parser-algorithms'; -parseComponentValue(tokenize({ css: `10x 20px` })); +parseListOfComponentValues(tokenize({ css: `10x 20px` })); ``` If your context allows a comma-separated list of component values, use [parseCommaSeparatedListOfComponentValues()](./css-parser-algorithms.parsecommaseparatedlistofcomponentvalues.md): diff --git a/packages/css-parser-algorithms/src/index.ts b/packages/css-parser-algorithms/src/index.ts index 4a9460b63..b73e2cccd 100644 --- a/packages/css-parser-algorithms/src/index.ts +++ b/packages/css-parser-algorithms/src/index.ts @@ -37,7 +37,7 @@ * import { tokenize } from '@csstools/css-tokenizer'; * import { parseListOfComponentValues } from '@csstools/css-parser-algorithms'; * - * parseComponentValue(tokenize({ css: `10x 20px` })); + * parseListOfComponentValues(tokenize({ css: `10x 20px` })); * ``` * * If your context allows a comma-separated list of component values, use {@link parseCommaSeparatedListOfComponentValues}: