Fix typo in code example of css-parser-algorithms (#1380)

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}:

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": [

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)<!-- -->:
 

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}: