@tbela99/css-parser 0.9.0 → 1.0.0

package/dist/lib/renderer/render.js

@@ -2,14 +2,14 @@ import { getAngle, color2srgbvalues, clamp } from './color/color.js';
 import { colorFuncColorSpace, COLORS_NAMES } 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 { EnumToken, funcLike } 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, mathFuncs, isNewLine } from '../syntax/syntax.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) {
@@ -109,7 +109,7 @@ function doRender(data, options = {}) {
     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 +152,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 +181,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 +192,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 +201,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,7 +223,7 @@ 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 + `}`;
@@ -258,20 +259,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 = 'col';
+                    token.cal = 'mix';
+                }
+                else {
+                    // @ts-ignore
+                    if (token.val == 'color') {
+                        // @ts-ignore
+                        token.cal = 'col';
+                    }
+                    // @ts-ignore
+                    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));
             }
         }
     }
@@ -338,22 +344,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) {
@@ -410,7 +430,7 @@ 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);
                 }
             }
@@ -589,8 +609,9 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                 return '';
             }
         case EnumToken.PseudoClassTokenType:
+        case EnumToken.PseudoElementTokenType:
             // https://www.w3.org/TR/selectors-4/#single-colon-pseudos
-            if (token.typ == EnumToken.PseudoClassTokenType && ['::before', '::after', '::first-line', '::first-letter'].includes(token.val)) {
+            if (token.typ == EnumToken.PseudoElementTokenType && pseudoElements.includes(token.val.slice(1))) {
                 return token.val.slice(1);
             }
         case EnumToken.UrlTokenTokenType:
@@ -599,7 +620,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)) {
@@ -632,7 +657,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:
@@ -645,11 +670,24 @@ 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)}`);
+        // 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 { colorsFunc, doRender, filterValues, reduceNumber, renderToken };

package/dist/lib/renderer/sourcemap/sourcemap.js

@@ -1,11 +1,11 @@
 import { encode } from './lib/encode.js';
 
 class SourceMap {
+    lastLocation = null;
     #version = 3;
     #sources = [];
     #map = new Map;
     #line = -1;
-    lastLocation = null;
     add(source, original) {
         if (original.src !== '') {
             if (!this.#sources.includes(original.src)) {

package/dist/lib/syntax/syntax.js

@@ -19,12 +19,21 @@ const dimensionUnits = new Set([
 const fontFormat = ['collection', 'embedded-opentype', 'opentype', 'svg', 'truetype', 'woff', 'woff2'];
 const colorFontTech = ['color-colrv0', 'color-colrv1', 'color-svg', 'color-sbix', 'color-cbdt'];
 const fontFeaturesTech = ['features-opentype', 'features-aat', 'features-graphite', 'incremental-patch', 'incremental-range', 'incremental-auto', 'variations', 'palettes'];
+const transformFunctions = [
+    'translate', 'scale', 'rotate', 'skew', 'perspective',
+    'translateX', 'translateY', 'translateZ',
+    'scaleX', 'scaleY', 'scaleZ',
+    'rotateX', 'rotateY', 'rotateZ',
+    'skewX', 'skewY',
+    'rotate3d', 'translate3d', 'scale3d', 'matrix', 'matrix3d'
+];
 // https://drafts.csswg.org/mediaqueries/#media-types
 const mediaTypes = ['all', 'print', 'screen',
     /* deprecated */
     'aural', 'braille', 'embossed', 'handheld', 'projection', 'tty', 'tv', 'speech'];
 // https://www.w3.org/TR/css-values-4/#math-function
 const mathFuncs = ['calc', 'clamp', 'min', 'max', 'round', 'mod', 'rem', 'sin', 'cos', 'tan', 'asin', 'acos', 'atan', 'atan2', 'pow', 'sqrt', 'hypot', 'log', 'exp', 'abs', 'sign'];
+const pseudoElements = [':before', ':after', ':first-line', ':first-letter'];
 const webkitPseudoAliasMap = {
     '-webkit-autofill': 'autofill',
     '-webkit-any': 'is',
@@ -409,7 +418,9 @@ function isColor(token) {
     }
     let isLegacySyntax = false;
     if (token.typ == EnumToken.FunctionTokenType && token.chi.length > 0 && colorsFunc.includes(token.val)) {
+        // @ts-ignore
         if (token.val == 'light-dark') {
+            // @ts-ignore
             const children = token.chi.filter((t) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.LiteralTokenType, EnumToken.ColorTokenType, EnumToken.FunctionTokenType, EnumToken.PercentageTokenType].includes(t.typ));
             if (children.length != 2) {
                 return false;
@@ -418,7 +429,9 @@ function isColor(token) {
                 return true;
             }
         }
+        // @ts-ignore
         if (token.val == 'color') {
+            // @ts-ignore
             const children = token.chi.filter((t) => [EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.LiteralTokenType, EnumToken.ColorTokenType, EnumToken.FunctionTokenType, EnumToken.PercentageTokenType].includes(t.typ));
             const isRelative = children[0].typ == EnumToken.IdenTokenType && children[0].val == 'from';
             if (children.length < 4 || children.length > 8) {
@@ -467,73 +480,79 @@ function isColor(token) {
             }
             return true;
         }
-        else if (token.val == 'color-mix') {
-            const children = token.chi.reduce((acc, t) => {
-                if (t.typ == EnumToken.CommaTokenType) {
-                    acc.push([]);
-                }
-                else {
-                    if (![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType].includes(t.typ)) {
-                        acc[acc.length - 1].push(t);
+        else { // @ts-ignore
+            if (token.val == 'color-mix') {
+                // @ts-ignore
+                const children = token.chi.reduce((acc, t) => {
+                    if (t.typ == EnumToken.CommaTokenType) {
+                        acc.push([]);
                     }
-                }
-                return acc;
-            }, [[]]);
-            if (children.length == 3) {
-                if (children[0].length > 3 ||
-                    children[0][0].typ != EnumToken.IdenTokenType ||
-                    children[0][0].val != 'in' ||
-                    !isColorspace(children[0][1]) ||
-                    (children[0].length == 3 && !isHueInterpolationMethod(children[0][2])) ||
-                    children[1].length > 2 ||
-                    children[1][0].typ != EnumToken.ColorTokenType ||
-                    children[2].length > 2 ||
-                    children[2][0].typ != EnumToken.ColorTokenType) {
-                    return false;
-                }
-                if (children[1].length == 2) {
-                    if (!(children[1][1].typ == EnumToken.PercentageTokenType || (children[1][1].typ == EnumToken.NumberTokenType && children[1][1].val == '0'))) {
-                        return false;
+                    else {
+                        if (![EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType].includes(t.typ)) {
+                            acc[acc.length - 1].push(t);
+                        }
                     }
-                }
-                if (children[2].length == 2) {
-                    if (!(children[2][1].typ == EnumToken.PercentageTokenType || (children[2][1].typ == EnumToken.NumberTokenType && children[2][1].val == '0'))) {
+                    return acc;
+                }, [[]]);
+                if (children.length == 3) {
+                    if (children[0].length > 3 ||
+                        children[0][0].typ != EnumToken.IdenTokenType ||
+                        children[0][0].val != 'in' ||
+                        !isColorspace(children[0][1]) ||
+                        (children[0].length == 3 && !isHueInterpolationMethod(children[0][2])) ||
+                        children[1].length > 2 ||
+                        children[1][0].typ != EnumToken.ColorTokenType ||
+                        children[2].length > 2 ||
+                        children[2][0].typ != EnumToken.ColorTokenType) {
                         return false;
                     }
+                    if (children[1].length == 2) {
+                        if (!(children[1][1].typ == EnumToken.PercentageTokenType || (children[1][1].typ == EnumToken.NumberTokenType && children[1][1].val == '0'))) {
+                            return false;
+                        }
+                    }
+                    if (children[2].length == 2) {
+                        if (!(children[2][1].typ == EnumToken.PercentageTokenType || (children[2][1].typ == EnumToken.NumberTokenType && children[2][1].val == '0'))) {
+                            return false;
+                        }
+                    }
+                    return true;
                 }
-                return true;
-            }
-            return false;
-        }
-        else {
-            const keywords = ['from', 'none'];
-            if (['rgb', 'hsl', 'hwb', 'lab', 'lch', 'oklab', 'oklch'].includes(token.val)) {
-                keywords.push('alpha', ...token.val.slice(-3).split(''));
+                return false;
             }
-            // @ts-ignore
-            for (const v of token.chi) {
-                if (v.typ == EnumToken.CommaTokenType) {
-                    isLegacySyntax = true;
+            else {
+                const keywords = ['from', 'none'];
+                // @ts-ignore
+                if (['rgb', 'hsl', 'hwb', 'lab', 'lch', 'oklab', 'oklch'].includes(token.val)) {
+                    // @ts-ignore
+                    keywords.push('alpha', ...token.val.slice(-3).split(''));
                 }
-                if (v.typ == EnumToken.IdenTokenType) {
-                    if (!(keywords.includes(v.val) || v.val.toLowerCase() in COLORS_NAMES)) {
-                        return false;
+                // @ts-ignore
+                for (const v of token.chi) {
+                    if (v.typ == EnumToken.CommaTokenType) {
+                        isLegacySyntax = true;
                     }
-                    if (keywords.includes(v.val)) {
-                        if (isLegacySyntax) {
+                    if (v.typ == EnumToken.IdenTokenType) {
+                        if (!(keywords.includes(v.val) || v.val.toLowerCase() in COLORS_NAMES)) {
                             return false;
                         }
-                        if (v.val == 'from' && ['rgba', 'hsla'].includes(token.val)) {
-                            return false;
+                        if (keywords.includes(v.val)) {
+                            if (isLegacySyntax) {
+                                return false;
+                            }
+                            // @ts-ignore
+                            if (v.val == 'from' && ['rgba', 'hsla'].includes(token.val)) {
+                                return false;
+                            }
                         }
+                        continue;
+                    }
+                    if (v.typ == EnumToken.FunctionTokenType && (mathFuncs.includes(v.val) || v.val == 'var' || colorsFunc.includes(v.val))) {
+                        continue;
+                    }
+                    if (![EnumToken.ColorTokenType, EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.AngleTokenType, EnumToken.PercentageTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType, EnumToken.LiteralTokenType].includes(v.typ)) {
+                        return false;
                     }
-                    continue;
-                }
-                if (v.typ == EnumToken.FunctionTokenType && (mathFuncs.includes(v.val) || v.val == 'var' || colorsFunc.includes(v.val))) {
-                    continue;
-                }
-                if (![EnumToken.ColorTokenType, EnumToken.IdenTokenType, EnumToken.NumberTokenType, EnumToken.AngleTokenType, EnumToken.PercentageTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType, EnumToken.LiteralTokenType].includes(v.typ)) {
-                    return false;
                 }
             }
         }
@@ -811,4 +830,4 @@ function isWhiteSpace(codepoint) {
         codepoint == 0xa || codepoint == 0xc || codepoint == 0xd;
 }
 
-export { colorFontTech, fontFeaturesTech, fontFormat, isAngle, isAtKeyword, isColor, isColorspace, isDigit, isDimension, isFlex, isFrequency, isFunction, isHash, isHexColor, isHueInterpolationMethod, isIdent, isIdentCodepoint, isIdentStart, isLength, isNewLine, isNonPrintable, isNumber, isPercentage, isPolarColorspace, isPseudo, isRectangularOrthogonalColorspace, isResolution, isTime, isWhiteSpace, mathFuncs, mediaTypes, mozExtensions, parseDimension, webkitExtensions, webkitPseudoAliasMap };
+export { colorFontTech, fontFeaturesTech, fontFormat, isAngle, isAtKeyword, isColor, isColorspace, isDigit, isDimension, isFlex, isFrequency, isFunction, isHash, isHexColor, isHueInterpolationMethod, isIdent, isIdentCodepoint, isIdentStart, isLength, isNewLine, isNonPrintable, isNumber, isPercentage, isPolarColorspace, isPseudo, isRectangularOrthogonalColorspace, isResolution, isTime, isWhiteSpace, mathFuncs, mediaTypes, mozExtensions, parseDimension, pseudoElements, transformFunctions, webkitExtensions, webkitPseudoAliasMap };

package/dist/lib/validation/at-rules/container.js

@@ -95,10 +95,10 @@ function validateAtRuleContainerQueryList(tokens, atRule) {
                 break;
             }
             token = queries[0];
-            if (token.typ == EnumToken.MediaFeatureNotTokenType) {
+            if (token?.typ == EnumToken.MediaFeatureNotTokenType) {
                 token = token.val;
             }
-            if (token.typ != EnumToken.ParensTokenType && (token.typ != EnumToken.FunctionTokenType || !['scroll-state', 'style'].includes(token.val))) {
+            if (token?.typ != EnumToken.ParensTokenType && (token?.typ != EnumToken.FunctionTokenType || !['scroll-state', 'style'].includes(token.val))) {
                 return {
                     valid: ValidationLevel.Drop,
                     matches: [],
@@ -108,7 +108,7 @@ function validateAtRuleContainerQueryList(tokens, atRule) {
                     tokens
                 };
             }
-            if (token.typ == EnumToken.ParensTokenType) {
+            if (token?.typ == EnumToken.ParensTokenType) {
                 result = validateContainerSizeFeature(token.chi, atRule);
             }
             else if (token.val == 'scroll-state') {
@@ -126,7 +126,7 @@ function validateAtRuleContainerQueryList(tokens, atRule) {
                 break;
             }
             token = queries[0];
-            if (token.typ != EnumToken.MediaFeatureAndTokenType && token.typ != EnumToken.MediaFeatureOrTokenType) {
+            if (token?.typ != EnumToken.MediaFeatureAndTokenType && token?.typ != EnumToken.MediaFeatureOrTokenType) {
                 return {
                     valid: ValidationLevel.Drop,
                     matches: [],
@@ -137,9 +137,9 @@ function validateAtRuleContainerQueryList(tokens, atRule) {
                 };
             }
             if (tokenType == null) {
-                tokenType = token.typ;
+                tokenType = token?.typ;
             }
-            if (tokenType != token.typ) {
+            if (tokenType == null || tokenType != token?.typ) {
                 return {
                     valid: ValidationLevel.Drop,
                     matches: [],

package/dist/lib/validation/at-rules/document.js

@@ -6,6 +6,7 @@ import '../../renderer/color/utils/constants.js';
 import '../../renderer/sourcemap/lib/encode.js';
 import '../../parser/utils/config.js';
 import { consumeWhitespace } from '../utils/whitespace.js';
+import { splitTokenList } from '../utils/list.js';
 import { validateURL } from '../syntaxes/url.js';
 
 function validateAtRuleDocument(atRule, options, root) {
@@ -34,71 +35,50 @@ function validateAtRuleDocument(atRule, options, root) {
             tokens
         };
     }
-    if (tokens[0].typ == EnumToken.CommaTokenType) {
+    for (const t of splitTokenList(tokens)) {
+        if (t.length != 1) {
+            return {
+                valid: ValidationLevel.Drop,
+                matches: [],
+                node: t[0] ?? atRule,
+                syntax: '@document',
+                error: 'unexpected token',
+                tokens
+            };
+        }
         // @ts-ignore
-        return {
-            valid: ValidationLevel.Drop,
-            matches: [],
-            node: tokens[0],
-            syntax: '@document',
-            error: 'unexpected token',
-            tokens
-        };
-    }
-    while (tokens.length > 0) {
-        if (tokens[0].typ == EnumToken.CommentTokenType) {
-            tokens.shift();
-            consumeWhitespace(tokens);
+        if ((t[0].typ != EnumToken.FunctionTokenType && t[0].typ != EnumToken.UrlFunctionTokenType) || !['url', 'url-prefix', 'domain', 'media-document', 'regexp'].some((f) => f.localeCompare(t[0].val, undefined, { sensitivity: 'base' }) == 0)) {
+            return {
+                valid: ValidationLevel.Drop,
+                matches: [],
+                node: t[0] ?? atRule,
+                syntax: '@document',
+                error: 'expecting any of url-prefix(), domain(), media-document(), regexp() but found ' + t[0].val,
+                tokens
+            };
         }
-        result = validateURL(tokens[0]);
-        if (result.valid == ValidationLevel.Valid) {
-            tokens.shift();
-            consumeWhitespace(tokens);
+        if (t[0].typ == EnumToken.UrlFunctionTokenType) {
+            result = validateURL(t[0]);
+            if (result?.valid == ValidationLevel.Drop) {
+                return result;
+            }
             continue;
         }
-        if (tokens[0].typ == EnumToken.FunctionTokenType) {
-            if (!['url-prefix', 'domain', 'media-document', 'regexp'].some((t) => t.localeCompare(tokens[0].val, undefined, { sensitivity: 'base' }) == 0)) {
-                // @ts-ignore
-                return {
-                    valid: ValidationLevel.Drop,
-                    matches: [],
-                    node: tokens[0],
-                    syntax: '@document',
-                    error: 'unexpected token',
-                    tokens
-                };
-            }
-            const children = tokens[0].chi.slice();
-            consumeWhitespace(children);
-            if (children.length == 0) {
-                // @ts-ignore
-                return {
-                    valid: ValidationLevel.Drop,
-                    matches: [],
-                    node: tokens[0],
-                    syntax: '@document',
-                    error: 'expecting string argument',
-                    tokens
-                };
-            }
-            if (children[0].typ == EnumToken.StringTokenType) {
-                children.shift();
-                consumeWhitespace(children);
-            }
-            if (children.length > 0) {
-                // @ts-ignore
-                return {
-                    valid: ValidationLevel.Drop,
-                    matches: [],
-                    node: children[0],
-                    syntax: '@document',
-                    error: 'unexpected token',
-                    tokens
-                };
-            }
-            tokens.shift();
-            consumeWhitespace(tokens);
+        const children = t[0].chi.slice();
+        consumeWhitespace(children);
+        if (children.length != 1 || (children[0].typ != EnumToken.StringTokenType && children[0].typ != EnumToken.UrlTokenTokenType)) {
+            // @ts-ignore
+            return {
+                valid: ValidationLevel.Drop,
+                matches: [],
+                node: tokens[0],
+                syntax: '@document',
+                error: 'expecting string argument',
+                tokens
+            };
         }
+        tokens.shift();
+        consumeWhitespace(tokens);
     }
     // @ts-ignore
     return {