@tbela99/css-parser 0.3.0 → 0.4.1

package/dist/lib/parser/parse.js

@@ -5,7 +5,7 @@ import { walkValues, walk } from '../ast/walk.js';
 import { expand } from '../ast/expand.js';
 import { parseDeclaration } from './utils/declaration.js';
 import { renderToken } from '../renderer/render.js';
-import { COLORS_NAMES } from '../renderer/utils/color.js';
+import { COLORS_NAMES } from '../renderer/color/utils/constants.js';
 import { tokenize } from './tokenize.js';
 
 const urlTokenMatcher = /^(["']?)[a-zA-Z0-9_/.-][a-zA-Z0-9_/:.#?-]+(\1)$/;
@@ -50,13 +50,19 @@ async function doParse(iterator, options = {}) {
         const errors = [];
         const src = options.src;
         const stack = [];
+        const stats = {
+            bytesIn: 0,
+            importedBytesIn: 0,
+            parse: `0ms`,
+            minify: `0ms`,
+            total: `0ms`
+        };
         let ast = {
             typ: EnumToken.StyleSheetNodeType,
             chi: []
         };
         let tokens = [];
         let map = new Map;
-        let bytesIn = 0;
         let context = ast;
         if (options.sourcemap) {
             ast.loc = {
@@ -68,307 +74,21 @@ async function doParse(iterator, options = {}) {
                 src: ''
             };
         }
-        async function parseNode(results) {
-            let tokens = results.map(mapToken);
-            let i;
-            let loc;
-            for (i = 0; i < tokens.length; i++) {
-                if (tokens[i].typ == EnumToken.CommentTokenType || tokens[i].typ == EnumToken.CDOCOMMTokenType) {
-                    const position = map.get(tokens[i]);
-                    if (tokens[i].typ == EnumToken.CDOCOMMTokenType && context.typ != EnumToken.StyleSheetNodeType) {
-                        errors.push({
-                            action: 'drop',
-                            message: `CDOCOMM not allowed here ${JSON.stringify(tokens[i], null, 1)}`,
-                            location: { src, ...position }
-                        });
-                        continue;
-                    }
-                    loc = {
-                        sta: position,
-                        src
-                    };
-                    // @ts-ignore
-                    context.chi.push(tokens[i]);
-                    if (options.sourcemap) {
-                        tokens[i].loc = loc;
-                    }
-                }
-                else if (tokens[i].typ != EnumToken.WhitespaceTokenType) {
-                    break;
-                }
-            }
-            tokens = tokens.slice(i);
-            if (tokens.length == 0) {
-                return null;
-            }
-            let delim = tokens.at(-1);
-            if (delim.typ == EnumToken.SemiColonTokenType || delim.typ == EnumToken.BlockStartTokenType || delim.typ == EnumToken.BlockEndTokenType) {
-                tokens.pop();
-            }
-            else {
-                delim = { typ: EnumToken.SemiColonTokenType };
-            }
-            // @ts-ignore
-            while ([EnumToken.WhitespaceTokenType, EnumToken.BadStringTokenType, EnumToken.BadCommentTokenType].includes(tokens.at(-1)?.typ)) {
-                tokens.pop();
-            }
-            if (tokens.length == 0) {
-                return null;
-            }
-            if (tokens[0]?.typ == EnumToken.AtRuleTokenType) {
-                const atRule = tokens.shift();
-                const position = map.get(atRule);
-                if (atRule.val == 'charset') {
-                    if (position.ind > 0) {
-                        errors.push({
-                            action: 'drop',
-                            message: 'doParse: invalid @charset',
-                            location: { src, ...position }
-                        });
-                        return null;
-                    }
-                    if (options.removeCharset) {
-                        return null;
-                    }
-                }
-                // @ts-ignore
-                while ([EnumToken.WhitespaceTokenType].includes(tokens[0]?.typ)) {
-                    tokens.shift();
-                }
-                if (atRule.val == 'import') {
-                    // only @charset and @layer are accepted before @import
-                    if (context.chi.length > 0) {
-                        let i = context.chi.length;
-                        while (i--) {
-                            const type = context.chi[i].typ;
-                            if (type == EnumToken.CommentNodeType) {
-                                continue;
-                            }
-                            if (type != EnumToken.AtRuleNodeType) {
-                                errors.push({ action: 'drop', message: 'invalid @import', location: { src, ...position } });
-                                return null;
-                            }
-                            const name = context.chi[i].nam;
-                            if (name != 'charset' && name != 'import' && name != 'layer') {
-                                errors.push({ action: 'drop', message: 'invalid @import', location: { src, ...position } });
-                                return null;
-                            }
-                            break;
-                        }
-                    }
-                    // @ts-ignore
-                    if (tokens[0]?.typ != EnumToken.StringTokenType && tokens[0]?.typ != EnumToken.UrlFunctionTokenType) {
-                        errors.push({
-                            action: 'drop',
-                            message: 'doParse: invalid @import',
-                            location: { src, ...position }
-                        });
-                        return null;
-                    }
-                    // @ts-ignore
-                    if (tokens[0].typ == EnumToken.UrlFunctionTokenType && tokens[1]?.typ != EnumToken.UrlTokenTokenType && tokens[1]?.typ != EnumToken.StringTokenType) {
-                        errors.push({
-                            action: 'drop',
-                            message: 'doParse: invalid @import',
-                            location: { src, ...position }
-                        });
-                        return null;
-                    }
-                }
-                if (atRule.val == 'import') {
-                    // @ts-ignore
-                    if (tokens[0].typ == EnumToken.UrlFunctionTokenType && tokens[1].typ == EnumToken.UrlTokenTokenType) {
-                        tokens.shift();
-                        // @ts-ignore
-                        tokens[0].typ = EnumToken.StringTokenType;
-                        // @ts-ignore
-                        tokens[0].val = `"${tokens[0].val}"`;
-                    }
-                    // @ts-ignore
-                    if (tokens[0].typ == EnumToken.StringTokenType) {
-                        if (options.resolveImport) {
-                            const url = tokens[0].val.slice(1, -1);
-                            try {
-                                // @ts-ignore
-                                const root = await options.load(url, options.src).then((src) => {
-                                    return doParse(src, Object.assign({}, options, {
-                                        minify: false,
-                                        // @ts-ignore
-                                        src: options.resolve(url, options.src).absolute
-                                    }));
-                                });
-                                bytesIn += root.stats.bytesIn;
-                                if (root.ast.chi.length > 0) {
-                                    // @todo - filter charset, layer and scope
-                                    context.chi.push(...root.ast.chi);
-                                }
-                                if (root.errors.length > 0) {
-                                    errors.push(...root.errors);
-                                }
-                                return null;
-                            }
-                            catch (error) {
-                                // @ts-ignore
-                                errors.push({ action: 'ignore', message: 'doParse: ' + error.message, error });
-                            }
-                        }
-                    }
-                }
-                // https://www.w3.org/TR/css-nesting-1/#conditionals
-                // allowed nesting at-rules
-                // there must be a top level rule in the stack
-                const raw = parseTokens(tokens, { minify: options.minify }).reduce((acc, curr) => {
-                    acc.push(renderToken(curr, { removeComments: true }));
-                    return acc;
-                }, []);
-                const node = {
-                    typ: EnumToken.AtRuleNodeType,
-                    nam: renderToken(atRule, { removeComments: true }),
-                    val: raw.join('')
-                };
-                Object.defineProperty(node, 'raw', { enumerable: false, configurable: true, writable: true, value: raw });
-                if (delim.typ == EnumToken.BlockStartTokenType) {
-                    node.chi = [];
-                }
-                loc = {
-                    sta: position,
-                    src
-                };
-                if (options.sourcemap) {
-                    node.loc = loc;
-                }
-                // @ts-ignore
-                context.chi.push(node);
-                return delim.typ == EnumToken.BlockStartTokenType ? node : null;
-            }
-            else {
-                // rule
-                if (delim.typ == EnumToken.BlockStartTokenType) {
-                    const position = map.get(tokens[0]);
-                    const uniq = new Map;
-                    parseTokens(tokens, { minify: true }).reduce((acc, curr, index, array) => {
-                        if (curr.typ == EnumToken.WhitespaceTokenType) {
-                            if (trimWhiteSpace.includes(array[index - 1]?.typ) ||
-                                trimWhiteSpace.includes(array[index + 1]?.typ) ||
-                                combinators.includes(array[index - 1]?.val) ||
-                                combinators.includes(array[index + 1]?.val)) {
-                                return acc;
-                            }
-                        }
-                        let t = renderToken(curr, { minify: false });
-                        if (t == ',') {
-                            acc.push([]);
-                        }
-                        else {
-                            acc[acc.length - 1].push(t);
-                        }
-                        return acc;
-                    }, [[]]).reduce((acc, curr) => {
-                        acc.set(curr.join(''), curr);
-                        return acc;
-                    }, uniq);
-                    const node = {
-                        typ: EnumToken.RuleNodeType,
-                        // @ts-ignore
-                        sel: [...uniq.keys()].join(','),
-                        chi: []
-                    };
-                    let raw = [...uniq.values()];
-                    Object.defineProperty(node, 'raw', {
-                        enumerable: false,
-                        configurable: true,
-                        writable: true,
-                        value: raw
-                    });
-                    loc = {
-                        sta: position,
-                        src
-                    };
-                    if (options.sourcemap) {
-                        node.loc = loc;
-                    }
-                    // @ts-ignore
-                    context.chi.push(node);
-                    return node;
-                }
-                else {
-                    // declaration
-                    // @ts-ignore
-                    let name = null;
-                    // @ts-ignore
-                    let value = null;
-                    for (let i = 0; i < tokens.length; i++) {
-                        if (tokens[i].typ == EnumToken.CommentTokenType) {
-                            continue;
-                        }
-                        if (tokens[i].typ == EnumToken.ColonTokenType) {
-                            name = tokens.slice(0, i);
-                            value = parseTokens(tokens.slice(i + 1), {
-                                parseColor: options.parseColor,
-                                src: options.src,
-                                resolveUrls: options.resolveUrls,
-                                resolve: options.resolve,
-                                cwd: options.cwd
-                            });
-                        }
-                    }
-                    if (name == null) {
-                        name = tokens;
-                    }
-                    const position = map.get(name[0]);
-                    if (name.length > 0) {
-                        for (let i = 1; i < name.length; i++) {
-                            if (name[i].typ != EnumToken.WhitespaceTokenType && name[i].typ != EnumToken.CommentTokenType) {
-                                errors.push({
-                                    action: 'drop',
-                                    message: 'doParse: invalid declaration',
-                                    location: { src, ...position }
-                                });
-                                return null;
-                            }
-                        }
-                    }
-                    if (value == null || value.length == 0) {
-                        errors.push({
-                            action: 'drop',
-                            message: 'doParse: invalid declaration',
-                            location: { src, ...position }
-                        });
-                        return null;
-                    }
-                    const node = {
-                        typ: EnumToken.DeclarationNodeType,
-                        // @ts-ignore
-                        nam: renderToken(name.shift(), { removeComments: true }),
-                        // @ts-ignore
-                        val: value
-                    };
-                    const result = parseDeclaration(node, errors, src, position);
-                    if (result != null) {
-                        // @ts-ignore
-                        context.chi.push(node);
-                    }
-                    return null;
-                }
-            }
-        }
-        function mapToken(token) {
-            const node = getTokenType(token.token, token.hint);
-            map.set(node, token.position);
-            return node;
-        }
         const iter = tokenize(iterator);
         let item;
         while (item = iter.next().value) {
-            bytesIn = item.bytesIn;
+            stats.bytesIn = item.bytesIn;
+            //
             // doParse error
             if (item.hint != null && BadTokensTypes.includes(item.hint)) {
                 // bad token
                 continue;
             }
-            tokens.push(item);
+            if (item.hint != EnumToken.EOFTokenType) {
+                tokens.push(item);
+            }
             if (item.token == ';' || item.token == '{') {
-                let node = await parseNode(tokens);
+                let node = await parseNode(tokens, context, stats, options, errors, src, map);
                 if (node != null) {
                     stack.push(node);
                     // @ts-ignore
@@ -395,7 +115,7 @@ async function doParse(iterator, options = {}) {
                 map = new Map;
             }
             else if (item.token == '}') {
-                await parseNode(tokens);
+                await parseNode(tokens, context, stats, options, errors, src, map);
                 const previousNode = stack.pop();
                 // @ts-ignore
                 context = stack[stack.length - 1] || ast;
@@ -408,12 +128,12 @@ async function doParse(iterator, options = {}) {
             }
         }
         if (tokens.length > 0) {
-            await parseNode(tokens);
+            await parseNode(tokens, context, stats, options, errors, src, map);
         }
         while (stack.length > 0 && context != ast) {
             const previousNode = stack.pop();
             // @ts-ignore
-            context = stack[stack.length - 1] || ast;
+            context = stack[stack.length - 1] ?? ast;
             // @ts-ignore
             if (options.removeEmpty && previousNode != null && previousNode.chi.length == 0 && context.chi[context.chi.length - 1] == previousNode) {
                 context.chi.pop();
@@ -431,7 +151,7 @@ async function doParse(iterator, options = {}) {
                     // @ts-ignore
                     (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 results = callable(result.node);
+                    const results = await callable(result.node);
                     if (results == null || (Array.isArray(results) && results.length == 0)) {
                         continue;
                     }
@@ -439,7 +159,7 @@ async function doParse(iterator, options = {}) {
                     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 results = options.visitor.Rule(result.node);
+                    const results = await options.visitor.Rule(result.node);
                     if (results == null || (Array.isArray(results) && results.length == 0)) {
                         continue;
                     }
@@ -451,7 +171,7 @@ async function doParse(iterator, options = {}) {
                     // @ts-ignore
                     (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 results = callable(result.node);
+                    const results = await callable(result.node);
                     if (results == null || (Array.isArray(results) && results.length == 0)) {
                         continue;
                     }
@@ -469,11 +189,12 @@ async function doParse(iterator, options = {}) {
         if (options.signal != null) {
             options.signal.removeEventListener('abort', reject);
         }
+        stats.bytesIn += stats.importedBytesIn;
         resolve({
             ast,
             errors,
             stats: {
-                bytesIn,
+                ...stats,
                 parse: `${(endParseTime - startTime).toFixed(2)}ms`,
                 minify: `${(endTime - endParseTime).toFixed(2)}ms`,
                 total: `${(endTime - startTime).toFixed(2)}ms`
@@ -481,6 +202,295 @@ async function doParse(iterator, options = {}) {
         });
     });
 }
+async function parseNode(results, context, stats, options, errors, src, map) {
+    let tokens = results.map((t) => mapToken(t, map));
+    let i;
+    let loc;
+    for (i = 0; i < tokens.length; i++) {
+        if (tokens[i].typ == EnumToken.CommentTokenType || tokens[i].typ == EnumToken.CDOCOMMTokenType) {
+            const position = map.get(tokens[i]);
+            if (tokens[i].typ == EnumToken.CDOCOMMTokenType && context.typ != EnumToken.StyleSheetNodeType) {
+                errors.push({
+                    action: 'drop',
+                    message: `CDOCOMM not allowed here ${JSON.stringify(tokens[i], null, 1)}`,
+                    location: { src, ...position }
+                });
+                continue;
+            }
+            loc = {
+                sta: position,
+                src
+            };
+            // @ts-ignore
+            context.chi.push(tokens[i]);
+            if (options.sourcemap) {
+                tokens[i].loc = loc;
+            }
+        }
+        else if (tokens[i].typ != EnumToken.WhitespaceTokenType) {
+            break;
+        }
+    }
+    tokens = tokens.slice(i);
+    if (tokens.length == 0) {
+        return null;
+    }
+    let delim = tokens.at(-1);
+    if (delim.typ == EnumToken.SemiColonTokenType || delim.typ == EnumToken.BlockStartTokenType || delim.typ == EnumToken.BlockEndTokenType) {
+        tokens.pop();
+    }
+    else {
+        delim = { typ: EnumToken.SemiColonTokenType };
+    }
+    // @ts-ignore
+    while ([EnumToken.WhitespaceTokenType, EnumToken.BadStringTokenType, EnumToken.BadCommentTokenType].includes(tokens.at(-1)?.typ)) {
+        tokens.pop();
+    }
+    if (tokens.length == 0) {
+        return null;
+    }
+    if (tokens[0]?.typ == EnumToken.AtRuleTokenType) {
+        const atRule = tokens.shift();
+        const position = map.get(atRule);
+        if (atRule.val == 'charset') {
+            if (position.ind > 0) {
+                errors.push({
+                    action: 'drop',
+                    message: 'doParse: invalid @charset',
+                    location: { src, ...position }
+                });
+                return null;
+            }
+            if (options.removeCharset) {
+                return null;
+            }
+        }
+        // @ts-ignore
+        while ([EnumToken.WhitespaceTokenType].includes(tokens[0]?.typ)) {
+            tokens.shift();
+        }
+        if (atRule.val == 'import') {
+            // only @charset and @layer are accepted before @import
+            if (context.chi.length > 0) {
+                let i = context.chi.length;
+                while (i--) {
+                    const type = context.chi[i].typ;
+                    if (type == EnumToken.CommentNodeType) {
+                        continue;
+                    }
+                    if (type != EnumToken.AtRuleNodeType) {
+                        errors.push({ action: 'drop', message: 'invalid @import', location: { src, ...position } });
+                        return null;
+                    }
+                    const name = context.chi[i].nam;
+                    if (name != 'charset' && name != 'import' && name != 'layer') {
+                        errors.push({ action: 'drop', message: 'invalid @import', location: { src, ...position } });
+                        return null;
+                    }
+                    break;
+                }
+            }
+            // @ts-ignore
+            if (tokens[0]?.typ != EnumToken.StringTokenType && tokens[0]?.typ != EnumToken.UrlFunctionTokenType) {
+                errors.push({
+                    action: 'drop',
+                    message: 'doParse: invalid @import',
+                    location: { src, ...position }
+                });
+                return null;
+            }
+            // @ts-ignore
+            if (tokens[0].typ == EnumToken.UrlFunctionTokenType && tokens[1]?.typ != EnumToken.UrlTokenTokenType && tokens[1]?.typ != EnumToken.StringTokenType) {
+                errors.push({
+                    action: 'drop',
+                    message: 'doParse: invalid @import',
+                    location: { src, ...position }
+                });
+                return null;
+            }
+        }
+        if (atRule.val == 'import') {
+            // @ts-ignore
+            if (tokens[0].typ == EnumToken.UrlFunctionTokenType && tokens[1].typ == EnumToken.UrlTokenTokenType) {
+                tokens.shift();
+                // @ts-ignore
+                tokens[0].typ = EnumToken.StringTokenType;
+                // @ts-ignore
+                tokens[0].val = `"${tokens[0].val}"`;
+            }
+            // @ts-ignore
+            if (tokens[0].typ == EnumToken.StringTokenType) {
+                if (options.resolveImport) {
+                    const url = tokens[0].val.slice(1, -1);
+                    try {
+                        // @ts-ignore
+                        const root = await options.load(url, options.src).then((src) => {
+                            return doParse(src, Object.assign({}, options, {
+                                minify: false,
+                                // @ts-ignore
+                                src: options.resolve(url, options.src).absolute
+                            }));
+                        });
+                        stats.importedBytesIn += root.stats.bytesIn;
+                        if (root.ast.chi.length > 0) {
+                            // @todo - filter charset, layer and scope
+                            context.chi.push(...root.ast.chi);
+                        }
+                        if (root.errors.length > 0) {
+                            errors.push(...root.errors);
+                        }
+                        return null;
+                    }
+                    catch (error) {
+                        // @ts-ignore
+                        errors.push({ action: 'ignore', message: 'doParse: ' + error.message, error });
+                    }
+                }
+            }
+        }
+        // https://www.w3.org/TR/css-nesting-1/#conditionals
+        // allowed nesting at-rules
+        // there must be a top level rule in the stack
+        const raw = parseTokens(tokens, { minify: options.minify }).reduce((acc, curr) => {
+            acc.push(renderToken(curr, { removeComments: true }));
+            return acc;
+        }, []);
+        const node = {
+            typ: EnumToken.AtRuleNodeType,
+            nam: renderToken(atRule, { removeComments: true }),
+            val: raw.join('')
+        };
+        Object.defineProperty(node, 'raw', { enumerable: false, configurable: true, writable: true, value: raw });
+        if (delim.typ == EnumToken.BlockStartTokenType) {
+            node.chi = [];
+        }
+        loc = {
+            sta: position,
+            src
+        };
+        if (options.sourcemap) {
+            node.loc = loc;
+        }
+        // @ts-ignore
+        context.chi.push(node);
+        return delim.typ == EnumToken.BlockStartTokenType ? node : null;
+    }
+    else {
+        // rule
+        if (delim.typ == EnumToken.BlockStartTokenType) {
+            const position = map.get(tokens[0]);
+            const uniq = new Map;
+            parseTokens(tokens, { minify: true }).reduce((acc, curr, index, array) => {
+                if (curr.typ == EnumToken.WhitespaceTokenType) {
+                    if (trimWhiteSpace.includes(array[index - 1]?.typ) ||
+                        trimWhiteSpace.includes(array[index + 1]?.typ) ||
+                        combinators.includes(array[index - 1]?.val) ||
+                        combinators.includes(array[index + 1]?.val)) {
+                        return acc;
+                    }
+                }
+                let t = renderToken(curr, { minify: false });
+                if (t == ',') {
+                    acc.push([]);
+                }
+                else {
+                    acc[acc.length - 1].push(t);
+                }
+                return acc;
+            }, [[]]).reduce((acc, curr) => {
+                acc.set(curr.join(''), curr);
+                return acc;
+            }, uniq);
+            const node = {
+                typ: EnumToken.RuleNodeType,
+                // @ts-ignore
+                sel: [...uniq.keys()].join(','),
+                chi: []
+            };
+            let raw = [...uniq.values()];
+            Object.defineProperty(node, 'raw', {
+                enumerable: false,
+                configurable: true,
+                writable: true,
+                value: raw
+            });
+            loc = {
+                sta: position,
+                src
+            };
+            if (options.sourcemap) {
+                node.loc = loc;
+            }
+            // @ts-ignore
+            context.chi.push(node);
+            return node;
+        }
+        else {
+            // declaration
+            // @ts-ignore
+            let name = null;
+            // @ts-ignore
+            let value = null;
+            for (let i = 0; i < tokens.length; i++) {
+                if (tokens[i].typ == EnumToken.CommentTokenType) {
+                    continue;
+                }
+                if (tokens[i].typ == EnumToken.ColonTokenType) {
+                    name = tokens.slice(0, i);
+                    value = parseTokens(tokens.slice(i + 1), {
+                        parseColor: options.parseColor,
+                        src: options.src,
+                        resolveUrls: options.resolveUrls,
+                        resolve: options.resolve,
+                        cwd: options.cwd
+                    });
+                }
+            }
+            if (name == null) {
+                name = tokens;
+            }
+            const position = map.get(name[0]);
+            if (name.length > 0) {
+                for (let i = 1; i < name.length; i++) {
+                    if (name[i].typ != EnumToken.WhitespaceTokenType && name[i].typ != EnumToken.CommentTokenType) {
+                        errors.push({
+                            action: 'drop',
+                            message: 'doParse: invalid declaration',
+                            location: { src, ...position }
+                        });
+                        return null;
+                    }
+                }
+            }
+            if (value == null || value.length == 0) {
+                errors.push({
+                    action: 'drop',
+                    message: 'doParse: invalid declaration',
+                    location: { src, ...position }
+                });
+                return null;
+            }
+            const node = {
+                typ: EnumToken.DeclarationNodeType,
+                // @ts-ignore
+                nam: renderToken(name.shift(), { removeComments: true }),
+                // @ts-ignore
+                val: value
+            };
+            const result = parseDeclaration(node, errors, src, position);
+            if (result != null) {
+                // @ts-ignore
+                context.chi.push(node);
+            }
+            return null;
+        }
+    }
+}
+function mapToken(token, map) {
+    const node = getTokenType(token.token, token.hint);
+    map.set(node, token.position);
+    return node;
+}
 function parseString(src, options = { location: false }) {
     return parseTokens([...tokenize(src)].map(t => {
         const token = getTokenType(t.token, t.hint);
@@ -893,9 +903,21 @@ function parseTokens(tokens, options = {}) {
                 t.typ = EnumToken.ColorTokenType;
                 // @ts-ignore
                 t.kin = t.val;
-                if (t.chi[0].typ == EnumToken.IdenTokenType && t.chi[0].val == 'from') {
+                if (t.chi[0].typ == EnumToken.IdenTokenType) {
+                    if (t.chi[0].val == 'from') {
+                        // @ts-ignore
+                        t.cal = 'rel';
+                    }
                     // @ts-ignore
-                    t.cal = 'rel';
+                    else if (t.val == 'color-mix' && t.chi[0].val == 'in') {
+                        // @ts-ignore
+                        t.cal = 'mix';
+                    }
+                    else if (t.val == 'color') {
+                        // @ts-ignore
+                        t.cal = 'col';
+                        // t.chi = t.chi.filter((t: Token) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.PercentageTokenType].includes(t.typ));
+                    }
                 }
                 t.chi = t.chi.filter((t) => ![EnumToken.WhitespaceTokenType, EnumToken.CommaTokenType, EnumToken.CommentTokenType].includes(t.typ));
                 continue;