@tbela99/css-parser 0.1.0 → 0.3.0

package/dist/lib/parser/tokenize.js

@@ -16,7 +16,6 @@ function* tokenize(stream) {
     };
     let value;
     let buffer = '';
-    // let input: string = '';
     function consumeWhiteSpace() {
         let count = 0;
         while (isWhiteSpace(stream.charAt(count + ind + 1).charCodeAt(0))) {
@@ -26,7 +25,7 @@ function* tokenize(stream) {
         return count;
     }
     function pushToken(token, hint) {
-        const result = { token, hint, position: { ...position }, bytesIn: ind };
+        const result = { token, hint, position: { ...position }, bytesIn: ind + 1 };
         position.ind = ind;
         position.lin = lin;
         position.col = col == 0 ? 1 : col;
@@ -223,8 +222,10 @@ function* tokenize(stream) {
                 // EOF
                 if (!(value = next())) {
                     // end of stream ignore \\
-                    yield pushToken(buffer);
-                    buffer = '';
+                    if (buffer.length > 0) {
+                        yield pushToken(buffer);
+                        buffer = '';
+                    }
                     break;
                 }
                 buffer += prev() + value;
@@ -233,29 +234,51 @@ function* tokenize(stream) {
             case "'":
                 yield* consumeString(value);
                 break;
+            case '^':
             case '~':
             case '|':
+            case '$':
+                if (value == '|' && peek() == '|') {
+                    next();
+                    yield pushToken('', EnumToken.ColumnCombinatorTokenType);
+                    buffer = '';
+                    break;
+                }
                 if (buffer.length > 0) {
                     yield pushToken(buffer);
                     buffer = '';
                 }
                 buffer += value;
-                if (!(value = next())) {
+                if (!(value = peek())) {
                     yield pushToken(buffer);
                     buffer = '';
                     break;
                 }
-                if (value == '=') {
-                    buffer += value;
-                    yield pushToken(buffer, buffer[0] == '~' ? EnumToken.IncludesTokenType : EnumToken.DashMatchTokenType);
+                // ~=
+                // ^=
+                // $=
+                // |=
+                if (peek() == '=') {
+                    next();
+                    switch (buffer.charAt(0)) {
+                        case '~':
+                            yield pushToken(buffer, EnumToken.IncludeMatchTokenType);
+                            break;
+                        case '^':
+                            yield pushToken(buffer, EnumToken.StartMatchTokenType);
+                            break;
+                        case '$':
+                            yield pushToken(buffer, EnumToken.EndMatchTokenType);
+                            break;
+                        case '|':
+                            yield pushToken(buffer, EnumToken.DashMatchTokenType);
+                            break;
+                    }
                     buffer = '';
                     break;
                 }
                 yield pushToken(buffer);
-                while (isWhiteSpace(value.charCodeAt(0))) {
-                    value = next();
-                }
-                buffer = value;
+                buffer = '';
                 break;
             case '>':
                 if (buffer !== '') {
@@ -289,7 +312,13 @@ function* tokenize(stream) {
                     yield pushToken(buffer);
                     buffer = '';
                 }
-                if (value == ':' && ':' == peek()) {
+                const val = peek();
+                if (val == '=') {
+                    next();
+                    yield pushToken(value + val, EnumToken.ContainMatchTokenType);
+                    break;
+                }
+                if (value == ':' && ':' == val) {
                     buffer += value + next();
                     break;
                 }

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

@@ -0,0 +1,67 @@
+import { EnumToken } from '../../ast/types.js';
+import '../../ast/minify.js';
+import { walkValues } from '../../ast/walk.js';
+import '../parse.js';
+import { isWhiteSpace } from './syntax.js';
+import '../../renderer/utils/color.js';
+import '../../renderer/sourcemap/lib/encode.js';
+
+function parseDeclaration(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) {
+        errors.push({
+            action: 'drop',
+            message: 'doParse: invalid declaration',
+            location: { src, ...position }
+        });
+        return null;
+    }
+    for (const { value: val, parent } of walkValues(node.val, node)) {
+        if (val.typ == EnumToken.AttrTokenType && val.chi.every((t) => [EnumToken.IdenTokenType, EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType].includes(t.typ))) {
+            // @ts-ignore
+            val.typ = EnumToken.IdenListTokenType;
+        }
+        else if (val.typ == EnumToken.StringTokenType && (node.nam == 'grid' || node.nam == 'grid-template-areas' || node.nam == 'grid-template-rows' || node.nam == 'grid-template-columns')) {
+            val.val = val.val.at(0) + parseGridTemplate(val.val.slice(1, -1)) + val.val.at(-1);
+            // @ts-ignore
+            const array = parent?.chi ?? node.val;
+            const index = array.indexOf(val);
+            if (index > 0 && array[index - 1].typ == EnumToken.WhitespaceTokenType) {
+                array.splice(index - 1, 1);
+            }
+        }
+    }
+    return node;
+}
+function parseGridTemplate(template) {
+    let result = '';
+    let buffer = '';
+    for (let i = 0; i < template.length; i++) {
+        const char = template[i];
+        if (isWhiteSpace(char.codePointAt(0))) {
+            while (i + 1 < template.length && isWhiteSpace(template[i + 1].codePointAt(0))) {
+                i++;
+            }
+            result += buffer + ' ';
+            buffer = '';
+        }
+        else if (char == '.') {
+            while (i + 1 < template.length && template[i + 1] == '.') {
+                i++;
+            }
+            if (isWhiteSpace((result.at(-1)?.codePointAt(0)))) {
+                result = result.slice(0, -1);
+            }
+            result += buffer + char;
+            buffer = '';
+        }
+        else {
+            buffer += char;
+        }
+    }
+    return buffer.length > 0 ? result + buffer : result;
+}
+
+export { parseDeclaration };

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

@@ -37,10 +37,37 @@ function isColor(token) {
         // named color
         return token.val.toLowerCase() in COLORS_NAMES;
     }
+    let isLegacySyntax = false;
     if (token.typ == EnumToken.FunctionTokenType && token.chi.length > 0 && colorsFunc.includes(token.val)) {
+        const keywords = ['from', 'none'];
+        if (['rgb', 'hsl', 'hwb'].includes(token.val)) {
+            keywords.push('a', ...token.val.split(''));
+        }
+        // console.debug(JSON.stringify({token}, null, 1));
         // @ts-ignore
         for (const v of token.chi) {
-            if (![EnumToken.NumberTokenType, EnumToken.AngleTokenType, EnumToken.PercentageTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType, EnumToken.LiteralTokenType].includes(v.typ)) {
+            // console.debug(JSON.stringify({v}, null, 1));
+            if (v.typ == EnumToken.CommaTokenType) {
+                isLegacySyntax = true;
+            }
+            if (v.typ == EnumToken.IdenTokenType) {
+                if (!(keywords.includes(v.val) || v.val.toLowerCase() in COLORS_NAMES)) {
+                    return false;
+                }
+                if (keywords.includes(v.val)) {
+                    if (isLegacySyntax) {
+                        return false;
+                    }
+                    if (v.val == 'from' && ['rgba', 'hsla'].includes(token.val)) {
+                        return false;
+                    }
+                }
+                continue;
+            }
+            if (v.typ == EnumToken.FunctionTokenType && (v.val == 'calc' || 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;
             }
         }
@@ -200,6 +227,9 @@ function isDimension(name) {
 function isPercentage(name) {
     return name.endsWith('%') && isNumber(name.slice(0, -1));
 }
+function isFlex(name) {
+    return name.endsWith('fr') && isNumber(name.slice(0, -2));
+}
 function parseDimension(name) {
     let index = name.length;
     while (index--) {
@@ -267,4 +297,4 @@ function isWhiteSpace(codepoint) {
         codepoint == 0xa || codepoint == 0xc || codepoint == 0xd;
 }
 
-export { isAngle, isAtKeyword, isColor, isDigit, isDimension, isFrequency, isFunction, isHash, isHexColor, isIdent, isIdentCodepoint, isIdentStart, isLength, isNewLine, isNonPrintable, isNumber, isPercentage, isPseudo, isResolution, isTime, isWhiteSpace, parseDimension };
+export { isAngle, isAtKeyword, isColor, isDigit, isDimension, isFlex, isFrequency, isFunction, isHash, isHexColor, isIdent, isIdentCodepoint, isIdentStart, isLength, isNewLine, isNonPrintable, isNumber, isPercentage, isPseudo, isResolution, isTime, isWhiteSpace, parseDimension };

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

@@ -4,6 +4,7 @@ import '../parse.js';
 import '../../renderer/utils/color.js';
 import '../../renderer/sourcemap/lib/encode.js';
 
+// https://www.w3.org/TR/css-values-4/#math-function
 const funcList = ['clamp', 'calc'];
 function matchType(val, properties) {
     if (val.typ == EnumToken.IdenTokenType && properties.keywords.includes(val.val) ||
@@ -19,8 +20,12 @@ function matchType(val, properties) {
             return typ == EnumToken.LengthTokenType || typ == EnumToken.AngleTokenType;
         });
     }
-    if (val.typ == EnumToken.FunctionTokenType && funcList.includes(val.val)) {
-        return val.chi.every((t => [EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType, EnumToken.StartParensTokenType, EnumToken.EndParensTokenType].includes(t.typ) || matchType(t, properties)));
+    if (val.typ == EnumToken.FunctionTokenType) {
+        if (funcList.includes(val.val)) {
+            return val.chi.every((t => [EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType, EnumToken.StartParensTokenType, EnumToken.EndParensTokenType].includes(t.typ) || matchType(t, properties)));
+        }
+        // match type defined like function 'symbols()', 'url()', 'attr()' etc.
+        // return properties.types.includes((<FunctionToken>val).val + '()')
     }
     return false;
 }

package/dist/lib/renderer/render.js

@@ -1,14 +1,16 @@
-import { getAngle, COLORS_NAMES, rgb2Hex, hsl2Hex, hwb2hex, cmyk2hex, NAMES_COLORS } from './utils/color.js';
+import { getAngle, clamp, COLORS_NAMES, NAMES_COLORS } from './utils/color.js';
+import { rgb2Hex, hsl2Hex, hwb2hex, cmyk2hex } from './utils/hex.js';
 import { EnumToken } from '../ast/types.js';
 import '../ast/minify.js';
 import { expand } from '../ast/expand.js';
 import { SourceMap } from './sourcemap/sourcemap.js';
 import '../parser/parse.js';
-import { isNewLine } from '../parser/utils/syntax.js';
+import { isColor, isNewLine } from '../parser/utils/syntax.js';
+import { parseRelativeColor } from './utils/calccolor.js';
 
 const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk'];
 function reduceNumber(val) {
-    val = (+val).toString();
+    val = String(+val);
     if (val === '0') {
         return '0';
     }
@@ -47,7 +49,7 @@ function doRender(data, options = {}) {
             newLine: '\n',
             compress: false,
             removeComments: false,
-        }), sourcemap: false, colorConvert: true, expandNestingRules: false, preserveLicense: false, ...options
+        }), sourcemap: false, convertColor: true, expandNestingRules: false, preserveLicense: false, ...options
     };
     const startTime = performance.now();
     const errors = [];
@@ -76,21 +78,19 @@ function doRender(data, options = {}) {
     }
     if (sourcemap != null) {
         result.map = sourcemap.toJSON();
-        // @ts-ignore
-        // result.map.sources = result.map.sources?.map(s => <string>options?.resolve(s, <string>options?.cwd)?.relative)
     }
     return result;
 }
 function updateSourceMap(node, options, cache, sourcemap, position, str) {
-    if ([4 /* NodeType.RuleNodeType */, 3 /* NodeType.AtRuleNodeType */].includes(node.typ)) {
+    if ([EnumToken.RuleNodeType, EnumToken.AtRuleNodeType].includes(node.typ)) {
         let src = node.loc?.src ?? '';
         let output = options.output ?? '';
-        if (src !== '') {
-            if (!(src in cache)) {
-                // @ts-ignore
-                cache[src] = options.resolve(src, options.cwd ?? '').relative;
-            }
+        // if (src !== '') {
+        if (!(src in cache)) {
+            // @ts-ignore
+            cache[src] = options.resolve(src, options.cwd ?? '').relative;
         }
+        // }
         if (!(output in cache)) {
             // @ts-ignore
             cache[output] = options.resolve(output, options.cwd).relative;
@@ -115,16 +115,16 @@ function renderAstNode(data, options, sourcemap, position, errors, reducer, cach
     const indent = indents[level];
     const indentSub = indents[level + 1];
     switch (data.typ) {
-        case 5 /* NodeType.DeclarationNodeType */:
+        case EnumToken.DeclarationNodeType:
             return `${data.nam}:${options.indent}${data.val.reduce(reducer, '')}`;
-        case 0 /* NodeType.CommentNodeType */:
-        case 1 /* NodeType.CDOCOMMNodeType */:
+        case EnumToken.CommentNodeType:
+        case EnumToken.CDOCOMMNodeType:
             if (data.val.startsWith('# sourceMappingURL=')) {
                 // ignore sourcemap
                 return '';
             }
             return !options.removeComments || (options.preserveLicense && data.val.startsWith('/*!')) ? data.val : '';
-        case 2 /* NodeType.StyleSheetNodeType */:
+        case EnumToken.StyleSheetNodeType:
             return data.chi.reduce((css, node) => {
                 const str = renderAstNode(node, options, sourcemap, { ...position }, errors, reducer, cache, level, indents);
                 if (str === '') {
@@ -142,18 +142,18 @@ function renderAstNode(data, options, sourcemap, position, errors, reducer, cach
                 }
                 return `${css}${options.newLine}${str}`;
             }, '');
-        case 3 /* NodeType.AtRuleNodeType */:
-        case 4 /* NodeType.RuleNodeType */:
-            if (data.typ == 3 /* NodeType.AtRuleNodeType */ && !('chi' in data)) {
+        case EnumToken.AtRuleNodeType:
+        case EnumToken.RuleNodeType:
+            if (data.typ == EnumToken.AtRuleNodeType && !('chi' in data)) {
                 return `${indent}@${data.nam}${data.val === '' ? '' : options.indent || ' '}${data.val};`;
             }
             // @ts-ignore
             let children = data.chi.reduce((css, node) => {
                 let str;
-                if (node.typ == 0 /* NodeType.CommentNodeType */) {
+                if (node.typ == EnumToken.CommentNodeType) {
                     str = options.removeComments && (!options.preserveLicense || !node.val.startsWith('/*!')) ? '' : node.val;
                 }
-                else if (node.typ == 5 /* NodeType.DeclarationNodeType */) {
+                else if (node.typ == EnumToken.DeclarationNodeType) {
                     if (node.val.length == 0) {
                         // @ts-ignore
                         errors.push({
@@ -165,7 +165,7 @@ function renderAstNode(data, options, sourcemap, position, errors, reducer, cach
                     }
                     str = `${node.nam}:${options.indent}${node.val.reduce(reducer, '').trimEnd()};`;
                 }
-                else if (node.typ == 3 /* NodeType.AtRuleNodeType */ && !('chi' in node)) {
+                else if (node.typ == EnumToken.AtRuleNodeType && !('chi' in node)) {
                     str = `${data.val === '' ? '' : options.indent || ' '}${data.val};`;
                 }
                 else {
@@ -182,7 +182,7 @@ function renderAstNode(data, options, sourcemap, position, errors, reducer, cach
             if (children.endsWith(';')) {
                 children = children.slice(0, -1);
             }
-            if (data.typ == 3 /* NodeType.AtRuleNodeType */) {
+            if (data.typ == EnumToken.AtRuleNodeType) {
                 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 + `}`;
@@ -201,11 +201,52 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
             return acc + renderToken(curr, options, cache, reducer, errors);
         };
     }
+    if (token.typ == EnumToken.FunctionTokenType && colorsFunc.includes(token.val)) {
+        if (isColor(token)) {
+            // @ts-ignore
+            token.typ = EnumToken.ColorTokenType;
+            if (token.chi[0].typ == EnumToken.IdenTokenType && token.chi[0].val == 'from') {
+                // @ts-ignore
+                token.cal = 'rel';
+            }
+            else {
+                token.chi = token.chi.filter((t) => ![EnumToken.WhitespaceTokenType, EnumToken.CommaTokenType, EnumToken.CommentTokenType].includes(t.typ));
+            }
+        }
+    }
     switch (token.typ) {
         case EnumToken.ListToken:
             return token.chi.reduce((acc, curr) => acc + renderToken(curr, options, cache), '');
         case EnumToken.BinaryExpressionTokenType:
+            if ([EnumToken.Mul, EnumToken.Div].includes(token.op)) {
+                let result = '';
+                if (token.l.typ == EnumToken.BinaryExpressionTokenType &&
+                    [EnumToken.Add, EnumToken.Sub].includes(token.l.op)) {
+                    result = '(' + renderToken(token.l, options, cache) + ')';
+                }
+                else {
+                    result = renderToken(token.l, options, cache);
+                }
+                result += token.op == EnumToken.Mul ? '*' : '/';
+                if (token.r.typ == EnumToken.BinaryExpressionTokenType &&
+                    [EnumToken.Add, EnumToken.Sub].includes(token.r.op)) {
+                    result += '(' + renderToken(token.r, options, cache) + ')';
+                }
+                else {
+                    result += renderToken(token.r, options, cache);
+                }
+                return result;
+            }
             return renderToken(token.l, options, cache) + (token.op == EnumToken.Add ? ' + ' : (token.op == EnumToken.Sub ? ' - ' : (token.op == EnumToken.Mul ? '*' : '/'))) + renderToken(token.r, options, cache);
+        case EnumToken.FractionTokenType:
+            const fraction = renderToken(token.l) + '/' + renderToken(token.r);
+            if (+token.r.val != 0) {
+                const value = reduceNumber(+token.l.val / +token.r.val);
+                if (value.length <= fraction.length) {
+                    return value;
+                }
+            }
+            return fraction;
         case EnumToken.Add:
             return ' + ';
         case EnumToken.Sub:
@@ -215,10 +256,46 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case EnumToken.Div:
             return '/';
         case EnumToken.ColorTokenType:
-            if (options.colorConvert) {
-                if (token.kin == 'lit' && token.val.toLowerCase() == 'currentcolor') {
+            if (options.convertColor) {
+                if (token.cal == 'rel' && ['rgb', 'hsl', 'hwb'].includes(token.val)) {
+                    const chi = token.chi.filter(x => ![
+                        EnumToken.LiteralTokenType, EnumToken.CommaTokenType, EnumToken.WhitespaceTokenType, EnumToken.CommentTokenType
+                    ].includes(x.typ));
+                    const components = parseRelativeColor(token.val.split(''), chi[1], chi[2], chi[3], chi[4], chi[5]);
+                    if (components != null) {
+                        token.chi = Object.values(components);
+                        delete token.cal;
+                    }
+                }
+                if (token.cal) {
+                    let slice = false;
+                    if (token.cal == 'rel') {
+                        const last = token.chi.at(-1);
+                        if ((last.typ == EnumToken.NumberTokenType && last.val == '1') || (last.typ == EnumToken.IdenTokenType && last.val == 'none')) {
+                            const prev = token.chi.at(-2);
+                            if (prev.typ == EnumToken.LiteralTokenType && prev.val == '/') {
+                                slice = true;
+                            }
+                        }
+                    }
+                    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 (acc.length > 0) {
+                            return acc + (['/', ','].includes(acc.at(-1)) ? '' : ' ') + val;
+                        }
+                        return val;
+                    }, '') + ')';
+                }
+                if (token.kin == '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), '') + ')';
+                }
                 let value = token.kin == 'hex' ? token.val.toLowerCase() : (token.kin == 'lit' ? COLORS_NAMES[token.val.toLowerCase()] : '');
                 if (token.val == 'rgb' || token.val == 'rgba') {
                     value = rgb2Hex(token);
@@ -255,24 +332,52 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
             if (token.kin == 'hex' || token.kin == 'lit') {
                 return token.val;
             }
+            if (Array.isArray(token.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), '') + ')';
+            }
         case EnumToken.ParensTokenType:
         case EnumToken.FunctionTokenType:
         case EnumToken.UrlFunctionTokenType:
+        case EnumToken.ImageFunctionTokenType:
+        case EnumToken.TimingFunctionTokenType:
         case EnumToken.PseudoClassFuncTokenType:
+        case EnumToken.TimelineFunctionTokenType:
+        case EnumToken.GridTemplateFuncTokenType:
             if (token.typ == EnumToken.FunctionTokenType &&
                 token.val == 'calc' &&
-                token.chi.length == 1) {
+                token.chi.length == 1 &&
+                token.chi[0].typ != EnumToken.BinaryExpressionTokenType &&
+                token.chi[0].typ != EnumToken.FractionTokenType &&
+                token.chi[0].val?.typ != EnumToken.FractionTokenType) {
                 // calc(200px) => 200px
                 return 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) +
+                renderToken({ typ: token.op }, options, cache, reducer, errors) +
+                renderToken(token.r, options, cache, reducer, errors) +
+                (token.attr ? ' ' + token.attr : '');
+        case EnumToken.NameSpaceAttributeTokenType:
+            return (token.l == null ? '' : renderToken(token.l, options, cache, reducer, errors) + '|') +
+                renderToken(token.r, options, cache, reducer, errors);
+        case EnumToken.BlockStartTokenType:
+            return '{';
+        case EnumToken.BlockEndTokenType:
+            return '}';
         case EnumToken.StartParensTokenType:
             return '(';
-        case EnumToken.IncludesTokenType:
+        case EnumToken.IncludeMatchTokenType:
             return '~=';
         case EnumToken.DashMatchTokenType:
             return '|=';
+        case EnumToken.StartMatchTokenType:
+            return '^=';
+        case EnumToken.EndMatchTokenType:
+            return '$=';
+        case EnumToken.ContainMatchTokenType:
+            return '*=';
         case EnumToken.LtTokenType:
             return '<';
         case EnumToken.LteTokenType:
@@ -281,6 +386,8 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
             return '>';
         case EnumToken.GteTokenType:
             return '>=';
+        case EnumToken.ColumnCombinatorTokenType:
+            return '||';
         case EnumToken.EndParensTokenType:
             return ')';
         case EnumToken.AttrStartTokenType:
@@ -298,6 +405,7 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case EnumToken.ImportantTokenType:
             return '!important';
         case EnumToken.AttrTokenType:
+        case EnumToken.IdenListTokenType:
             return '[' + token.chi.reduce(reducer, '') + ']';
         case EnumToken.TimeTokenType:
         case EnumToken.AngleTokenType:
@@ -305,19 +413,9 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         case EnumToken.DimensionTokenType:
         case EnumToken.FrequencyTokenType:
         case EnumToken.ResolutionTokenType:
-            if (token.val.typ == EnumToken.BinaryExpressionTokenType) {
-                const result = renderToken(token.val, options, cache);
-                if (!('unit' in token)) {
-                    return result;
-                }
-                if (!result.includes(' ')) {
-                    return result + token.unit;
-                }
-                return `(${result})*1${token.unit}`;
-            }
-            let val = reduceNumber(token.val);
+            let val = token.val.typ == EnumToken.FractionTokenType ? renderToken(token.val, options, cache) : reduceNumber(token.val);
             let unit = token.unit;
-            if (token.typ == EnumToken.AngleTokenType) {
+            if (token.typ == EnumToken.AngleTokenType && !val.includes('/')) {
                 const angle = getAngle(token);
                 let v;
                 let value = val + unit;
@@ -374,16 +472,34 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                 }
                 return '0';
             }
-            return val + unit;
+            if (token.typ == EnumToken.TimeTokenType) {
+                if (unit == 'ms') {
+                    // @ts-ignore
+                    const v = reduceNumber(val / 1000);
+                    if (v.length + 1 <= val.length) {
+                        return v + 's';
+                    }
+                    return val + 'ms';
+                }
+                return val + 's';
+            }
+            return val.includes('/') ? val.replace('/', unit + '/') : val + unit;
+        case EnumToken.FlexTokenType:
         case EnumToken.PercentageTokenType:
-            const perc = reduceNumber(token.val);
-            return options.minify && perc == '0' ? '0' : perc + '%';
+            const uni = token.typ == EnumToken.PercentageTokenType ? '%' : 'fr';
+            const perc = token.val.typ == EnumToken.FractionTokenType ? renderToken(token.val, options, cache) : reduceNumber(token.val);
+            return options.minify && perc == '0' ? '0' : (perc.includes('/') ? perc.replace('/', uni + '/') : perc + uni);
         case EnumToken.NumberTokenType:
-            return reduceNumber(token.val);
+            return token.val.typ == EnumToken.FractionTokenType ? renderToken(token.val, options, cache) : reduceNumber(token.val);
         case EnumToken.CommentTokenType:
             if (options.removeComments && (!options.preserveLicense || !token.val.startsWith('/*!'))) {
                 return '';
             }
+        case EnumToken.PseudoClassTokenType:
+            // https://www.w3.org/TR/selectors-4/#single-colon-pseudos
+            if (token.typ == EnumToken.PseudoClassTokenType && ['::before', '::after', '::first-line', '::first-letter'].includes(token.val)) {
+                return token.val.slice(1);
+            }
         case EnumToken.UrlTokenTokenType:
             if (token.typ == EnumToken.UrlTokenTokenType) {
                 if (options.output != null) {
@@ -407,13 +523,13 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                     token.val = cache[token.original];
                 }
             }
-        case EnumToken.AtRuleTokenType:
         case EnumToken.HashTokenType:
-        case EnumToken.PseudoClassTokenType:
-        case EnumToken.LiteralTokenType:
-        case EnumToken.StringTokenType:
         case EnumToken.IdenTokenType:
         case EnumToken.DelimTokenType:
+        case EnumToken.AtRuleTokenType:
+        case EnumToken.StringTokenType:
+        case EnumToken.LiteralTokenType:
+        case EnumToken.DashedIdenTokenType:
             return /* options.minify && 'Pseudo-class' == token.typ && '::' == token.val.slice(0, 2) ? token.val.slice(1) :  */ token.val;
     }
     errors?.push({ action: 'ignore', message: `render: unexpected token ${JSON.stringify(token, null, 1)}` });