From 708a4298d7d90db60b77972899092e8b97f24bfc Mon Sep 17 00:00:00 2001 From: Masafumi Koba <473530+ybiquitous@users.noreply.github.com> Date: Fri, 26 Apr 2024 09:26:28 +0900 Subject: [PATCH 1/3] Fix typo in code example of css-parser-algorithms --- packages/css-parser-algorithms/docs/css-parser-algorithms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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): From 19d73798706233d4a99327d6ee5ec8932dacb092 Mon Sep 17 00:00:00 2001 From: Masafumi Koba <473530+ybiquitous@users.noreply.github.com> Date: Fri, 26 Apr 2024 09:52:18 +0900 Subject: [PATCH 2/3] Fix code example in source code (.ts) --- packages/css-parser-algorithms/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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}: From f7fad158c58579168db529e82bb12de2148a158d Mon Sep 17 00:00:00 2001 From: Masafumi Koba <473530+ybiquitous@users.noreply.github.com> Date: Fri, 26 Apr 2024 09:57:36 +0900 Subject: [PATCH 3/3] Build --- packages/css-parser-algorithms/dist/index.d.ts | 2 +- .../css-parser-algorithms/docs/css-parser-algorithms.api.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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": [