@tbela99/css-parser 0.7.0 → 0.8.0

package/dist/index.d.ts

@@ -38,57 +38,66 @@ declare enum EnumToken {
     WhitespaceTokenType = 36,
     IncludeMatchTokenType = 37,
     DashMatchTokenType = 38,
-    LtTokenType = 39,
-    LteTokenType = 40,
-    GtTokenType = 41,
-    GteTokenType = 42,
-    PseudoClassTokenType = 43,
-    PseudoClassFuncTokenType = 44,
-    DelimTokenType = 45,
-    UrlTokenTokenType = 46,
-    EOFTokenType = 47,
-    ImportantTokenType = 48,
-    ColorTokenType = 49,
-    AttrTokenType = 50,
-    BadCommentTokenType = 51,
-    BadCdoTokenType = 52,
-    BadUrlTokenType = 53,
-    BadStringTokenType = 54,
-    BinaryExpressionTokenType = 55,
-    UnaryExpressionTokenType = 56,
-    FlexTokenType = 57,
-    ListToken = 58,
-    Add = 59,
-    Mul = 60,
-    Div = 61,
-    Sub = 62,
-    ColumnCombinatorTokenType = 63,
-    ContainMatchTokenType = 64,
-    StartMatchTokenType = 65,
-    EndMatchTokenType = 66,
-    MatchExpressionTokenType = 67,
-    NameSpaceAttributeTokenType = 68,
-    FractionTokenType = 69,
-    IdenListTokenType = 70,
-    GridTemplateFuncTokenType = 71,
-    KeyFrameRuleNodeType = 72,
-    ClassSelectorTokenType = 73,
-    UniversalSelectorTokenType = 74,
-    ChildCombinatorTokenType = 75,
-    DescendantCombinatorTokenType = 76,// whitespace
-    NextSiblingCombinatorTokenType = 77,
-    SubsequentSiblingCombinatorTokenType = 78,
-    NestingSelectorTokenType = 79,
-    InvalidRuleTokenType = 80,
-    InvalidClassSelectorTokenType = 81,
-    InvalidAttrTokenType = 82,
+    EqualMatchTokenType = 39,
+    LtTokenType = 40,
+    LteTokenType = 41,
+    GtTokenType = 42,
+    GteTokenType = 43,
+    PseudoClassTokenType = 44,
+    PseudoClassFuncTokenType = 45,
+    DelimTokenType = 46,
+    UrlTokenTokenType = 47,
+    EOFTokenType = 48,
+    ImportantTokenType = 49,
+    ColorTokenType = 50,
+    AttrTokenType = 51,
+    BadCommentTokenType = 52,
+    BadCdoTokenType = 53,
+    BadUrlTokenType = 54,
+    BadStringTokenType = 55,
+    BinaryExpressionTokenType = 56,
+    UnaryExpressionTokenType = 57,
+    FlexTokenType = 58,
+    ListToken = 59,
+    Add = 60,
+    Mul = 61,
+    Div = 62,
+    Sub = 63,
+    ColumnCombinatorTokenType = 64,
+    ContainMatchTokenType = 65,
+    StartMatchTokenType = 66,
+    EndMatchTokenType = 67,
+    MatchExpressionTokenType = 68,
+    NameSpaceAttributeTokenType = 69,
+    FractionTokenType = 70,
+    IdenListTokenType = 71,
+    GridTemplateFuncTokenType = 72,
+    KeyFrameRuleNodeType = 73,
+    ClassSelectorTokenType = 74,
+    UniversalSelectorTokenType = 75,
+    ChildCombinatorTokenType = 76,// >
+    DescendantCombinatorTokenType = 77,// whitespace
+    NextSiblingCombinatorTokenType = 78,// +
+    SubsequentSiblingCombinatorTokenType = 79,// ~
+    NestingSelectorTokenType = 80,// &
+    InvalidRuleTokenType = 81,
+    InvalidClassSelectorTokenType = 82,
+    InvalidAttrTokenType = 83,
+    InvalidAtRuleTokenType = 84,
+    MediaQueryConditionTokenType = 85,
+    MediaFeatureTokenType = 86,
+    MediaFeatureOnlyTokenType = 87,
+    MediaFeatureNotTokenType = 88,
+    MediaFeatureAndTokenType = 89,
+    MediaFeatureOrTokenType = 90,
+    PseudoPageTokenType = 91,
     Time = 25,
     Iden = 7,
-    EOF = 47,
+    EOF = 48,
     Hash = 28,
-    Flex = 57,
+    Flex = 58,
     Angle = 24,
-    Color = 49,
+    Color = 50,
     Comma = 9,
     String = 20,
     Length = 23,
@@ -101,9 +110,9 @@ declare enum EnumToken {
     Frequency = 26,
     Resolution = 27,
     Whitespace = 36,
-    IdenList = 70,
+    IdenList = 71,
     DashedIden = 8,
-    GridTemplateFunc = 71,
+    GridTemplateFunc = 72,
     ImageFunc = 19,
     CommentNodeType = 0,
     CDOCOMMNodeType = 1,
@@ -115,8 +124,16 @@ declare function minify(ast: AstNode, options?: ParserOptions | MinifyOptions, r
     [key: string]: any;
 }): AstNode;
 
+declare enum WalkerValueEvent {
+    Enter = 0,
+    Leave = 1
+}
 declare function walk(node: AstNode, filter?: WalkerFilter): Generator<WalkResult>;
-declare function walkValues(values: Token[], root?: AstNode | null, filter?: WalkerValueFilter): Generator<WalkAttributesResult>;
+declare function walkValues(values: Token[], root?: AstNode | Token | null, filter?: WalkerValueFilter | {
+    event: WalkerValueEvent;
+    fn?: WalkerValueFilter;
+    type?: EnumToken | EnumToken[] | ((token: Token) => boolean);
+}, reverse?: boolean): Generator<WalkAttributesResult>;
 
 declare function expand(ast: AstNode): AstNode;
 
@@ -201,6 +218,7 @@ export declare interface AtRuleToken extends BaseToken {
 
     typ: EnumToken.AtRuleTokenType,
     val: string;
+    pre: string;
 }
 
 export declare interface PercentageToken extends BaseToken {
@@ -401,6 +419,12 @@ export declare interface DashMatchToken extends BaseToken {
     // val: '|=';
 }
 
+export declare interface EqualMatchToken extends BaseToken {
+
+    typ: EnumToken.EqualMatchTokenType;
+    // val: '|=';
+}
+
 export declare interface StartMatchToken extends BaseToken {
 
     typ: EnumToken.StartMatchTokenType;
@@ -450,6 +474,12 @@ export declare interface PseudoClassToken extends BaseToken {
     val: string;
 }
 
+export declare interface PseudoPageToken extends BaseToken {
+
+    typ: EnumToken.PseudoPageTokenType;
+    val: string;
+}
+
 export declare interface PseudoClassFunctionToken extends BaseToken {
 
     typ: EnumToken.PseudoClassFuncTokenType;
@@ -531,6 +561,48 @@ export declare interface ChildCombinatorToken extends BaseToken {
     typ: EnumToken.ChildCombinatorTokenType
 }
 
+export declare interface MediaFeatureToken extends BaseToken {
+
+    typ: EnumToken.MediaFeatureTokenType,
+    val: string;
+}
+
+export declare interface MediaFeatureOnlyToken extends BaseToken {
+
+    typ: EnumToken.MediaFeatureOnlyTokenType,
+    val: Token;
+}
+
+export declare interface MediaFeatureNotToken extends BaseToken {
+
+    typ: EnumToken.MediaFeatureNotTokenType,
+    val: Token;
+}
+
+export declare interface MediaFeatureNotToken extends BaseToken {
+
+    typ: EnumToken.MediaFeatureNotTokenType,
+    val: Token;
+}
+
+export declare interface MediaFeatureAndToken extends BaseToken {
+
+    typ: EnumToken.MediaFeatureAndTokenType;
+}
+
+export declare interface MediaFeatureOrToken extends BaseToken {
+
+    typ: EnumToken.MediaFeatureOrTokenType;
+}
+
+export declare interface MediaQueryConditionToken extends BaseToken {
+
+    typ: EnumToken.MediaQueryConditionTokenType,
+    l: Token,
+    op: ColonToken | GreaterThanToken | LessThanToken | GreaterThanOrEqualToken | LessThanOrEqualToken,
+    r: Token[]
+}
+
 export declare interface DescendantCombinatorToken extends BaseToken {
 
     typ: EnumToken.DescendantCombinatorTokenType
@@ -591,7 +663,7 @@ export declare interface BinaryExpressionToken extends BaseToken {
 export declare interface MatchExpressionToken extends BaseToken {
 
     typ: EnumToken.MatchExpressionTokenType
-    op: EnumToken.DashMatchTokenType | EnumToken.StartMatchTokenType | EnumToken.ContainMatchTokenType | EnumToken.EndMatchTokenType | EnumToken.IncludeMatchTokenType;
+    op: EqualMatchToken | DashMatchToken | StartMatchToken | ContainMatchToken | EndMatchToken | IncludeMatchToken;
     l: Token;
     r: Token;
     attr?: 'i' | 's';
@@ -642,6 +714,14 @@ export declare type Token =
     | ColumnCombinatorToken
     | NestingSelectorToken
     |
+    MediaQueryConditionToken
+    | MediaFeatureToken
+    | MediaFeatureNotToken
+    | MediaFeatureOnlyToken
+    | MediaFeatureAndToken
+    | MediaFeatureOrToken
+    | AstDeclaration
+    |
     NumberToken
     | AtRuleToken
     | PercentageToken
@@ -686,6 +766,7 @@ export declare type Token =
     | NameSpaceAttributeToken
     |
     DashMatchToken
+    | EqualMatchToken
     | LessThanToken
     | LessThanOrEqualToken
     | GreaterThanToken
@@ -693,6 +774,7 @@ export declare type Token =
     |
     ListToken
     | PseudoClassToken
+    | PseudoPageToken
     | PseudoClassFunctionToken
     | DelimToken
     | BinaryExpressionToken
@@ -729,6 +811,8 @@ export declare interface BaseToken {
 
     typ: EnumToken;
     loc?: Location;
+    tokens?: Token[];
+    parent?: AstRuleList;
 }
 
 export declare interface AstComment extends BaseToken {
@@ -754,6 +838,31 @@ export declare interface AstRule extends BaseToken {
     raw?: RawSelectorTokens;
 }
 
+export declare interface AstInvalidRule extends BaseToken {
+
+    typ: EnumToken.InvalidRuleTokenType;
+    sel: string;
+    chi: Array<AstDeclaration | AstComment | AstRuleList>;
+}
+
+export declare interface AstInvalidAtRule extends BaseToken {
+
+    typ: EnumToken.InvalidAtRuleTokenType;
+    val: string;
+    chi?: Array<AstNode>;
+}
+
+
+
+export declare interface AstKeyFrameRule extends BaseToken {
+
+    typ: EnumToken.KeyFrameRuleNodeType;
+    sel: string;
+    chi: Array<AstDeclaration | AstComment>;
+    optimized?: OptimizedSelector;
+    raw?: RawSelectorTokens;
+}
+
 export declare type RawSelectorTokens = string[][];
 
 export declare interface OptimizedSelector {
@@ -765,7 +874,7 @@ export declare interface OptimizedSelector {
 
 export declare interface AstAtRule extends BaseToken {
 
-    typ: AtRuleNodeType,
+    typ: EnumToken.AtRuleNodeType,
     nam: string;
     val: string;
     chi?: Array<AstDeclaration | AstComment> | Array<AstRule | AstComment>
@@ -773,12 +882,12 @@ export declare interface AstAtRule extends BaseToken {
 
 export declare interface AstRuleList extends BaseToken {
 
-    typ: StyleSheetNodeType | RuleNodeType | AtRuleNodeType,
-    chi: Array<BaseToken | AstComment>
+    typ:  EnumToken.StyleSheetNodeType |  EnumToken.RuleNodeType |  EnumToken.AtRuleNodeType,
+    chi: Array<BaseToken | AstComment>;
 }
 
 export declare interface AstRuleStyleSheet extends AstRuleList {
-    typ: StyleSheetNodeType,
+    typ:  EnumToken.StyleSheetNodeType,
     chi: Array<AstRuleList | AstComment>
 }
 
@@ -788,7 +897,10 @@ export declare type AstNode =
     | AstComment
     | AstAtRule
     | AstRule
-    | AstDeclaration;
+    | AstDeclaration
+    | AstKeyFrameRule
+    | AstInvalidRule
+    | AstInvalidAtRule;
 
 /**
  * Declaration visitor handler
@@ -826,7 +938,13 @@ declare class SourceMap {
     toJSON(): SourceMapObject;
 }
 
-export declare type WalkerOption = 'ignore' | 'stop' | 'children' | 'ignore-children' | null;
+export declare interface PropertyListOptions {
+
+    removeDuplicateDeclarations?: boolean;
+    computeShorthand?: boolean;
+}
+
+export declare type WalkerOption = 'ignore' | 'stop' | 'children' | 'ignore-children' | Token | null;
 /**
  * returned value:
  * - 'ignore': ignore this node and its children
@@ -843,20 +961,21 @@ export declare type WalkerFilter = (node: AstNode) => WalkerOption;
  * - 'children': walk the children and ignore the node itself
  * - 'ignore-children': walk the node and ignore children
  */
-export declare type WalkerValueFilter = (node: Token) => WalkerOption;
+export declare type WalkerValueFilter = (node: AstNode | Token, parent: FunctionToken | ParensToken | BinaryExpressionToken, event?: WalkerValueEvent) => WalkerOption | null;
 
 export declare interface WalkResult {
     node: AstNode;
     parent?: AstRuleList;
-    root?: AstRuleList;
+    root?: AstNode;
 }
 
 export declare interface WalkAttributesResult {
     value: Token;
     previousValue: Token | null;
-    nextValue: AstNode | null;
+    nextValue: Token | null;
     root?: AstNode;
     parent: FunctionToken | ParensToken | BinaryExpressionToken | null;
+    list: Token[] | null;
 }
 
 export declare interface ErrorDescription {
@@ -941,6 +1060,7 @@ export declare interface ResolvedPath {
 export declare interface RenderOptions {
 
     minify?: boolean;
+    removeEmpty?: boolean;
     expandNestingRules?: boolean;
     preserveLicense?: boolean;
     sourcemap?: boolean;
@@ -1013,8 +1133,17 @@ declare function resolve(url: string, currentDirectory: string, cwd?: string): {
 
 declare function load(url: string, currentFile: string): Promise<string>;
 
+/**
+ * render ast node
+ */
 declare function render(data: AstNode, options?: RenderOptions): RenderResult;
+/**
+ * parse css
+ */
 declare function parse(iterator: string, opt?: ParserOptions): Promise<ParseResult>;
+/**
+ * parse and render css
+ */
 declare function transform(css: string, options?: TransformOptions): Promise<TransformResult>;
 
 export { EnumToken, dirname, expand, load, minify, parse, parseString, parseTokens, render, renderToken, resolve, transform, walk, walkValues };

package/dist/lib/ast/expand.js

@@ -34,6 +34,7 @@ function expand(ast) {
             let hasRule = false;
             let j = node.chi.length;
             while (j--) {
+                // @ts-ignore
                 if (node.chi[j].typ == EnumToken.RuleNodeType || node.chi[j].typ == EnumToken.AtRuleNodeType) {
                     hasRule = true;
                     break;
@@ -49,7 +50,7 @@ function expand(ast) {
     }
     return result;
 }
-function expandRule(node) {
+function expandRule(node, parent) {
     const ast = { ...node, chi: node.chi.slice() };
     const result = [];
     if (ast.typ == EnumToken.RuleNodeType) {
@@ -72,7 +73,77 @@ function expandRule(node) {
                     }
                 }
                 else {
-                    rule.sel = replaceCompound(rule.sel, ast.sel);
+                    let childSelectorCompound = [];
+                    let withCompound = [];
+                    let withoutCompound = [];
+                    const rules = splitRule(ast.sel);
+                    const parentSelector = !node.sel.includes('&');
+                    for (const sel of (rule.raw ?? splitRule(rule.sel))) {
+                        const s = sel.join('');
+                        if (s.includes('&') || parentSelector) {
+                            if (s.indexOf('&', 1) == -1) {
+                                if (s.at(0) == '&') {
+                                    if (s.at(1) == ' ') {
+                                        childSelectorCompound.push(s.slice(2));
+                                    }
+                                    else {
+                                        if (s == '&' || parentSelector) {
+                                            withCompound.push(s);
+                                        }
+                                        else {
+                                            withoutCompound.push(s.slice(1));
+                                        }
+                                    }
+                                }
+                                else {
+                                    withoutCompound.push(s);
+                                }
+                            }
+                            else {
+                                withCompound.push(s);
+                            }
+                        }
+                        else {
+                            withoutCompound.push(s);
+                        }
+                    }
+                    const selectors = [];
+                    const selector = rules.length > 1 ? ':is(' + rules.map(a => a.join('')).join(',') + ')' : rules[0].join('');
+                    if (childSelectorCompound.length > 0) {
+                        if (childSelectorCompound.length == 1) {
+                            selectors.push(replaceCompound('& ' + childSelectorCompound[0].trim(), selector));
+                        }
+                        else {
+                            selectors.push(replaceCompound('& :is(' + childSelectorCompound.reduce((acc, curr) => acc + (acc.length > 0 ? ',' : '') + curr.trim(), '') + ')', selector));
+                        }
+                    }
+                    if (withCompound.length > 0) {
+                        if (withCompound.every((t) => t[0] == '&' && t.indexOf('&', 1) == -1)) {
+                            withoutCompound.push(...withCompound.map(t => t.slice(1)));
+                            withCompound.length = 0;
+                        }
+                    }
+                    if (withoutCompound.length > 0) {
+                        if (withoutCompound.length == 1) {
+                            const useIs = rules.length == 1 && selector.match(/^[a-zA-Z.:]/) != null && selector.includes(' ') && withoutCompound.length == 1 && withoutCompound[0].match(/^[a-zA-Z]+$/) != null;
+                            const compound = useIs ? ':is(&)' : '&';
+                            selectors.push(replaceCompound(rules.length == 1 ? (useIs ? withoutCompound[0] + ':is(&)' : (selector.match(/^[.:]/) && withoutCompound[0].match(/^[a-zA-Z]+$/) ? withoutCompound[0] + compound : compound + withoutCompound[0])) : (withoutCompound[0].match(/^[a-zA-Z:]+$/) ? withoutCompound[0].trim() + compound : '&' + (withoutCompound[0].match(/^\S+$/) ? withoutCompound[0].trim() : ':is(' + withoutCompound[0].trim() + ')')), selector));
+                        }
+                        else {
+                            selectors.push(replaceCompound('&:is(' + withoutCompound.reduce((acc, curr) => acc + (acc.length > 0 ? ',' : '') + curr.trim(), '') + ')', selector));
+                        }
+                    }
+                    if (withCompound.length > 0) {
+                        if (withCompound.length == 1) {
+                            selectors.push(replaceCompound(withCompound[0], selector));
+                        }
+                        else {
+                            for (const w of withCompound) {
+                                selectors.push(replaceCompound(w, selector));
+                            }
+                        }
+                    }
+                    rule.sel = selectors.reduce((acc, curr) => curr.length == 0 ? acc : acc + (acc.length > 0 ? ',' : '') + curr, '');
                 }
                 ast.chi.splice(i--, 1);
                 result.push(...expandRule(rule));
@@ -125,9 +196,23 @@ function expandRule(node) {
 }
 function replaceCompound(input, replace) {
     const tokens = parseString(input);
+    let replacement = null;
     for (const t of walkValues(tokens)) {
         if (t.value.typ == EnumToken.LiteralTokenType) {
             if (t.value.val == '&') {
+                if (tokens.length == 2) {
+                    if (replacement == null) {
+                        replacement = parseString(replace);
+                    }
+                    if (tokens[1].typ == EnumToken.IdenTokenType) {
+                        t.value.val = replacement.length == 1 || (!replace.includes(' ') && replace.charAt(0).match(/[:.]/)) ? tokens[1].val + replace : replaceCompoundLiteral(tokens[1].val + '&', replace);
+                        tokens.splice(1, 1);
+                    }
+                    else {
+                        t.value.val = replaceCompoundLiteral(t.value.val, replace);
+                    }
+                    continue;
+                }
                 const rule = splitRule(replace);
                 t.value.val = rule.length > 1 ? ':is(' + replace + ')' : replace;
             }

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

@@ -1,6 +1,8 @@
 import { EnumToken } from '../types.js';
-import { walkValues } from '../walk.js';
+import { walkValues, WalkerValueEvent } from '../walk.js';
 import { evaluate } from '../math/expression.js';
+import { renderToken } from '../../renderer/render.js';
+import { mathFuncs } from '../../syntax/syntax.js';
 
 class ComputeCalcExpressionFeature {
     static get ordering() {
@@ -27,30 +29,92 @@ class ComputeCalcExpressionFeature {
                 continue;
             }
             const set = new Set;
-            for (const { value, parent } of walkValues(node.val)) {
-                if (value != null && value.typ == EnumToken.FunctionTokenType && value.val == 'calc') {
-                    if (!set.has(parent)) {
+            for (const { value, parent } of walkValues(node.val, node, {
+                event: WalkerValueEvent.Enter,
+                fn(node, parent, event) {
+                    if (parent != null &&
+                        parent.typ == EnumToken.DeclarationNodeType &&
+                        parent.val.length == 1 &&
+                        node.typ == EnumToken.FunctionTokenType &&
+                        mathFuncs.includes(node.val) &&
+                        node.chi.length == 1 &&
+                        node.chi[0].typ == EnumToken.IdenTokenType) {
+                        return 'ignore';
+                    }
+                    if ((node.typ == EnumToken.FunctionTokenType && node.val == 'var') || (!mathFuncs.includes(parent.val) && [EnumToken.ColorTokenType, EnumToken.DeclarationNodeType, EnumToken.RuleNodeType, EnumToken.AtRuleNodeType, EnumToken.StyleSheetNodeType].includes(parent?.typ))) {
+                        return null;
+                    }
+                    // @ts-ignore
+                    const slice = (node.typ == EnumToken.FunctionTokenType ? node.chi : (node.typ == EnumToken.DeclarationNodeType ? node.val : node.chi))?.slice();
+                    if (slice != null && node.typ == EnumToken.FunctionTokenType && mathFuncs.includes(node.val)) {
+                        // @ts-ignore
+                        const cp = (node.typ == EnumToken.FunctionTokenType && mathFuncs.includes(node.val) && node.val != 'calc' ? [node] : (node.typ == EnumToken.DeclarationNodeType ? node.val : node.chi)).slice();
+                        const values = evaluate(cp);
+                        const key = 'chi' in node ? 'chi' : 'val';
+                        const str1 = renderToken({ ...node, [key]: slice });
+                        const str2 = renderToken(node); // values.reduce((acc: string, curr: Token): string => acc + renderToken(curr), '');
+                        if (str1.length <= str2.length) {
+                            // @ts-ignore
+                            node[key] = slice;
+                        }
+                        else {
+                            // @ts-ignore
+                            node[key] = values;
+                        }
+                        return 'ignore';
+                    }
+                    return null;
+                }
+            })) {
+                if (value != null && value.typ == EnumToken.FunctionTokenType && mathFuncs.includes(value.val)) {
+                    if (!set.has(value)) {
                         set.add(value);
-                        value.chi = evaluate(value.chi);
-                        if (value.chi.length == 1 && value.chi[0].typ != EnumToken.BinaryExpressionTokenType) {
-                            if (parent != null) {
+                        if (parent != null) {
+                            // @ts-ignore
+                            const cp = value.typ == EnumToken.FunctionTokenType && mathFuncs.includes(value.val) && value.val != 'calc' ? [value] : (value.typ == EnumToken.DeclarationNodeType ? value.val : value.chi);
+                            const values = evaluate(cp);
+                            // @ts-ignore
+                            const children = parent.typ == EnumToken.DeclarationNodeType ? parent.val : parent.chi;
+                            if (values.length == 1 && values[0].typ != EnumToken.BinaryExpressionTokenType) {
                                 if (parent.typ == EnumToken.BinaryExpressionTokenType) {
                                     if (parent.l == value) {
-                                        parent.l = value.chi[0];
+                                        parent.l = values[0];
                                     }
                                     else {
-                                        parent.r = value.chi[0];
+                                        parent.r = values[0];
                                     }
                                 }
                                 else {
-                                    for (let i = 0; i < parent.chi.length; i++) {
-                                        if (parent.chi[i] == value) {
-                                            parent.chi.splice(i, 1, value.chi[0]);
+                                    for (let i = 0; i < children.length; i++) {
+                                        if (children[i] == value) {
+                                            // @ts-ignore
+                                            children.splice(i, 1, !(parent.typ == EnumToken.FunctionTokenType && parent.val == 'calc') && typeof values[0].val != 'string' ? {
+                                                typ: EnumToken.FunctionTokenType,
+                                                val: 'calc',
+                                                chi: values
+                                            } : values[0]);
                                             break;
                                         }
                                     }
                                 }
                             }
+                            else {
+                                for (let i = 0; i < children.length; i++) {
+                                    if (children[i] == value) {
+                                        if (parent.typ == EnumToken.FunctionTokenType && parent.val == 'calc') {
+                                            children.splice(i, 1, ...values);
+                                        }
+                                        else {
+                                            children.splice(i, 1, {
+                                                typ: EnumToken.FunctionTokenType,
+                                                val: 'calc',
+                                                chi: values
+                                            });
+                                        }
+                                        break;
+                                    }
+                                }
+                            }
                         }
                     }
                 }

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

@@ -1,5 +1,6 @@
 import { EnumToken } from '../types.js';
 import { walkValues } from '../walk.js';
+import { renderToken } from '../../renderer/render.js';
 
 function replace(node, variableScope) {
     for (const { value, parent: parentValue } of walkValues(node.val)) {
@@ -108,7 +109,11 @@ class InlineCssVariablesFeature {
                     i = parent.chi?.length ?? 0;
                     while (i--) {
                         if (parent.chi[i].typ == EnumToken.DeclarationNodeType && parent.chi[i].nam == info.node.nam) {
-                            parent.chi.splice(i, 1);
+                            // @ts-ignore
+                            parent.chi.splice(i++, 1, {
+                                typ: EnumToken.CommentTokenType,
+                                val: `/* ${info.node.nam}: ${info.node.val.reduce((acc, curr) => acc + renderToken(curr), '')} */`
+                            });
                         }
                     }
                     if (parent.chi?.length == 0 && 'parent' in parent) {