@tbela99/css-parser 0.9.1 → 1.1.0

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

@@ -2,8 +2,9 @@ import { EnumToken } from '../../../ast/types.js';
 import '../../../ast/minify.js';
 import '../../../ast/walk.js';
 import '../../../parser/parse.js';
-import '../../sourcemap/lib/encode.js';
+import '../../../parser/tokenize.js';
 import '../../../parser/utils/config.js';
+import '../../sourcemap/lib/encode.js';
 
 const colorRange = {
     lab: {
@@ -27,8 +28,51 @@ const colorRange = {
         b: [0, 0.4]
     }
 };
+// xyz-d65 is an alias for xyz
+// display-p3 is an alias for srgb
+var ColorKind;
+(function (ColorKind) {
+    ColorKind[ColorKind["SYS"] = 0] = "SYS";
+    ColorKind[ColorKind["DPSYS"] = 1] = "DPSYS";
+    ColorKind[ColorKind["LIT"] = 2] = "LIT";
+    ColorKind[ColorKind["HEX"] = 3] = "HEX";
+    ColorKind[ColorKind["RGB"] = 4] = "RGB";
+    ColorKind[ColorKind["RGBA"] = 5] = "RGBA";
+    ColorKind[ColorKind["HSL"] = 6] = "HSL";
+    ColorKind[ColorKind["HSLA"] = 7] = "HSLA";
+    ColorKind[ColorKind["HWB"] = 8] = "HWB";
+    ColorKind[ColorKind["DEVICE_CMYK"] = 9] = "DEVICE_CMYK";
+    ColorKind[ColorKind["OKLAB"] = 10] = "OKLAB";
+    ColorKind[ColorKind["OKLCH"] = 11] = "OKLCH";
+    ColorKind[ColorKind["LAB"] = 12] = "LAB";
+    ColorKind[ColorKind["LCH"] = 13] = "LCH";
+    ColorKind[ColorKind["COLOR"] = 14] = "COLOR";
+    ColorKind[ColorKind["SRGB"] = 15] = "SRGB";
+    ColorKind[ColorKind["PROPHOTO_RGB"] = 16] = "PROPHOTO_RGB";
+    ColorKind[ColorKind["A98_RGB"] = 17] = "A98_RGB";
+    ColorKind[ColorKind["REC2020"] = 18] = "REC2020";
+    ColorKind[ColorKind["DISPLAY_P3"] = 19] = "DISPLAY_P3";
+    ColorKind[ColorKind["SRGB_LINEAR"] = 20] = "SRGB_LINEAR";
+    ColorKind[ColorKind["XYZ"] = 21] = "XYZ";
+    ColorKind[ColorKind["XYZ_D50"] = 22] = "XYZ_D50";
+    ColorKind[ColorKind["XYZ_D65"] = 23] = "XYZ_D65";
+    ColorKind[ColorKind["LIGHT_DARK"] = 24] = "LIGHT_DARK";
+    ColorKind[ColorKind["COLOR_MIX"] = 25] = "COLOR_MIX";
+})(ColorKind || (ColorKind = {}));
+const generalEnclosedFunc = ['selector', 'font-tech', 'font-format', 'media', 'supports'];
+const funcLike = [
+    EnumToken.ParensTokenType,
+    EnumToken.FunctionTokenType,
+    EnumToken.UrlFunctionTokenType,
+    EnumToken.StartParensTokenType,
+    EnumToken.ImageFunctionTokenType,
+    EnumToken.TimingFunctionTokenType,
+    EnumToken.TimingFunctionTokenType,
+    EnumToken.PseudoClassFuncTokenType,
+    EnumToken.GridTemplateFuncTokenType
+];
+const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch', 'light-dark'];
 const colorFuncColorSpace = ['srgb', 'srgb-linear', 'display-p3', 'prophoto-rgb', 'a98-rgb', 'rec2020', 'xyz', 'xyz-d65', 'xyz-d50'];
-({ typ: EnumToken.IdenTokenType});
 const D50 = [0.3457 / 0.3585, 1.00000, (1.0 - 0.3457 - 0.3585) / 0.3585];
 const k = Math.pow(29, 3) / Math.pow(3, 3);
 const e = Math.pow(6, 3) / Math.pow(29, 3);
@@ -194,4 +238,4 @@ const NAMES_COLORS = Object.seal(Object.entries(COLORS_NAMES).reduce((acc, [key,
     return acc;
 }, Object.create(null)));
 
-export { COLORS_NAMES, D50, NAMES_COLORS, colorFuncColorSpace, colorRange, deprecatedSystemColors, e, k, systemColors };
+export { COLORS_NAMES, ColorKind, D50, NAMES_COLORS, colorFuncColorSpace, colorRange, colorsFunc, deprecatedSystemColors, e, funcLike, generalEnclosedFunc, k, systemColors };

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

@@ -4,9 +4,10 @@ import '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { srgb2lsrgbvalues } from './srgb.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 function XYZ_to_lin_sRGB(x, y, z) {
     // convert XYZ to linear-light sRGB

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

@@ -5,11 +5,12 @@ import '../../ast/types.js';
 import '../../ast/minify.js';
 import '../../ast/walk.js';
 import '../../parser/parse.js';
+import '../../parser/tokenize.js';
+import '../../parser/utils/config.js';
 import { xyz2lab } from './lab.js';
 import { lab2lchvalues } from './lch.js';
 import { XYZ_D50_to_D65 } from './xyz.js';
 import '../sourcemap/lib/encode.js';
-import '../../parser/utils/config.js';
 
 /*
 */

package/dist/lib/renderer/render.js

@@ -1,17 +1,16 @@
 import { getAngle, color2srgbvalues, clamp } from './color/color.js';
-import { colorFuncColorSpace, COLORS_NAMES } from './color/utils/constants.js';
+import { colorsFunc, ColorKind, colorFuncColorSpace, COLORS_NAMES, funcLike } from './color/utils/constants.js';
 import { getComponents } from './color/utils/components.js';
 import { reduceHexValue, srgb2hexvalues, rgb2hex, hsl2hex, hwb2hex, cmyk2hex, oklab2hex, oklch2hex, lab2hex, lch2hex } from './color/hex.js';
 import { EnumToken } from '../ast/types.js';
 import '../ast/minify.js';
 import '../ast/walk.js';
 import { expand } from '../ast/expand.js';
-import { colorMix } from './color/colormix.js';
+import { colorMix } from './color/color-mix.js';
 import { parseRelativeColor } from './color/relativecolor.js';
 import { SourceMap } from './sourcemap/sourcemap.js';
 import { isColor, pseudoElements, mathFuncs, isNewLine } from '../syntax/syntax.js';
 
-const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk', 'color-mix', 'color', 'oklab', 'lab', 'oklch', 'lch', 'light-dark'];
 function reduceNumber(val) {
     val = String(+val);
     if (val === '0') {
@@ -59,7 +58,8 @@ function doRender(data, options = {}) {
         }),
         ...(minify ? {
             removeEmpty: true,
-            removeComments: true
+            removeComments: true,
+            minify: true
         } : {
             removeEmpty: false,
             removeComments: false,
@@ -105,11 +105,17 @@ function doRender(data, options = {}) {
     }
     if (sourcemap != null) {
         result.map = sourcemap;
+        if (options.sourcemap === 'inline') {
+            result.code += `\n/*# sourceMappingURL=data:application/json,${encodeURIComponent(JSON.stringify(result.map))} */`;
+        }
     }
     return result;
 }
 function updateSourceMap(node, options, cache, sourcemap, position, str) {
-    if ([EnumToken.RuleNodeType, EnumToken.AtRuleNodeType, EnumToken.KeyFrameRuleNodeType].includes(node.typ)) {
+    if ([
+        EnumToken.RuleNodeType, EnumToken.AtRuleNodeType,
+        EnumToken.KeyFrameRuleNodeType, EnumToken.KeyframeAtRuleNodeType
+    ].includes(node.typ)) {
         let src = node.loc?.src ?? '';
         let output = options.output ?? '';
         if (!(src in cache)) {
@@ -152,7 +158,7 @@ function renderAstNode(data, options, sourcemap, position, errors, reducer, cach
     const indentSub = indents[level + 1];
     switch (data.typ) {
         case EnumToken.DeclarationNodeType:
-            return `${data.nam}:${options.indent}${data.val.reduce(reducer, '')}`;
+            return `${data.nam}:${options.indent}${(options.minify ? filterValues(data.val) : data.val).reduce(reducer, '')}`;
         case EnumToken.CommentNodeType:
         case EnumToken.CDOCOMMNodeType:
             if (data.val.startsWith('/*# sourceMappingURL=')) {
@@ -181,7 +187,8 @@ function renderAstNode(data, options, sourcemap, position, errors, reducer, cach
         case EnumToken.AtRuleNodeType:
         case EnumToken.RuleNodeType:
         case EnumToken.KeyFrameRuleNodeType:
-            if (data.typ == EnumToken.AtRuleNodeType && !('chi' in data)) {
+        case EnumToken.KeyframeAtRuleNodeType:
+            if ([EnumToken.AtRuleNodeType, EnumToken.KeyframeAtRuleNodeType].includes(data.typ) && !('chi' in data)) {
                 return `${indent}@${data.nam}${data.val === '' ? '' : options.indent || ' '}${data.val};`;
             }
             // @ts-ignore
@@ -191,7 +198,7 @@ function renderAstNode(data, options, sourcemap, position, errors, reducer, cach
                     str = options.removeComments && (!options.preserveLicense || !node.val.startsWith('/*!')) ? '' : node.val;
                 }
                 else if (node.typ == EnumToken.DeclarationNodeType) {
-                    if (node.val.length == 0) {
+                    if (!node.nam.startsWith('--') && node.val.length == 0) {
                         // @ts-ignore
                         errors.push({
                             action: 'ignore',
@@ -200,7 +207,7 @@ function renderAstNode(data, options, sourcemap, position, errors, reducer, cach
                         });
                         return '';
                     }
-                    str = `${node.nam}:${options.indent}${node.val.reduce(reducer, '').trimEnd()};`;
+                    str = `${node.nam}:${options.indent}${(options.minify ? filterValues(node.val) : node.val).reduce(reducer, '').trimEnd()};`;
                 }
                 else if (node.typ == EnumToken.AtRuleNodeType && !('chi' in node)) {
                     str = `${data.val === '' ? '' : options.indent || ' '}${data.val};`;
@@ -222,10 +229,11 @@ function renderAstNode(data, options, sourcemap, position, errors, reducer, cach
             if (children.endsWith(';')) {
                 children = children.slice(0, -1);
             }
-            if (data.typ == EnumToken.AtRuleNodeType) {
+            if ([EnumToken.AtRuleNodeType, EnumToken.KeyframeAtRuleNodeType].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 + `}`;
+        case EnumToken.InvalidDeclarationNodeType:
         case EnumToken.InvalidRuleTokenType:
         case EnumToken.InvalidAtRuleTokenType:
             return '';
@@ -258,20 +266,25 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         if (isColor(token)) {
             // @ts-ignore
             token.typ = EnumToken.ColorTokenType;
+            // @ts-ignore
             if (token.chi[0].typ == EnumToken.IdenTokenType && token.chi[0].val == 'from') {
                 // @ts-ignore
                 token.cal = 'rel';
             }
-            else if (token.val == 'color-mix' && token.chi[0].typ == EnumToken.IdenTokenType && token.chi[0].val == 'in') {
-                // @ts-ignore
-                token.cal = 'mix';
-            }
-            else {
-                if (token.val == 'color') {
+            else { // @ts-ignore
+                if (token.val == 'color-mix' && token.chi[0].typ == EnumToken.IdenTokenType && token.chi[0].val == 'in') {
+                    // @ts-ignore
+                    token.cal = 'mix';
+                }
+                else {
+                    // @ts-ignore
+                    if (token.val == 'color') {
+                        // @ts-ignore
+                        token.cal = 'col';
+                    }
                     // @ts-ignore
-                    token.cal = 'col';
+                    token.chi = token.chi.filter((t) => ![EnumToken.WhitespaceTokenType, EnumToken.CommaTokenType, EnumToken.CommentTokenType].includes(t.typ));
                 }
-                token.chi = token.chi.filter((t) => ![EnumToken.WhitespaceTokenType, EnumToken.CommaTokenType, EnumToken.CommentTokenType].includes(t.typ));
             }
         }
     }
@@ -318,7 +331,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case EnumToken.Div:
             return '/';
         case EnumToken.ColorTokenType:
-            if (token.kin == 'light-dark') {
+            if (token.kin == ColorKind.LIGHT_DARK || ('chi' in token && !options.convertColor)) {
                 return token.val + '(' + token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache), '') + ')';
             }
             if (options.convertColor) {
@@ -328,7 +341,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                             acc.push([t]);
                         }
                         else {
-                            if (![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType].includes(t.typ)) {
+                            if (![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType, EnumToken.CommaTokenType].includes(t.typ)) {
                                 acc[acc.length - 1].push(t);
                             }
                         }
@@ -338,22 +351,36 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                     if (value != null) {
                         token = value;
                     }
+                    else if (!token.chi.some(t => t.typ == EnumToken.CommaTokenType)) {
+                        token.chi = children.reduce((acc, curr, index) => {
+                            if (acc.length > 0) {
+                                acc.push({ typ: EnumToken.CommaTokenType });
+                            }
+                            acc.push(...curr);
+                            return acc;
+                        }, []);
+                    }
                 }
                 if (token.cal == 'rel' && ['rgb', 'hsl', 'hwb', 'lab', 'lch', 'oklab', 'oklch', 'color'].includes(token.val)) {
                     const chi = getComponents(token);
                     const offset = token.val == 'color' ? 2 : 1;
-                    // @ts-ignore
-                    const color = chi[1];
-                    const components = parseRelativeColor(token.val == 'color' ? chi[offset].val : token.val, color, chi[offset + 1], chi[offset + 2], chi[offset + 3], chi[offset + 4]);
-                    if (components != null) {
-                        token.chi = [...(token.val == 'color' ? [chi[offset]] : []), ...Object.values(components)];
-                        delete token.cal;
+                    if (chi != null) {
+                        // @ts-ignore
+                        const color = chi[1];
+                        const components = parseRelativeColor(token.val == 'color' ? chi[offset].val : token.val, color, chi[offset + 1], chi[offset + 2], chi[offset + 3], chi[offset + 4]);
+                        if (components != null) {
+                            token.chi = [...(token.val == 'color' ? [chi[offset]] : []), ...Object.values(components)];
+                            delete token.cal;
+                        }
                     }
                 }
                 if (token.val == 'color') {
                     if (token.chi[0].typ == EnumToken.IdenTokenType && colorFuncColorSpace.includes(token.chi[0].val.toLowerCase())) {
-                        // @ts-ignore
-                        return reduceHexValue(srgb2hexvalues(...color2srgbvalues(token)));
+                        const values = color2srgbvalues(token);
+                        if (Array.isArray(values) && values.every(t => !Number.isNaN(t))) {
+                            // @ts-ignore
+                            return reduceHexValue(srgb2hexvalues(...values));
+                        }
                     }
                 }
                 if (token.cal != null) {
@@ -369,23 +396,45 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                     }
                     return clamp(token).val + '(' + (slice ? token.chi.slice(0, -2) : token.chi).reduce((acc, curr) => {
                         const val = renderToken(curr, options, cache);
-                        if ([EnumToken.LiteralTokenType, EnumToken.CommaTokenType].includes(curr.typ)) {
-                            return acc + val;
+                        if (curr.typ == EnumToken.LiteralTokenType && curr.val == '/') {
+                            return acc.trimEnd() + '/';
+                        }
+                        if (curr.typ == EnumToken.CommaTokenType) {
+                            return acc.trimEnd() + ',';
+                        }
+                        if (curr.typ == EnumToken.WhitespaceTokenType) {
+                            const v = acc.at(-1);
+                            if (v == ' ' || v == ',' || v == '/') {
+                                return acc.trimEnd();
+                            }
+                            return acc.trimEnd() + ' ';
                         }
                         if (acc.length > 0) {
-                            return acc + (['/', ','].includes(acc.at(-1)) ? '' : ' ') + val;
+                            return acc + (['/', ',', ' '].includes(acc.at(-1)) ? '' : ' ') + val;
                         }
                         return val;
                     }, '') + ')';
                 }
-                if (token.kin == 'lit' && token.val.localeCompare('currentcolor', undefined, { sensitivity: 'base' }) == 0) {
+                if (token.kin == ColorKind.LIT && token.val.localeCompare('currentcolor', undefined, { sensitivity: 'base' }) == 0) {
                     return 'currentcolor';
                 }
                 clamp(token);
                 if (Array.isArray(token.chi) && token.chi.some((t) => t.typ == EnumToken.FunctionTokenType || (t.typ == EnumToken.ColorTokenType && Array.isArray(t.chi)))) {
-                    return (token.val.endsWith('a') ? token.val.slice(0, -1) : token.val) + '(' + token.chi.reduce((acc, curr) => acc + (acc.length > 0 && !(acc.endsWith('/') || curr.typ == EnumToken.LiteralTokenType) ? ' ' : '') + renderToken(curr, options, cache), '') + ')';
+                    const replaceSemiColon = /^((rgba?)|(hsla?)|(hwb)|((ok)?lab)|((ok)?lch))$/i.test(token.val);
+                    return (token.val.endsWith('a') ? token.val.slice(0, -1) : token.val) + '(' + token.chi.reduce((acc, curr, index, array) => {
+                        if (curr.typ == EnumToken.Literal && curr.val == '/') {
+                            return acc.trimEnd() + '/';
+                        }
+                        if (curr.typ == EnumToken.CommaTokenType) {
+                            return acc.trimEnd() + (replaceSemiColon ? ' ' : ',');
+                        }
+                        if (curr.typ == EnumToken.WhitespaceTokenType) {
+                            return /[,\/\s]/.test(acc.at(-1)) ? acc.trimEnd() : acc.trimEnd() + ' ';
+                        }
+                        return acc + renderToken(curr, options, cache);
+                    }, '') + ')';
                 }
-                let value = token.kin == 'hex' ? token.val.toLowerCase() : (token.kin == 'lit' ? COLORS_NAMES[token.val.toLowerCase()] : '');
+                let value = token.kin == ColorKind.HEX ? token.val.toLowerCase() : (token.kin == ColorKind.LIT ? COLORS_NAMES[token.val.toLowerCase()] : '');
                 if (token.val == 'rgb' || token.val == 'rgba') {
                     value = rgb2hex(token);
                 }
@@ -410,11 +459,11 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                 else if (token.val == 'lch') {
                     value = lch2hex(token);
                 }
-                if (value !== '') {
+                if (value !== '' && value != null) {
                     return reduceHexValue(value);
                 }
             }
-            if (['hex', 'lit', 'sys', 'dpsys'].includes(token.kin)) {
+            if ([ColorKind.HEX, ColorKind.LIT, ColorKind.SYS, ColorKind.DPSYS].includes(token.kin)) {
                 return token.val;
             }
             if (Array.isArray(token.chi)) {
@@ -434,9 +483,8 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                 ![EnumToken.BinaryExpressionTokenType, EnumToken.FractionTokenType, EnumToken.IdenTokenType].includes(token.chi[0].typ) &&
                 // @ts-ignore
                 token.chi[0].val?.typ != EnumToken.FractionTokenType) {
-                return token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache, reducer), '');
+                return token.val + '(' + token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache, reducer), '') + ')';
             }
-            // @ts-ignore
             return ( /* options.minify && 'Pseudo-class-func' == token.typ && token.val.slice(0, 2) == '::' ? token.val.slice(1) :*/token.val ?? '') + '(' + token.chi.reduce(reducer, '') + ')';
         case EnumToken.MatchExpressionTokenType:
             return renderToken(token.l, options, cache, reducer, errors) +
@@ -576,6 +624,9 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                 }
                 return val + 's';
             }
+            if (token.typ == EnumToken.ResolutionTokenType && unit == 'dppx') {
+                unit = 'x';
+            }
             return val.includes('/') ? val.replace('/', unit + '/') : val + unit;
         case EnumToken.FlexTokenType:
         case EnumToken.PercentageTokenType:
@@ -600,7 +651,11 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                     if (!('original' in token)) {
                         // do not modify original token
                         token = { ...token };
-                        Object.defineProperty(token, 'original', { enumerable: false, writable: false, value: token.val });
+                        Object.defineProperty(token, 'original', {
+                            enumerable: false,
+                            writable: false,
+                            value: token.val
+                        });
                     }
                     // @ts-ignore
                     if (!(token.original in cache)) {
@@ -633,7 +688,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case EnumToken.InvalidClassSelectorTokenType:
             return token.val;
         case EnumToken.DeclarationNodeType:
-            return token.nam + ':' + token.val.reduce((acc, curr) => acc + renderToken(curr, options, cache), '');
+            return token.nam + ':' + (options.minify ? filterValues(token.val) : token.val).reduce((acc, curr) => acc + renderToken(curr, options, cache), '');
         case EnumToken.MediaQueryConditionTokenType:
             return renderToken(token.l, options, cache, reducer, errors) + renderToken(token.op, options, cache, reducer, errors) + token.r.reduce((acc, curr) => acc + renderToken(curr, options, cache), '');
         case EnumToken.MediaFeatureTokenType:
@@ -646,11 +701,21 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
             return 'and';
         case EnumToken.MediaFeatureOrTokenType:
             return 'or';
-        default:
-            throw new Error(`render: unexpected token ${JSON.stringify(token, null, 1)}`);
     }
     errors?.push({ action: 'ignore', message: `render: unexpected token ${JSON.stringify(token, null, 1)}` });
     return '';
 }
+function filterValues(values) {
+    let i = 0;
+    for (; i < values.length; i++) {
+        if (values[i].typ == EnumToken.ImportantTokenType && values[i - 1]?.typ == EnumToken.WhitespaceTokenType) {
+            values.splice(i - 1, 1);
+        }
+        else if (funcLike.includes(values[i].typ) && !['var', 'calc'].includes(values[i].val) && values[i + 1]?.typ == EnumToken.WhitespaceTokenType) {
+            values.splice(i + 1, 1);
+        }
+    }
+    return values;
+}
 
-export { colorsFunc, doRender, reduceNumber, renderToken };
+export { doRender, filterValues, reduceNumber, renderToken };