@tbela99/css-parser 0.9.1 → 1.0.0

package/dist/lib/ast/walk.js

@@ -1,5 +1,12 @@
 import { EnumToken } from './types.js';
 
+var WalkerOptionEnum;
+(function (WalkerOptionEnum) {
+    WalkerOptionEnum[WalkerOptionEnum["Ignore"] = 0] = "Ignore";
+    WalkerOptionEnum[WalkerOptionEnum["Stop"] = 1] = "Stop";
+    WalkerOptionEnum[WalkerOptionEnum["Children"] = 2] = "Children";
+    WalkerOptionEnum[WalkerOptionEnum["IgnoreChildren"] = 3] = "IgnoreChildren";
+})(WalkerOptionEnum || (WalkerOptionEnum = {}));
 var WalkerValueEvent;
 (function (WalkerValueEvent) {
     WalkerValueEvent[WalkerValueEvent["Enter"] = 0] = "Enter";
@@ -18,10 +25,10 @@ function* walk(node, filter) {
         let option = null;
         if (filter != null) {
             option = filter(node);
-            if (option === 'ignore') {
+            if (option === WalkerOptionEnum.Ignore) {
                 continue;
             }
-            if (option === 'stop') {
+            if (option === WalkerOptionEnum.Stop) {
                 break;
             }
         }
@@ -30,7 +37,7 @@ function* walk(node, filter) {
             // @ts-ignore
             yield { node, parent: map.get(node), root };
         }
-        if (option !== 'ignore-children' && 'chi' in node) {
+        if (option !== WalkerOptionEnum.IgnoreChildren && 'chi' in node) {
             parents.unshift(...node.chi);
             for (const child of node.chi.slice()) {
                 map.set(child, node);
@@ -62,19 +69,20 @@ function* walkValues(values, root = null, filter, reverse) {
             event: WalkerValueEvent.Enter
         };
     }
+    const eventType = filter.event ?? WalkerValueEvent.Enter;
     while (stack.length > 0) {
         let value = reverse ? stack.pop() : stack.shift();
         let option = null;
-        if (filter.fn != null && filter.event == WalkerValueEvent.Enter) {
+        if (filter.fn != null && eventType == WalkerValueEvent.Enter) {
             const isValid = filter.type == null || value.typ == filter.type ||
                 (Array.isArray(filter.type) && filter.type.includes(value.typ)) ||
                 (typeof filter.type == 'function' && filter.type(value));
             if (isValid) {
-                option = filter.fn(value, map.get(value) ?? root, WalkerValueEvent.Enter);
-                if (option === 'ignore') {
+                option = filter.fn(value, map.get(value) ?? root);
+                if (option === WalkerOptionEnum.Ignore) {
                     continue;
                 }
-                if (option === 'stop') {
+                if (option === WalkerOptionEnum.Stop) {
                     break;
                 }
                 // @ts-ignore
@@ -83,8 +91,7 @@ function* walkValues(values, root = null, filter, reverse) {
                 }
             }
         }
-        // @ts-ignore
-        if (filter.event == WalkerValueEvent.Enter && option !== 'children') {
+        if (eventType == WalkerValueEvent.Enter && option !== WalkerOptionEnum.Children) {
             yield {
                 value,
                 parent: map.get(value) ?? root,
@@ -94,7 +101,7 @@ function* walkValues(values, root = null, filter, reverse) {
                 root: root ?? null
             };
         }
-        if (option !== 'ignore-children' && 'chi' in value) {
+        if (option !== WalkerOptionEnum.IgnoreChildren && 'chi' in value) {
             const sliced = value.chi.slice();
             for (const child of sliced) {
                 map.set(child, value);
@@ -107,24 +114,23 @@ function* walkValues(values, root = null, filter, reverse) {
             }
         }
         else if (value.typ == EnumToken.BinaryExpressionTokenType) {
-            map.set(value.l, map.get(value) ?? root);
-            map.set(value.r, map.get(value) ?? root);
+            map.set(value.l, value);
+            map.set(value.r, value);
             stack.unshift(value.l, value.r);
         }
-        if (filter.event == WalkerValueEvent.Leave && filter.fn != null) {
+        if (eventType == WalkerValueEvent.Leave && filter.fn != null) {
             const isValid = filter.type == null || value.typ == filter.type ||
                 (Array.isArray(filter.type) && filter.type.includes(value.typ)) ||
                 (typeof filter.type == 'function' && filter.type(value));
             if (isValid) {
-                option = filter.fn(value, map.get(value), WalkerValueEvent.Leave);
+                option = filter.fn(value, map.get(value));
                 // @ts-ignore
                 if (option != null && 'typ' in option) {
                     map.set(option, map.get(value) ?? root);
                 }
             }
         }
-        // @ts-ignore
-        if (filter.event == WalkerValueEvent.Leave && option !== 'children') {
+        if (eventType == WalkerValueEvent.Leave && option !== WalkerOptionEnum.Children) {
             yield {
                 value,
                 parent: map.get(value) ?? root,
@@ -138,4 +144,4 @@ function* walkValues(values, root = null, filter, reverse) {
     }
 }
 
-export { WalkerValueEvent, walk, walkValues };
+export { WalkerOptionEnum, WalkerValueEvent, walk, walkValues };

package/dist/lib/parser/parse.js

@@ -2,7 +2,7 @@ import { webkitPseudoAliasMap, isIdentStart, isIdent, mathFuncs, isColor, isHexC
 import './utils/config.js';
 import { EnumToken, funcLike, ValidationLevel } from '../ast/types.js';
 import { minify, definedPropertySettings, combinators } from '../ast/minify.js';
-import { walkValues, walk } from '../ast/walk.js';
+import { walkValues, walk, WalkerOptionEnum } from '../ast/walk.js';
 import { expand } from '../ast/expand.js';
 import { parseDeclarationNode } from './utils/declaration.js';
 import { renderToken } from '../renderer/render.js';
@@ -14,6 +14,8 @@ import '../validation/parser/parse.js';
 import { validateSelector } from '../validation/selector.js';
 import { validateAtRule } from '../validation/atrule.js';
 import '../validation/syntaxes/complex-selector.js';
+import { validateKeyframeSelector } from '../validation/syntaxes/keyframe-selector.js';
+import { validateAtRuleKeyframes } from '../validation/at-rules/keyframes.js';
 
 const urlTokenMatcher = /^(["']?)[a-zA-Z0-9_/.-][a-zA-Z0-9_/:.#?-]+(\1)$/;
 const trimWhiteSpace = [EnumToken.CommentTokenType, EnumToken.GtTokenType, EnumToken.GteTokenType, EnumToken.LtTokenType, EnumToken.LteTokenType, EnumToken.ColumnCombinatorTokenType];
@@ -48,12 +50,13 @@ async function doParse(iterator, options = {}) {
         minify: true,
         pass: 1,
         parseColor: true,
-        nestingRules: false,
+        nestingRules: true,
         resolveImport: false,
         resolveUrls: false,
         removeCharset: true,
         removeEmpty: true,
         removeDuplicateDeclarations: true,
+        computeTransform: true,
         computeShorthand: true,
         computeCalcExpression: true,
         inlineCssVariables: false,
@@ -122,11 +125,13 @@ async function doParse(iterator, options = {}) {
             }
             else if (item.token == '{') {
                 let inBlock = 1;
+                tokens = [item];
                 do {
                     item = iter.next().value;
                     if (item == null) {
                         break;
                     }
+                    tokens.push(item);
                     if (item.token == '{') {
                         inBlock++;
                     }
@@ -134,6 +139,13 @@ async function doParse(iterator, options = {}) {
                         inBlock--;
                     }
                 } while (inBlock != 0);
+                if (tokens.length > 0) {
+                    errors.push({
+                        action: 'drop',
+                        message: 'invalid block',
+                        rawTokens: tokens.slice()
+                    });
+                }
             }
             tokens = [];
             map = new Map;
@@ -166,6 +178,7 @@ async function doParse(iterator, options = {}) {
         await parseNode(tokens, context, stats, options, errors, src, map, rawTokens);
         rawTokens.length = 0;
         if (context != null && context.typ == EnumToken.InvalidRuleTokenType) {
+            // @ts-ignore
             const index = context.chi.findIndex((node) => node == context);
             if (index > -1) {
                 context.chi.splice(index, 1);
@@ -465,9 +478,11 @@ async function parseNode(results, context, stats, options, errors, src, map, raw
             acc.push(renderToken(curr, { removeComments: true }));
             return acc;
         }, []);
+        const nam = renderToken(atRule, { removeComments: true });
+        // @ts-ignore
         const node = {
-            typ: EnumToken.AtRuleNodeType,
-            nam: renderToken(atRule, { removeComments: true }),
+            typ: /^(-[a-z]+-)?keyframes$/.test(nam) ? EnumToken.KeyframeAtRuleNodeType : EnumToken.AtRuleNodeType,
+            nam,
             // tokens: t,
             val: raw.join('')
         };
@@ -498,7 +513,7 @@ async function parseNode(results, context, stats, options, errors, src, map, raw
                     isValid = false;
                 }
             }
-            const valid = isValid ? validateAtRule(node, options, context) : {
+            const valid = isValid ? (node.typ == EnumToken.KeyframeAtRuleNodeType ? validateAtRuleKeyframes(node) : validateAtRule(node, options, context)) : {
                 valid: ValidationLevel.Drop,
                 node,
                 syntax: '@' + node.nam,
@@ -514,7 +529,10 @@ async function parseNode(results, context, stats, options, errors, src, map, raw
                 node.typ = EnumToken.InvalidAtRuleTokenType;
             }
             else {
-                node.val = node.tokens.reduce((acc, curr) => acc + renderToken(curr, { minify: false, removeComments: true }), '');
+                node.val = node.tokens.reduce((acc, curr) => acc + renderToken(curr, {
+                    minify: false,
+                    removeComments: true
+                }), '');
             }
         }
         // @ts-ignore
@@ -527,72 +545,79 @@ async function parseNode(results, context, stats, options, errors, src, map, raw
         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.CommentTokenType) {
-                    return acc;
-                }
-                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([]);
-                    // uniqTokens.push([]);
-                }
-                else {
-                    acc[acc.length - 1].push(t);
-                    // uniqTokens[uniqTokens.length - 1].push(curr);
-                }
-                return acc;
-            }, [[]]).reduce((acc, curr) => {
-                let i = 0;
-                for (; i < curr.length; i++) {
-                    if (i + 1 < curr.length && curr[i] == '*') {
-                        if (curr[i] == '*') {
-                            let index = curr[i + 1] == ' ' ? 2 : 1;
-                            if (!['>', '~', '+'].includes(curr[index])) {
-                                curr.splice(i, index);
-                            }
-                        }
-                    }
-                }
-                acc.set(curr.join(''), curr);
-                return acc;
-            }, uniq);
-            const ruleType = context.typ == EnumToken.AtRuleNodeType && context.nam == 'keyframes' ? EnumToken.KeyFrameRuleNodeType : EnumToken.RuleNodeType;
+            parseTokens(tokens, { minify: true });
+            const ruleType = context.typ == EnumToken.KeyframeAtRuleNodeType ? EnumToken.KeyFrameRuleNodeType : EnumToken.RuleNodeType;
             if (ruleType == EnumToken.RuleNodeType) {
                 parseSelector(tokens);
-                if (options.validation) {
-                    // @ts-ignore
-                    const valid = validateSelector(tokens, options, context);
-                    if (valid.valid != ValidationLevel.Valid) {
-                        const node = {
-                            typ: EnumToken.InvalidRuleTokenType,
-                            // @ts-ignore
-                            sel: tokens.reduce((acc, curr) => acc + renderToken(curr, { minify: false }), ''),
-                            chi: []
-                        };
-                        errors.push({
-                            action: 'drop',
-                            message: valid.error + ' - "' + tokens.reduce((acc, curr) => acc + renderToken(curr, { minify: false }), '') + '"',
-                            // @ts-ignore
-                            location: { src, ...(map.get(valid.node) ?? position) }
-                        });
+            }
+            if (options.validation) {
+                // @ts-ignore
+                const valid = ruleType == EnumToken.KeyFrameRuleNodeType ? validateKeyframeSelector(tokens) : validateSelector(tokens, options, context);
+                if (valid.valid != ValidationLevel.Valid) {
+                    const node = {
+                        typ: EnumToken.InvalidRuleTokenType,
+                        sel: tokens.reduce((acc, curr) => acc + renderToken(curr, { minify: false }), ''),
+                        chi: []
+                    };
+                    errors.push({
+                        action: 'drop',
+                        message: valid.error + ' - "' + tokens.reduce((acc, curr) => acc + renderToken(curr, { minify: false }), '') + '"',
                         // @ts-ignore
-                        context.chi.push(node);
-                        Object.defineProperty(node, 'parent', { ...definedPropertySettings, value: context });
-                        return node;
-                    }
+                        location: { src, ...(map.get(valid.node) ?? position) }
+                    });
+                    // @ts-ignore
+                    context.chi.push(node);
+                    Object.defineProperty(node, 'parent', { ...definedPropertySettings, value: context });
+                    return node;
                 }
             }
             const node = {
                 typ: ruleType,
-                sel: [...uniq.keys()].join(','),
+                sel: [...tokens.reduce((acc, curr, index, array) => {
+                        if (curr.typ == EnumToken.CommentTokenType) {
+                            return acc;
+                        }
+                        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;
+                            }
+                        }
+                        if (ruleType == EnumToken.KeyFrameRuleNodeType) {
+                            if (curr.typ == EnumToken.IdenTokenType && curr.val == 'from') {
+                                Object.assign(curr, { typ: EnumToken.PercentageTokenType, val: '0' });
+                            }
+                            else if (curr.typ == EnumToken.PercentageTokenType && curr.val == '100') {
+                                Object.assign(curr, { typ: EnumToken.IdenTokenType, val: 'to' });
+                            }
+                        }
+                        let t = renderToken(curr, { minify: false });
+                        if (t == ',') {
+                            acc.push([]);
+                            // uniqTokens.push([]);
+                        }
+                        else {
+                            acc[acc.length - 1].push(t);
+                            // uniqTokens[uniqTokens.length - 1].push(curr);
+                        }
+                        return acc;
+                    }, [[]]).reduce((acc, curr) => {
+                        let i = 0;
+                        for (; i < curr.length; i++) {
+                            if (i + 1 < curr.length && curr[i] == '*') {
+                                if (curr[i] == '*') {
+                                    let index = curr[i + 1] == ' ' ? 2 : 1;
+                                    if (!['>', '~', '+'].includes(curr[index])) {
+                                        curr.splice(i, index);
+                                    }
+                                }
+                            }
+                        }
+                        acc.set(curr.join(''), curr);
+                        return acc;
+                    }, uniq).keys()].join(','),
                 chi: []
             };
             Object.defineProperty(node, 'tokens', {
@@ -677,7 +702,8 @@ async function parseNode(results, context, stats, options, errors, src, map, raw
                     }
                 }
             }
-            if (value == null || value.length == 0) {
+            const nam = renderToken(name.shift(), { removeComments: true });
+            if (value == null || (!nam.startsWith('--') && value.length == 0)) {
                 errors.push({
                     action: 'drop',
                     message: 'doParse: invalid declaration',
@@ -685,33 +711,30 @@ async function parseNode(results, context, stats, options, errors, src, map, raw
                 });
                 return null;
             }
+            for (const { value: token } of walkValues(value, null, {
+                fn: (node) => node.typ == EnumToken.FunctionTokenType && node.val == 'calc' ? WalkerOptionEnum.IgnoreChildren : null,
+                type: EnumToken.FunctionTokenType
+            })) {
+                if (token.typ == EnumToken.FunctionTokenType && token.val == 'calc') {
+                    for (const { value: node, parent } of walkValues(token.chi, token)) {
+                        // fix expressions starting with '/' or '*' such as '/4' in (1 + 1)/4
+                        if (node.typ == EnumToken.LiteralTokenType && node.val.length > 0) {
+                            if (node.val[0] == '/' || node.val[0] == '*') {
+                                parent.chi.splice(parent.chi.indexOf(node), 1, { typ: node.val[0] == '/' ? EnumToken.Div : EnumToken.Mul }, ...parseString(node.val.slice(1)));
+                            }
+                        }
+                    }
+                }
+            }
             const node = {
                 typ: EnumToken.DeclarationNodeType,
                 // @ts-ignore
-                nam: renderToken(name.shift(), { removeComments: true }),
+                nam,
                 // @ts-ignore
                 val: value
             };
             const result = parseDeclarationNode(node, errors, src, position);
             if (result != null) {
-                // if (options.validation) {
-                //
-                //     const valid: ValidationResult = validateDeclaration(result, options, context);
-                //
-                //     // console.error({valid});
-                //
-                //     if (valid.valid == ValidationLevel.Drop) {
-                //
-                //         errors.push({
-                //             action: 'drop',
-                //             message: valid.error + ' - "' + tokens.reduce((acc, curr) => acc + renderToken(curr, {minify: false}), '') + '"',
-                //             // @ts-ignore
-                //             location: {src, ...(map.get(valid.node) ?? position)}
-                //         });
-                //
-                //         return null;
-                //     }
-                // }
                 // @ts-ignore
                 context.chi.push(result);
                 Object.defineProperty(result, 'parent', { ...definedPropertySettings, value: context });
@@ -794,8 +817,6 @@ function parseAtRulePrelude(tokens, atRule) {
             }
         }
         if (value.typ == EnumToken.ParensTokenType || (value.typ == EnumToken.FunctionTokenType && ['media', 'supports', 'style', 'scroll-state'].includes(value.val))) {
-            // @todo parse range and declarations
-            // parseDeclaration(parent.chi);
             let i;
             let nameIndex = -1;
             let valueIndex = -1;
@@ -1359,7 +1380,7 @@ function parseTokens(tokens, options = {}) {
                         upper++;
                     }
                     if (upper < t.chi.length &&
-                        t.chi[upper].typ == EnumToken.Iden &&
+                        t.chi[upper].typ == EnumToken.IdenTokenType &&
                         ['i', 's'].includes(t.chi[upper].val.toLowerCase())) {
                         t.chi[m].attr = t.chi[upper].val;
                         t.chi.splice(upper, 1);

package/dist/lib/parser/utils/declaration.js

@@ -11,7 +11,7 @@ function parseDeclarationNode(node, errors, src, position) {
     while (node.val[0]?.typ == EnumToken.WhitespaceTokenType) {
         node.val.shift();
     }
-    if (node.val.filter((t) => ![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType].includes(t.typ)).length == 0) {
+    if (!node.nam.startsWith('--') && node.val.filter((t) => ![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType].includes(t.typ)).length == 0) {
         errors.push({
             action: 'drop',
             message: 'doParse: invalid declaration',

package/dist/lib/renderer/color/{colormix.js → color-mix.js}

@@ -57,6 +57,9 @@ function interpolateHue(interpolationMethod, h1, h2) {
     return [h1, h2];
 }
 function colorMix(colorSpace, hueInterpolationMethod, color1, percentage1, color2, percentage2) {
+    if (color1.val == 'currentcolor' || color2.val == 'currentcolor') {
+        return null;
+    }
     if (hueInterpolationMethod != null && isRectangularOrthogonalColorspace(colorSpace)) {
         return null;
     }
@@ -110,6 +113,9 @@ function colorMix(colorSpace, hueInterpolationMethod, color1, percentage1, color
     }
     const components1 = getComponents(color1);
     const components2 = getComponents(color2);
+    if (components1 == null || components2 == null) {
+        return null;
+    }
     if ((components1[3] != null && components1[3].typ == EnumToken.IdenTokenType && components1[3].val == 'none') && values2.length == 4) {
         values1[3] = values2[3];
     }

package/dist/lib/renderer/color/color.js

@@ -8,7 +8,7 @@ import { lch2hwb, lab2hwb, oklch2hwb, oklab2hwb, hsl2hwb, rgb2hwb } from './hwb.
 import { srgb2lab, oklch2lab, oklab2lab, lch2lab, hwb2lab, hsl2lab, rgb2lab, hex2lab } from './lab.js';
 import { srgb2lch, oklch2lch, oklab2lch, lab2lch, hwb2lch, hsl2lch, rgb2lch, hex2lch } from './lch.js';
 import { srgb2oklab, oklch2oklab, lch2oklab, lab2oklab, hwb2oklab, hsl2oklab, rgb2oklab, hex2oklab } from './oklab.js';
-import { lch2oklch, oklab2oklch, lab2oklch, hwb2oklch, hsl2oklch, rgb2oklch, hex2oklch, srgb2oklch } from './oklch.js';
+import { lch2oklch, oklab2oklch, lab2oklch, hwb2oklch, hsl2oklch, rgb2oklch, hex2oklch } from './oklch.js';
 import { colorFuncColorSpace } from './utils/constants.js';
 import { getComponents } from './utils/components.js';
 import { xyz2srgb, lsrgb2srgbvalues, srgb2lsrgbvalues, lch2srgb, oklab2srgb, lab2srgb, hwb2srgb, hsl2srgb, rgb2srgb, hex2srgb } from './srgb.js';
@@ -33,10 +33,15 @@ function convert(token, to) {
     }
     let values = [];
     if (to == 'hsl') {
+        let t;
         switch (token.kin) {
             case 'rgb':
             case 'rgba':
-                values.push(...rgb2hsl(token));
+                t = rgb2hsl(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'hex':
             case 'lit':
@@ -46,10 +51,18 @@ function convert(token, to) {
                 values.push(...hwb2hsl(token));
                 break;
             case 'oklab':
-                values.push(...oklab2hsl(token));
+                t = oklab2hsl(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'oklch':
-                values.push(...oklch2hsl(token));
+                t = oklch2hsl(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'lab':
                 values.push(...lab2hsl(token));
@@ -98,28 +111,53 @@ function convert(token, to) {
         }
     }
     else if (to == 'rgb') {
+        let t;
         switch (token.kin) {
             case 'hex':
             case 'lit':
                 values.push(...hex2rgb(token));
                 break;
             case 'hsl':
-                values.push(...hsl2rgb(token));
+                t = hsl2rgb(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'hwb':
-                values.push(...hwb2rgb(token));
+                t = hwb2rgb(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'oklab':
-                values.push(...oklab2rgb(token));
+                t = oklab2rgb(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'oklch':
-                values.push(...oklch2rgb(token));
+                t = oklch2rgb(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'lab':
-                values.push(...lab2rgb(token));
+                t = lab2rgb(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'lch':
-                values.push(...lch2rgb(token));
+                t = lch2rgb(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'color':
                 // @ts-ignore
@@ -305,6 +343,7 @@ function convert(token, to) {
         }
     }
     else if (colorFuncColorSpace.includes(to)) {
+        let t;
         switch (token.kin) {
             case 'hex':
             case 'lit':
@@ -312,30 +351,60 @@ function convert(token, to) {
                 break;
             case 'rgb':
             case 'rgba':
-                values.push(...rgb2srgb(token));
+                t = rgb2srgb(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'hsl':
             case 'hsla':
-                values.push(...hsl2srgb(token));
+                t = hsl2srgb(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'hwb':
-                values.push(...hwb2srgb(token));
+                t = hwb2srgb(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'lab':
-                values.push(...lab2srgb(token));
+                t = lab2srgb(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'oklab':
-                values.push(...oklab2srgb(token));
+                t = oklab2srgb(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'lch':
-                values.push(...lch2srgb(token));
+                t = lch2srgb(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'oklch':
-                // @ts-ignore
-                values.push(...srgb2oklch(...color2srgbvalues(token)));
+                t = color2srgbvalues(token);
+                if (t == null) {
+                    return null;
+                }
+                values.push(...t);
                 break;
             case 'color':
                 const val = color2srgbvalues(token);
+                if (val == null) {
+                    return null;
+                }
                 switch (to) {
                     case 'srgb':
                         values.push(...val);
@@ -389,6 +458,9 @@ function minmax(value, min, max) {
 }
 function color2srgbvalues(token) {
     const components = getComponents(token);
+    if (components == null) {
+        return null;
+    }
     const colorSpace = components.shift();
     let values = components.map((val) => getNumber(val));
     switch (colorSpace.val) {
@@ -531,6 +603,10 @@ function getNumber(token) {
     // @ts-ignore
     return token.typ == EnumToken.PercentageTokenType ? token.val / 100 : +token.val;
 }
+/**
+ * convert angle to turn
+ * @param token
+ */
 function getAngle(token) {
     if (token.typ == EnumToken.IdenTokenType) {
         if (token.val == 'none') {