@tbela99/css-parser 1.4.1 → 1.4.3

package/dist/lib/ast/features/transform.js

@@ -1,14 +1,7 @@
 import { EnumToken } from '../types.js';
 import { consumeWhitespace } from '../../validation/utils/whitespace.js';
-import '../minify.js';
-import '../walk.js';
-import '../../parser/parse.js';
-import '../../parser/tokenize.js';
-import '../../parser/utils/config.js';
-import '../../syntax/color/utils/constants.js';
-import { filterValues, renderToken } from '../../renderer/render.js';
-import '../../renderer/sourcemap/lib/encode.js';
 import { compute } from '../transform/compute.js';
+import { filterValues, renderToken } from '../../renderer/render.js';
 import { minifyTransformFunctions, eqMatrix } from '../transform/minify.js';
 import { FeatureWalkMode } from './type.js';
 
@@ -28,7 +21,7 @@ class TransformCssFeature {
         }
     }
     run(ast) {
-        if (!('chi' in ast)) {
+        if (!("chi" in ast)) {
             return null;
         }
         let i = 0;
@@ -37,18 +30,21 @@ class TransformCssFeature {
         for (; i < ast.chi.length; i++) {
             // @ts-ignore
             node = ast.chi[i];
-            if (node.typ != EnumToken.DeclarationNodeType || !node.nam.match(/^(-[a-z]+-)?transform$/)) {
+            if (node.typ != EnumToken.DeclarationNodeType ||
+                !node.nam.match(/^(-[a-z]+-)?transform$/)) {
                 continue;
             }
             const children = [];
             for (const child of node.val) {
-                children.push(child.typ == EnumToken.FunctionTokenType ? minifyTransformFunctions(child) : child);
+                children.push(child.typ == EnumToken.TransformFunctionTokenType
+                    ? minifyTransformFunctions(child)
+                    : child);
             }
             consumeWhitespace(children);
             let { matrix, cumulative, minified } = compute(children) ?? {
                 matrix: null,
                 cumulative: null,
-                minified: null
+                minified: null,
             };
             if (matrix == null || cumulative == null || minified == null) {
                 node.val = children;
@@ -63,7 +59,7 @@ class TransformCssFeature {
             }
             const l = renderToken(matrix).length;
             node.val = r.reduce((acc, curr) => {
-                if (curr.reduce((acc, t) => acc + renderToken(t), '').length < l) {
+                if (curr.reduce((acc, t) => acc + renderToken(t), "").length < l) {
                     return curr;
                 }
                 return acc;

package/dist/lib/ast/features/type.d.ts

@@ -0,0 +1,15 @@
+/**
+ * feature walk mode
+ *
+ * @private
+ */
+export declare enum FeatureWalkMode {
+    /**
+     * pre process
+     */
+    Pre = 1,
+    /**
+     * post process
+     */
+    Post = 2
+}

package/dist/lib/ast/find.d.ts

@@ -0,0 +1,165 @@
+import type { Token } from "../../@types/token.d.ts";
+import type { AstNode, AstValueMatcher, TokenSearchResult } from "../../@types/ast.d.ts";
+/**
+ * search the ast tree and return the first match
+ *
+ * ```ts
+ *  // find the first ast declaration node which name is 'aspect-ratio'
+import { find, EnumToken, transform } from "@tbela99/css-parser";
+import type { AstNode } from "@tbela99/css-parser";
+
+ * const css = `
+
+button {
+  aspect-ratio: 1;
+  width: if(media(any-pointer: fine): 30px; else: 44px);
+}
+    `;
+
+ // find declaration which contain a '30px'
+  const nodeMatcher = (node: AstNode) =>
+      return node.typ == EnumToken.DeclarationNodeType && (node as AstDeclaration).nam == 'aspect-ratio';
+
+     const result  = await transform(css);
+     const node = find(result.ast, nodeMatcher);
+
+     console.log({node});
+ 
+    ```
+ *
+ * @param ast
+ * @param matcher
+ * @returns
+ */
+export declare function find(ast: AstNode, matcher: (node: AstNode) => boolean): AstNode | null;
+/**
+ * search the ast tree by checking each node's value and return the first match
+ *
+ * ```ts
+ *  // find the first ast node which contains the length token '30px'
+import { findByValue, EnumToken, transform } from "@tbela99/css-parser";
+import type { AstNode } from "@tbela99/css-parser";
+
+ * const css = `
+
+button {
+  aspect-ratio: 1;
+  width: if(media(any-pointer: fine): 30px; else: 44px);
+}
+    `;
+
+ // find declaration which contain a '30px'
+  const nodeMatcher = (value: Token) =>
+      return value.typ == EnumToken.LengthTokenType && (value as LengthToken).val == 30 && (value as LengthToken).unit == 'px' ;
+
+     const result  = await transform(css);
+     const { node, value } = findByValue(result.ast, nodeMatcher) ?? {};
+
+     console.log({node, value});
+ 
+    ```
+ *
+ * @param ast
+ * @param matcher
+ * @returns
+ */
+export declare function findByValue(ast: AstNode, matcher: AstValueMatcher): {
+    node: AstNode;
+    value: TokenSearchResult;
+} | null;
+/**
+ * search the ast tree and return all matches
+ *
+ * ```ts
+ *  // find the first ast declaration node which name is 'aspect-ratio'
+import { findAll, EnumToken, transform } from "@tbela99/css-parser";
+import type { AstNode } from "@tbela99/css-parser";
+
+ * const css = `
+
+button {
+  aspect-ratio: 1;
+  width: if(media(any-pointer: fine): 30px; else: 44px);
+}
+    `;
+
+ // find declaration which contain a '30px'
+  const nodeMatcher = (node: AstNode) =>
+      return node.typ == EnumToken.DeclarationNodeType && (node as AstDeclaration).nam == 'aspect-ratio';
+
+     const result  = await transform(css);
+     const nodes = findAll(result.ast, nodeMatcher);
+
+     console.log({nodes});
+ 
+    ```
+ *
+ * @param ast
+ * @param matcher
+ * @returns
+ */
+export declare function findAll(ast: AstNode, matcher: (node: AstNode) => boolean): AstNode[];
+/**
+ * search the ast tree and return the last match
+ *
+ * ```ts
+ *  // find the first ast declaration node which name is 'aspect-ratio'
+import { findLast, EnumToken, transform } from "@tbela99/css-parser";
+import type { AstNode } from "@tbela99/css-parser";
+
+ * const css = `
+
+button {
+  aspect-ratio: 1;
+  width: if(media(any-pointer: fine): 30px; else: 44px);
+}
+    `;
+
+ // find declaration which contain a '30px'
+  const nodeMatcher = (node: AstNode) =>
+      return node.typ == EnumToken.DeclarationNodeType && (node as AstDeclaration).nam == 'aspect-ratio';
+
+     const result  = await transform(css);
+     const node = findLast(result.ast, nodeMatcher);
+
+     console.log({node});
+ 
+    ```
+ *
+ * @param ast
+ * @param matcher
+ * @returns
+ */
+export declare function findLast(ast: AstNode, matcher: (node: AstNode) => boolean): AstNode | null;
+/**
+ * find the node's value token of the specified ast node
+ *
+ * ```ts
+ *  // find the first ast declaration node which name is 'aspect-ratio'
+import { findValue, EnumToken, transform } from "@tbela99/css-parser";
+import type { AstNode } from "@tbela99/css-parser";
+
+ * const css = `
+
+button {
+  aspect-ratio: 1;
+  width: if(media(any-pointer: fine): 30px; else: 44px);
+}
+    `;
+
+ // find declaration which contain a '30px'
+  const nodeMatcher = (node: AstNode) =>
+      return node.typ == EnumToken.DeclarationNodeType && (node as AstDeclaration).nam == 'aspect-ratio';
+
+     const result  = await transform(css);
+     const found = findValue(result.ast.chi[0], nodeMatcher);
+
+     console.log({found}); // 'button' token of the selector
+  
+    ```
+ *
+ * @param ast
+ * @param matcher
+ * @returns
+ */
+export declare function findValue(ast: AstNode | Token, matcher: (node: AstNode, parent?: AstNode | Token | null, root?: AstNode | null, parents?: Generator<Token> | null) => boolean): TokenSearchResult | null;

package/dist/lib/ast/find.js

@@ -0,0 +1,175 @@
+import { EnumToken } from './types.js';
+import { walk, walkValues } from './walk.js';
+
+/**
+ * search the ast tree and return the first match
+ *
+ * ```ts
+ *  // find the first ast declaration node which name is 'aspect-ratio'
+import { find, EnumToken, transform } from "@tbela99/css-parser";
+import type { AstNode } from "@tbela99/css-parser";
+
+ * const css = `
+
+button {
+  aspect-ratio: 1;
+  width: if(media(any-pointer: fine): 30px; else: 44px);
+}
+    `;
+
+ // find declaration which contain a '30px'
+  const nodeMatcher = (node: AstNode) =>
+      return node.typ == EnumToken.DeclarationNodeType && (node as AstDeclaration).nam == 'aspect-ratio';
+
+     const result  = await transform(css);
+     const node = find(result.ast, nodeMatcher);
+
+     console.log({node});
+ 
+    ```
+ *
+ * @param ast
+ * @param matcher
+ * @returns
+ */
+function find(ast, matcher) {
+    for (const { node } of walk(ast)) {
+        if (matcher(node)) {
+            return node;
+        }
+    }
+    return null;
+}
+/**
+ * search the ast tree by checking each node's value and return the first match
+ *
+ * ```ts
+ *  // find the first ast node which contains the length token '30px'
+import { findByValue, EnumToken, transform } from "@tbela99/css-parser";
+import type { AstNode } from "@tbela99/css-parser";
+
+ * const css = `
+
+button {
+  aspect-ratio: 1;
+  width: if(media(any-pointer: fine): 30px; else: 44px);
+}
+    `;
+
+ // find declaration which contain a '30px'
+  const nodeMatcher = (value: Token) =>
+      return value.typ == EnumToken.LengthTokenType && (value as LengthToken).val == 30 && (value as LengthToken).unit == 'px' ;
+
+     const result  = await transform(css);
+     const { node, value } = findByValue(result.ast, nodeMatcher) ?? {};
+
+     console.log({node, value});
+ 
+    ```
+ *
+ * @param ast
+ * @param matcher
+ * @returns
+ */
+function findByValue(ast, matcher) {
+    let source;
+    for (const { node } of walk(ast)) {
+        source = null;
+        if (node.typ === EnumToken.DeclarationNodeType) {
+            source = node.val;
+        }
+        else if (Array.isArray(node.tokens)) {
+            source = node.tokens;
+        }
+        if (source == null) {
+            continue;
+        }
+        for (const { value, parent, root: rootNode, parents } of walkValues(source, node)) {
+            if (matcher(value, node)) {
+                return { node, value: { node: value, parent, root: rootNode, parents } };
+            }
+        }
+    }
+    return null;
+}
+/**
+ * search the ast tree and return all matches
+ *
+ * ```ts
+ *  // find the first ast declaration node which name is 'aspect-ratio'
+import { findAll, EnumToken, transform } from "@tbela99/css-parser";
+import type { AstNode } from "@tbela99/css-parser";
+
+ * const css = `
+
+button {
+  aspect-ratio: 1;
+  width: if(media(any-pointer: fine): 30px; else: 44px);
+}
+    `;
+
+ // find declaration which contain a '30px'
+  const nodeMatcher = (node: AstNode) =>
+      return node.typ == EnumToken.DeclarationNodeType && (node as AstDeclaration).nam == 'aspect-ratio';
+
+     const result  = await transform(css);
+     const nodes = findAll(result.ast, nodeMatcher);
+
+     console.log({nodes});
+ 
+    ```
+ *
+ * @param ast
+ * @param matcher
+ * @returns
+ */
+function findAll(ast, matcher) {
+    const result = [];
+    for (const { node } of walk(ast)) {
+        if (matcher(node)) {
+            result.push(node);
+        }
+    }
+    return result;
+}
+/**
+ * search the ast tree and return the last match
+ *
+ * ```ts
+ *  // find the first ast declaration node which name is 'aspect-ratio'
+import { findLast, EnumToken, transform } from "@tbela99/css-parser";
+import type { AstNode } from "@tbela99/css-parser";
+
+ * const css = `
+
+button {
+  aspect-ratio: 1;
+  width: if(media(any-pointer: fine): 30px; else: 44px);
+}
+    `;
+
+ // find declaration which contain a '30px'
+  const nodeMatcher = (node: AstNode) =>
+      return node.typ == EnumToken.DeclarationNodeType && (node as AstDeclaration).nam == 'aspect-ratio';
+
+     const result  = await transform(css);
+     const node = findLast(result.ast, nodeMatcher);
+
+     console.log({node});
+ 
+    ```
+ *
+ * @param ast
+ * @param matcher
+ * @returns
+ */
+function findLast(ast, matcher) {
+    for (const { node } of walk(ast, null, true)) {
+        if (matcher(node)) {
+            return node;
+        }
+    }
+    return null;
+}
+
+export { find, findAll, findByValue, findLast };

package/dist/lib/ast/math/expression.d.ts

@@ -0,0 +1,18 @@
+import type { BinaryExpressionToken, FunctionToken, Token } from "../../../@types/index.d.ts";
+/**
+ * evaluate an array of tokens
+ * @param tokens
+ */
+export declare function evaluate(tokens: Token[]): Token[];
+export declare function evaluateFunc(token: FunctionToken): Token[] | null;
+/**
+ * convert BinaryExpression into an array
+ * @param token
+ */
+export declare function inlineExpression(token: Token): Token[];
+/**
+ *
+ * generate a binary expression tree
+ * @param tokens
+ */
+export declare function buildExpression(tokens: Token[]): BinaryExpressionToken;