@tbela99/css-parser 1.3.1 → 1.3.3

package/dist/lib/parser/parse.js

@@ -1,7 +1,7 @@
 import { isIdentStart, isIdent, isIdentColor, mathFuncs, isColor, parseColor, isPseudo, pseudoElements, isAtKeyword, isFunction, isNumber, isPercentage, isFlex, isDimension, parseDimension, isHexColor, isHash, mediaTypes } from '../syntax/syntax.js';
 import { EnumToken, ColorType, ValidationLevel, SyntaxValidationResult } from '../ast/types.js';
 import { minify, definedPropertySettings, combinators } from '../ast/minify.js';
-import { walkValues, walk, WalkerOptionEnum } from '../ast/walk.js';
+import { walkValues, WalkerValueEvent, walk, WalkerOptionEnum } from '../ast/walk.js';
 import { expand } from '../ast/expand.js';
 import './utils/config.js';
 import { parseDeclarationNode } from './utils/declaration.js';
@@ -39,6 +39,37 @@ const enumTokenHints = new Set([
 function reject(reason) {
     throw new Error(reason ?? 'Parsing aborted');
 }
+function normalizeVisitorKeyName(keyName) {
+    return keyName.replace(/-([a-z])/g, (all, one) => one.toUpperCase());
+}
+function replaceToken(parent, value, replacement) {
+    // @ts-ignore
+    if ('parent' in value && value.parent != replacement.parent) {
+        Object.defineProperty(replacement, 'parent', {
+            ...definedPropertySettings,
+            value: value.parent
+        });
+    }
+    if (parent.typ == EnumToken.BinaryExpressionTokenType) {
+        if (parent.l == value) {
+            parent.l = replacement;
+        }
+        else {
+            parent.r = replacement;
+        }
+    }
+    else {
+        // @ts-ignore
+        const target = 'val' in parent && Array.isArray(parent.val) ? parent.val : parent.chi;
+        // @ts-ignore
+        const index = target.indexOf(value);
+        if (index == -1) {
+            return;
+        }
+        // @ts-ignore
+        target.splice(index, 1, ...(Array.isArray(replacement) ? replacement : [replacement]));
+    }
+}
 /**
  * parse css string
  * @param iter
@@ -121,7 +152,7 @@ async function doParse(iter, options = {}) {
     const rawTokens = [];
     const imports = [];
     // @ts-ignore ignore error
-    const isAsync = typeof iter[Symbol.asyncIterator] === 'function';
+    let isAsync = typeof iter[Symbol.asyncIterator] === 'function';
     while (item = isAsync ? (await iter.next()).value : iter.next().value) {
         stats.bytesIn = item.bytesIn;
         rawTokens.push(item);
@@ -240,21 +271,18 @@ async function doParse(iter, options = {}) {
             const token = node.tokens[0];
             const url = token.typ == EnumToken.StringTokenType ? token.val.slice(1, -1) : token.val;
             try {
-                const root = await options.getStream(url, options.src).then(async (stream) => {
-                    return doParse(tokenizeStream(stream), Object.assign({}, options, {
-                        minify: false,
-                        setParent: false,
-                        src: options.resolve(url, options.src).absolute
-                    })); // )
-                });
-                // const root: ParseResult = await options.load!(url, <string>options.src).then((src: string) => {
-                //
-                //     return doParse(src, Object.assign({}, options, {
-                //         minify: false,
-                //         setParent: false,
-                //         src: options.resolve!(url, options.src as string).absolute
-                //     }))
-                // });
+                const result = options.load(url, options.src);
+                const stream = result instanceof Promise || Object.getPrototypeOf(result).constructor.name == 'AsyncFunction' ? await result : result;
+                const root = await doParse(stream instanceof ReadableStream ? tokenizeStream(stream) : tokenize({
+                    stream,
+                    buffer: '',
+                    position: { ind: 0, lin: 1, col: 1 },
+                    currentPosition: { ind: -1, lin: 1, col: 0 }
+                }), Object.assign({}, options, {
+                    minify: false,
+                    setParent: false,
+                    src: options.resolve(url, options.src).absolute
+                }));
                 stats.importedBytesIn += root.stats.bytesIn;
                 stats.imports.push(root.stats);
                 node.parent.chi.splice(node.parent.chi.indexOf(node), 1, ...root.ast.chi);
@@ -282,39 +310,230 @@ async function doParse(iter, options = {}) {
     if (options.expandNestingRules) {
         ast = expand(ast);
     }
+    const valuesHandlers = new Map;
+    const preValuesHandlers = new Map;
+    const postValuesHandlers = new Map;
+    const preVisitorsHandlersMap = new Map;
+    const visitorsHandlersMap = new Map;
+    const postVisitorsHandlersMap = new Map;
+    const allValuesHandlers = [];
     if (options.visitor != null) {
-        for (const result of walk(ast)) {
-            if (result.node.typ == EnumToken.DeclarationNodeType &&
-                (typeof options.visitor.Declaration == 'function' || options.visitor.Declaration?.[result.node.nam] != null)) {
-                const callable = typeof options.visitor.Declaration == 'function' ? options.visitor.Declaration : options.visitor.Declaration[result.node.nam];
-                const isAsync = Object.getPrototypeOf(callable).constructor.name == 'AsyncFunction';
-                const results = isAsync ? await callable(result.node) : callable(result.node);
-                if (results == null || (Array.isArray(results) && results.length == 0)) {
-                    continue;
+        for (const [key, value] of Object.entries(options.visitor)) {
+            if (key in EnumToken) {
+                if (typeof value == 'function') {
+                    valuesHandlers.set(EnumToken[key], value);
+                }
+                else if (typeof value == 'object' && 'type' in value && 'handler' in value && value.type in WalkerValueEvent) {
+                    if (WalkerValueEvent[value.type] == WalkerValueEvent.Enter) {
+                        preValuesHandlers.set(EnumToken[key], value.handler);
+                    }
+                    else if (WalkerValueEvent[value.type] == WalkerValueEvent.Leave) {
+                        postValuesHandlers.set(EnumToken[key], value.handler);
+                    }
+                }
+                else {
+                    console.warn(`doParse: visitor.${key} is not a valid key name`);
                 }
-                // @ts-ignore
-                result.parent.chi.splice(result.parent.chi.indexOf(result.node), 1, ...(Array.isArray(results) ? results : [results]));
             }
-            else if (options.visitor.Rule != null && result.node.typ == EnumToken.RuleNodeType) {
-                const isAsync = Object.getPrototypeOf(options.visitor.Rule).constructor.name == 'AsyncFunction';
-                const results = isAsync ? await options.visitor.Rule(result.node) : options.visitor.Rule(result.node);
-                if (results == null || (Array.isArray(results) && results.length == 0)) {
-                    continue;
+            else if (['Declaration', 'Rule', 'AtRule', 'KeyframesRule', 'KeyframesAtRule'].includes(key)) {
+                if (typeof value == 'function') {
+                    visitorsHandlersMap.set(key, value);
+                }
+                else if (typeof value == 'object') {
+                    if ('type' in value && 'handler' in value && value.type in WalkerValueEvent) {
+                        if (WalkerValueEvent[value.type] == WalkerValueEvent.Enter) {
+                            preVisitorsHandlersMap.set(key, value.handler);
+                        }
+                        else if (WalkerValueEvent[value.type] == WalkerValueEvent.Leave) {
+                            postVisitorsHandlersMap.set(key, value.handler);
+                        }
+                    }
+                    else {
+                        visitorsHandlersMap.set(key, value);
+                    }
+                }
+                else {
+                    console.warn(`doParse: visitor.${key} is not a valid key name`);
+                }
+            }
+            else {
+                console.warn(`doParse: visitor.${key} is not a valid key name`);
+            }
+        }
+        if (preValuesHandlers.size > 0) {
+            allValuesHandlers.push(preValuesHandlers);
+        }
+        if (valuesHandlers.size > 0) {
+            allValuesHandlers.push(valuesHandlers);
+        }
+        if (postValuesHandlers.size > 0) {
+            allValuesHandlers.push(postValuesHandlers);
+        }
+    }
+    for (const result of walk(ast)) {
+        // if (result.parent != null && !isNodeAllowedInContext(result.node, result.parent as AstNode)) {
+        //
+        //     errors.push({
+        //         action: 'drop',
+        //         message: `${EnumToken[result.parent.typ]}: child ${EnumToken[result.node.typ]}${result.node.typ == EnumToken.DeclarationNodeType ? ` '${(result.node as AstDeclaration).nam}'` :  result.node.typ == EnumToken.AtRuleNodeType || result.node.typ == EnumToken.KeyframesAtRuleNodeType ? ` '@${(result.node as AstAtRule).nam}'` : ''} not allowed in context${result.parent.typ == EnumToken.AtRuleNodeType ? ` '@${(result.parent as AstAtRule).nam}'` : result.parent.typ == EnumToken.StyleSheetNodeType ? ` 'stylesheet'` : ''}`,
+        //         // @ts-ignore
+        //         location: result.node.loc ?? map.get(result.node ) ?? null
+        //     });
+        //
+        //     // @ts-ignore
+        //     removeNode(result.node, result.parent as AstNode);
+        //     continue;
+        // }
+        if (allValuesHandlers.length > 0 || preVisitorsHandlersMap.size > 0 || visitorsHandlersMap.size > 0 || postVisitorsHandlersMap.size > 0) {
+            if ((result.node.typ == EnumToken.DeclarationNodeType &&
+                (preVisitorsHandlersMap.has('Declaration') || visitorsHandlersMap.has('Declaration') || postVisitorsHandlersMap.has('Declaration'))) ||
+                (result.node.typ == EnumToken.AtRuleNodeType && (preVisitorsHandlersMap.has('AtRule') || visitorsHandlersMap.has('AtRule') || postVisitorsHandlersMap.has('AtRule'))) ||
+                (result.node.typ == EnumToken.KeyframesAtRuleNodeType && (preVisitorsHandlersMap.has('KeyframesAtRule') || visitorsHandlersMap.has('KeyframesAtRule') || postVisitorsHandlersMap.has('KeyframesAtRule')))) {
+                const handlers = [];
+                const key = result.node.typ == EnumToken.DeclarationNodeType ? 'Declaration' : result.node.typ == EnumToken.AtRuleNodeType ? 'AtRule' : 'KeyframesAtRule';
+                if (preVisitorsHandlersMap.has(key)) {
+                    // @ts-ignore
+                    handlers.push(preVisitorsHandlersMap.get(key));
+                }
+                if (visitorsHandlersMap.has(key)) {
+                    // @ts-ignore
+                    handlers.push(visitorsHandlersMap.get(key));
+                }
+                if (postVisitorsHandlersMap.has(key)) {
+                    // @ts-ignore
+                    handlers.push(postVisitorsHandlersMap.get(key));
+                }
+                let callable;
+                let node = result.node;
+                for (const handler of handlers) {
+                    callable = typeof handler == 'function' ? handler : handler[normalizeVisitorKeyName(node.typ == EnumToken.DeclarationNodeType || node.typ == EnumToken.AtRuleNodeType ? node.nam : node.val)];
+                    if (callable == null) {
+                        continue;
+                    }
+                    let replacement = callable(node, result.parent);
+                    if (replacement == null) {
+                        continue;
+                    }
+                    isAsync = replacement instanceof Promise || Object.getPrototypeOf(replacement).constructor.name == 'AsyncFunction';
+                    if (replacement) {
+                        replacement = await replacement;
+                    }
+                    if (replacement == null || replacement == node) {
+                        continue;
+                    }
+                    // @ts-ignore
+                    node = replacement;
+                    //
+                    if (Array.isArray(node)) {
+                        break;
+                    }
+                }
+                if (node != result.node) {
+                    // @ts-ignore
+                    replaceToken(result.parent, result.node, node);
+                }
+            }
+            else if ((result.node.typ == EnumToken.RuleNodeType && (preVisitorsHandlersMap.has('Rule') || visitorsHandlersMap.has('Rule') || postVisitorsHandlersMap.has('Rule'))) ||
+                (result.node.typ == EnumToken.KeyFramesRuleNodeType && (preVisitorsHandlersMap.has('KeyframesRule') || visitorsHandlersMap.has('KeyframesRule') || postVisitorsHandlersMap.has('KeyframesRule')))) {
+                const handlers = [];
+                const key = result.node.typ == EnumToken.RuleNodeType ? 'Rule' : 'KeyframesRule';
+                if (preVisitorsHandlersMap.has(key)) {
+                    // @ts-ignore
+                    handlers.push(preVisitorsHandlersMap.get(key));
+                }
+                if (visitorsHandlersMap.has(key)) {
+                    // @ts-ignore
+                    handlers.push(visitorsHandlersMap.get(key));
+                }
+                if (postVisitorsHandlersMap.has(key)) {
+                    // @ts-ignore
+                    handlers.push(postVisitorsHandlersMap.get(key));
+                }
+                let node = result.node;
+                for (const callable of handlers) {
+                    // @ts-ignore
+                    let replacement = callable(node, result.parent);
+                    if (replacement == null) {
+                        continue;
+                    }
+                    isAsync = replacement instanceof Promise || Object.getPrototypeOf(replacement).constructor.name == 'AsyncFunction';
+                    if (replacement) {
+                        replacement = await replacement;
+                    }
+                    if (replacement == null || replacement == node) {
+                        continue;
+                    }
+                    // @ts-ignore
+                    node = replacement;
+                    //
+                    if (Array.isArray(node)) {
+                        break;
+                    }
                 }
                 // @ts-ignore
-                result.parent.chi.splice(result.parent.chi.indexOf(result.node), 1, ...(Array.isArray(results) ? results : [results]));
-            }
-            else if (options.visitor.AtRule != null &&
-                result.node.typ == EnumToken.AtRuleNodeType &&
-                (typeof options.visitor.AtRule == 'function' || options.visitor.AtRule?.[result.node.nam] != null)) {
-                const callable = typeof options.visitor.AtRule == 'function' ? options.visitor.AtRule : options.visitor.AtRule[result.node.nam];
-                const isAsync = Object.getPrototypeOf(callable).constructor.name == 'AsyncFunction';
-                const results = isAsync ? await callable(result.node) : callable(result.node);
-                if (results == null || (Array.isArray(results) && results.length == 0)) {
+                if (node != result.node) {
+                    // @ts-ignore
+                    replaceToken(result.parent, result.node, node);
+                }
+            }
+            else if (allValuesHandlers.length > 0) {
+                let callable;
+                let node = null;
+                node = result.node;
+                for (const valueHandler of allValuesHandlers) {
+                    if (valueHandler.has(node.typ)) {
+                        callable = valueHandler.get(node.typ);
+                        let replacement = callable(node, result.parent);
+                        if (replacement == null) {
+                            continue;
+                        }
+                        isAsync = replacement instanceof Promise || Object.getPrototypeOf(replacement).constructor.name == 'AsyncFunction';
+                        if (isAsync) {
+                            replacement = await replacement;
+                        }
+                        if (replacement != null && replacement != node) {
+                            node = replacement;
+                        }
+                    }
+                }
+                if (node != result.node) {
+                    // @ts-ignore
+                    replaceToken(result.parent, value, node);
+                }
+                const tokens = 'tokens' in result.node ? result.node.tokens : [];
+                if ('val' in result.node && Array.isArray(result.node.val)) {
+                    tokens.push(...result.node.val);
+                }
+                if (tokens.length == 0) {
                     continue;
                 }
-                // @ts-ignore
-                result.parent.chi.splice(result.parent.chi.indexOf(result.node), 1, ...(Array.isArray(results) ? results : [results]));
+                for (const { value, parent, root } of walkValues(tokens, result.node)) {
+                    node = value;
+                    for (const valueHandler of allValuesHandlers) {
+                        if (valueHandler.has(node.typ)) {
+                            callable = valueHandler.get(node.typ);
+                            let result = callable(node, parent, root);
+                            if (result == null) {
+                                continue;
+                            }
+                            isAsync = result instanceof Promise || Object.getPrototypeOf(result).constructor.name == 'AsyncFunction';
+                            if (isAsync) {
+                                result = await result;
+                            }
+                            if (result != null && result != node) {
+                                node = result;
+                            }
+                            //
+                            if (Array.isArray(node)) {
+                                break;
+                            }
+                        }
+                    }
+                    if (node != value) {
+                        // @ts-ignore
+                        replaceToken(parent, value, node);
+                    }
+                }
             }
         }
     }
@@ -374,7 +593,6 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
                 continue;
             }
             loc = location;
-            // @ts-ignore
             context.chi.push(tokens[i]);
             if (options.sourcemap) {
                 tokens[i].loc = loc;
@@ -408,9 +626,7 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
         rawTokens.shift();
         if (atRule.val == 'import') {
             // only @charset and @layer are accepted before @import
-            // @ts-ignore
             if (context.chi.length > 0) {
-                // @ts-ignore
                 let i = context.chi.length;
                 while (i--) {
                     // @ts-ignore
@@ -419,11 +635,8 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
                         continue;
                     }
                     if (type != EnumToken.AtRuleNodeType) {
-                        // @ts-ignore
                         if (!(type == EnumToken.InvalidAtRuleTokenType &&
-                            // @ts-ignore
                             ['charset', 'layer', 'import'].includes(context.chi[i].nam))) {
-                            // @ts-ignore
                             errors.push({
                                 action: 'drop',
                                 message: 'invalid @import',
@@ -434,7 +647,6 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
                             return null;
                         }
                     }
-                    // @ts-ignore
                     const name = context.chi[i].nam;
                     if (name != 'charset' && name != 'import' && name != 'layer') {
                         errors.push({ action: 'drop', message: 'invalid @import', location });
@@ -532,7 +744,7 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
         const nam = renderToken(atRule, { removeComments: true });
         // @ts-ignore
         const node = {
-            typ: /^(-[a-z]+-)?keyframes$/.test(nam) ? EnumToken.KeyframeAtRuleNodeType : EnumToken.AtRuleNodeType,
+            typ: /^(-[a-z]+-)?keyframes$/.test(nam) ? EnumToken.KeyframesAtRuleNodeType : EnumToken.AtRuleNodeType,
             nam,
             val: raw.join('')
         };
@@ -566,7 +778,7 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
             error: '',
             node,
             syntax: '@' + node.nam
-        } : isValid ? (node.typ == EnumToken.KeyframeAtRuleNodeType ? validateAtRuleKeyframes(node) : validateAtRule(node, options, context)) : {
+        } : isValid ? (node.typ == EnumToken.KeyframesAtRuleNodeType ? validateAtRuleKeyframes(node) : validateAtRule(node, options, context)) : {
             valid: SyntaxValidationResult.Drop,
             node,
             syntax: '@' + node.nam,
@@ -602,7 +814,7 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
             const location = map.get(tokens[0]);
             const uniq = new Map;
             parseTokens(tokens, { minify: true });
-            const ruleType = context.typ == EnumToken.KeyframeAtRuleNodeType ? EnumToken.KeyFrameRuleNodeType : EnumToken.RuleNodeType;
+            const ruleType = context.typ == EnumToken.KeyframesAtRuleNodeType ? EnumToken.KeyFramesRuleNodeType : EnumToken.RuleNodeType;
             if (ruleType == EnumToken.RuleNodeType) {
                 parseSelector(tokens);
             }
@@ -612,6 +824,34 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
                         if (curr.typ == EnumToken.CommentTokenType) {
                             return acc;
                         }
+                        if (options.minify) {
+                            if (curr.typ == EnumToken.PseudoClassFuncTokenType && curr.val == ':nth-child') {
+                                let i = 0;
+                                for (; i < curr.chi.length; i++) {
+                                    if (curr.chi[i].typ == EnumToken.IdenTokenType && curr.chi[i].val == 'even') {
+                                        Object.assign(curr.chi[i], {
+                                            typ: EnumToken.Dimension,
+                                            val: 2,
+                                            unit: 'n'
+                                        });
+                                    }
+                                    else if (curr.chi[i].typ == EnumToken.Dimension &&
+                                        curr.chi[i].val == 2 &&
+                                        curr.chi[i].unit == 'n' &&
+                                        curr.chi[i + 1]?.typ == EnumToken.WhitespaceTokenType &&
+                                        curr.chi[i + 2]?.typ == EnumToken.LiteralTokenType &&
+                                        curr.chi[i + 2].val == '+' &&
+                                        curr.chi[i + 3]?.typ == EnumToken.WhitespaceTokenType &&
+                                        curr.chi[i + 4]?.typ == EnumToken.NumberTokenType &&
+                                        curr.chi[i + 4].val == 1) {
+                                        curr.chi.splice(i, 5, Object.assign(curr.chi[i], {
+                                            typ: EnumToken.IdenTokenType,
+                                            val: 'odd'
+                                        }));
+                                    }
+                                }
+                            }
+                        }
                         if (curr.typ == EnumToken.WhitespaceTokenType) {
                             if (trimWhiteSpace.includes(array[index - 1]?.typ) ||
                                 trimWhiteSpace.includes(array[index + 1]?.typ) ||
@@ -620,7 +860,7 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
                                 return acc;
                             }
                         }
-                        if (ruleType == EnumToken.KeyFrameRuleNodeType) {
+                        if (ruleType == EnumToken.KeyFramesRuleNodeType && options.minify) {
                             if (curr.typ == EnumToken.IdenTokenType && curr.val == 'from') {
                                 Object.assign(curr, { typ: EnumToken.PercentageTokenType, val: '0' });
                             }
@@ -669,7 +909,7 @@ function parseNode(results, context, options, errors, src, map, rawTokens) {
             const valid = options.validation == ValidationLevel.None ? {
                 valid: SyntaxValidationResult.Valid,
                 error: null
-            } : ruleType == EnumToken.KeyFrameRuleNodeType ? validateKeyframeSelector(tokens) : validateSelector(tokens, options, context);
+            } : ruleType == EnumToken.KeyFramesRuleNodeType ? validateKeyframeSelector(tokens) : validateSelector(tokens, options, context);
             if (valid.valid != SyntaxValidationResult.Valid) {
                 // @ts-ignore
                 node.typ = EnumToken.InvalidRuleTokenType;
@@ -1045,7 +1285,7 @@ async function parseDeclarations(declaration) {
         position: { ind: 0, lin: 1, col: 1 },
         currentPosition: { ind: -1, lin: 1, col: 0 }
     }), { setParent: false, minify: false, validation: false }).then(result => {
-        return result.ast.chi[0].chi.filter(t => t.typ == EnumToken.DeclarationNodeType);
+        return result.ast.chi[0].chi.filter(t => t.typ == EnumToken.DeclarationNodeType || t.typ == EnumToken.CommentNodeType);
     });
 }
 /**
@@ -1662,4 +1902,4 @@ function parseTokens(tokens, options = {}) {
     return tokens;
 }
 
-export { doParse, getTokenType, parseAtRulePrelude, parseDeclarations, parseSelector, parseString, parseTokens, urlTokenMatcher };
+export { doParse, getTokenType, parseAtRulePrelude, parseDeclarations, parseSelector, parseString, parseTokens, replaceToken, urlTokenMatcher };

package/dist/lib/parser/tokenize.js

@@ -579,7 +579,7 @@ async function* tokenizeStream(input) {
     const reader = input.getReader();
     while (true) {
         const { done, value } = await reader.read();
-        parseInfo.stream += decoder.decode(value, { stream: true });
+        parseInfo.stream += ArrayBuffer.isView(value) ? decoder.decode(value, { stream: true }) : value;
         yield* tokenize(parseInfo, done);
         if (done) {
             break;

package/dist/lib/renderer/render.js

@@ -111,7 +111,7 @@ function doRender(data, options = {}) {
 function updateSourceMap(node, options, cache, sourcemap, position, str) {
     if ([
         EnumToken.RuleNodeType, EnumToken.AtRuleNodeType,
-        EnumToken.KeyFrameRuleNodeType, EnumToken.KeyframeAtRuleNodeType
+        EnumToken.KeyFramesRuleNodeType, EnumToken.KeyframesAtRuleNodeType
     ].includes(node.typ)) {
         let src = node.loc?.src ?? '';
         let output = options.output ?? '';
@@ -185,9 +185,9 @@ function renderAstNode(data, options, sourcemap, position, errors, reducer, cach
             }, '');
         case EnumToken.AtRuleNodeType:
         case EnumToken.RuleNodeType:
-        case EnumToken.KeyFrameRuleNodeType:
-        case EnumToken.KeyframeAtRuleNodeType:
-            if ([EnumToken.AtRuleNodeType, EnumToken.KeyframeAtRuleNodeType].includes(data.typ) && !('chi' in data)) {
+        case EnumToken.KeyFramesRuleNodeType:
+        case EnumToken.KeyframesAtRuleNodeType:
+            if ([EnumToken.AtRuleNodeType, EnumToken.KeyframesAtRuleNodeType].includes(data.typ) && !('chi' in data)) {
                 return `${indent}@${data.nam}${data.val === '' ? '' : options.indent || ' '}${data.val};`;
             }
             // @ts-ignore
@@ -228,7 +228,7 @@ function renderAstNode(data, options, sourcemap, position, errors, reducer, cach
             if (children.endsWith(';')) {
                 children = children.slice(0, -1);
             }
-            if ([EnumToken.AtRuleNodeType, EnumToken.KeyframeAtRuleNodeType].includes(data.typ)) {
+            if ([EnumToken.AtRuleNodeType, EnumToken.KeyframesAtRuleNodeType].includes(data.typ)) {
                 return `@${data.nam}${data.val === '' ? '' : options.indent || ' '}${data.val}${options.indent}{${options.newLine}` + (children === '' ? '' : indentSub + children + options.newLine) + indent + `}`;
             }
             return data.sel + `${options.indent}{${options.newLine}` + (children === '' ? '' : indentSub + children + options.newLine) + indent + `}`;

package/dist/lib/syntax/color/cmyk.js

@@ -4,7 +4,7 @@ import '../../ast/walk.js';
 import '../../parser/parse.js';
 import '../../parser/tokenize.js';
 import '../../parser/utils/config.js';
-import { color2srgbvalues } from './color.js';
+import { color2srgbvalues, toPrecisionValue } from './color.js';
 import { hsl2srgbvalues } from './rgb.js';
 import './utils/constants.js';
 import { lch2srgbvalues, lab2srgbvalues, oklch2srgbvalues, oklab2srgbvalues, hwb2srgbvalues, rgb2srgbvalues } from './srgb.js';
@@ -92,11 +92,14 @@ function cmyktoken(values) {
         chi: values.reduce((acc, curr, index) => index < 4 ? [...acc, {
                 typ: EnumToken.PercentageTokenType,
                 // @ts-ignore
-                val: curr * 100
+                val: toPrecisionValue(curr) * 100
             }] : [...acc, {
                 typ: EnumToken.LiteralTokenType,
                 val: '/'
-            }, { typ: EnumToken.PercentageTokenType, val: curr * 100 }], []),
+            }, {
+                typ: EnumToken.PercentageTokenType,
+                val: toPrecisionValue(curr) * 100
+            }], []),
         kin: ColorType.DEVICE_CMYK
     };
 }

package/dist/lib/syntax/color/color-mix.js

@@ -129,11 +129,10 @@ function colorMix(colorSpace, hueInterpolationMethod, color1, percentage1, color
     // @ts-ignore
     const calculate = () => [colorSpace].concat(values1.map((v1, i) => {
         return {
-            // @ts-ignore
-            typ: EnumToken.NumberTokenType, val: String((mul1 * v1 * p1 + mul2 * values2[i] * p2) / mul)
+            typ: EnumToken.NumberTokenType, val: (mul1 * v1 * p1 + mul2 * values2[i] * p2) / mul
         };
     }).concat(mul == 1 ? [] : [{
-            typ: EnumToken.NumberTokenType, val: String(mul)
+            typ: EnumToken.NumberTokenType, val: mul
         }]));
     switch (colorSpace.val) {
         case 'srgb':

package/dist/lib/syntax/color/color.js

@@ -25,6 +25,7 @@ import { reduceHexValue, rgb2HexToken, color2HexToken, lch2HexToken, lab2HexToke
 import { parseRelativeColor } from './relativecolor.js';
 import { color2cmykToken, lch2cmykToken, lab2cmykToken, oklch2cmykToken, oklab2cmyk, hwb2cmykToken, hsl2cmykToken, rgb2cmykToken } from './cmyk.js';
 import { a98rgb2srgbvalues, srgb2a98values } from './a98rgb.js';
+import { epsilon } from '../../ast/transform/utils.js';
 import '../../renderer/sourcemap/lib/encode.js';
 
 /**
@@ -32,6 +33,8 @@ import '../../renderer/sourcemap/lib/encode.js';
  * @param token
  * @param to
  *
+ * @private
+ *
  * <code>
  *
  *     const token = {typ: EnumToken.ColorTokenType, kin: ColorType.HEX, val: '#F00'}
@@ -73,7 +76,8 @@ function convertColor(token, to) {
             if (components != null) {
                 token = {
                     ...token,
-                    chi: [...(token.val == 'color' ? [chi[offset]] : []), ...Object.values(components)]
+                    chi: [...(token.val == 'color' ? [chi[offset]] : []), ...Object.values(components)],
+                    kin: ColorType[token.val.toUpperCase().replaceAll('-', '_')]
                 };
                 delete token.cal;
             }
@@ -89,6 +93,11 @@ function convertColor(token, to) {
     if (token.kin == ColorType.COLOR) {
         const colorSpace = token.chi.find(t => ![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType].includes(t.typ));
         if (colorSpace.val == ColorType[to].toLowerCase().replaceAll('_', '-')) {
+            for (const chi of token.chi) {
+                if (chi.typ == EnumToken.NumberTokenType && typeof chi.val == 'number') {
+                    chi.val = toPrecisionValue(getNumber(chi));
+                }
+            }
             return token;
         }
     }
@@ -512,9 +521,9 @@ function color2srgbvalues(token) {
 function values2colortoken(values, to) {
     values = srgb2srgbcolorspace(values, to);
     const chi = [
-        { typ: EnumToken.NumberTokenType, val: values[0] },
-        { typ: EnumToken.NumberTokenType, val: values[1] },
-        { typ: EnumToken.NumberTokenType, val: values[2] },
+        { typ: EnumToken.NumberTokenType, val: toPrecisionValue(values[0]) },
+        { typ: EnumToken.NumberTokenType, val: toPrecisionValue(values[1]) },
+        { typ: EnumToken.NumberTokenType, val: toPrecisionValue(values[2]) },
     ];
     if (values.length == 4) {
         chi.push({ typ: EnumToken.LiteralTokenType, val: "/" }, {
@@ -539,8 +548,17 @@ function getNumber(token) {
     if (token.typ == EnumToken.IdenTokenType && token.val == 'none') {
         return 0;
     }
+    let val;
     // @ts-ignore
-    return token.typ == EnumToken.PercentageTokenType ? token.val / 100 : token.val;
+    if (typeof token.val != 'number' && token.val?.typ == EnumToken.FractionTokenType) {
+        // @ts-ignore
+        val = token.val.l.val / token.val.r.val;
+    }
+    else {
+        val = token.val;
+    }
+    // @ts-ignore
+    return token.typ == EnumToken.PercentageTokenType ? val / 100 : val;
 }
 /**
  * convert angle to turn
@@ -571,6 +589,10 @@ function getAngle(token) {
     // @ts-ignore
     return token.val / 360;
 }
+function toPrecisionValue(value) {
+    value = +value.toFixed(colorPrecision);
+    return Math.abs(value) < epsilon ? 0 : value;
+}
 function toPrecisionAngle(angle) {
     angle = +angle.toPrecision(colorPrecision);
     if (Math.abs(angle) >= 360) {
@@ -585,4 +607,4 @@ function toPrecisionAngle(angle) {
     return angle;
 }
 
-export { cmyk2colorToken, color2colorToken, color2srgbvalues, convertColor, getAngle, getNumber, hex2colorToken, hsl2colorToken, hwb2colorToken, lab2colorToken, lch2colorToken, minmax, oklab2colorToken, oklch2colorToken, rgb2colorToken, toPrecisionAngle };
+export { cmyk2colorToken, color2colorToken, color2srgbvalues, convertColor, getAngle, getNumber, hex2colorToken, hsl2colorToken, hwb2colorToken, lab2colorToken, lch2colorToken, minmax, oklab2colorToken, oklch2colorToken, rgb2colorToken, toPrecisionAngle, toPrecisionValue };

package/dist/lib/syntax/color/hex.js

@@ -33,6 +33,9 @@ function reduceHexValue(value) {
             value[7] == value[8]) {
             value = `#${value[1]}${value[3]}${value[5]}${value[7] == 'f' ? '' : value[7]}`;
         }
+        if (value.endsWith('ff')) {
+            value = value.slice(0, -2);
+        }
     }
     return named_color != null && named_color.length <= value.length ? named_color : value;
 }