@tbela99/css-parser 0.0.1 → 0.2.0

package/dist/lib/renderer/render.js

@@ -1,5 +1,10 @@
 import { getAngle, COLORS_NAMES, rgb2Hex, hsl2Hex, hwb2hex, cmyk2hex, NAMES_COLORS } from './utils/color.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';
 
 const colorsFunc = ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk'];
 function reduceNumber(val) {
@@ -19,35 +24,86 @@ function reduceNumber(val) {
     }
     return val;
 }
-function render(data, opt = {}) {
+function update(position, str) {
+    let i = 0;
+    for (; i < str.length; i++) {
+        if (isNewLine(str[i].charCodeAt(0))) {
+            position.lin++;
+            position.col = 0;
+        }
+        else {
+            position.col++;
+        }
+    }
+}
+function doRender(data, options = {}) {
+    options = {
+        ...(options.minify ?? true ? {
+            indent: '',
+            newLine: '',
+            removeComments: true
+        } : {
+            indent: ' ',
+            newLine: '\n',
+            compress: false,
+            removeComments: false,
+        }), sourcemap: false, colorConvert: true, expandNestingRules: false, preserveLicense: false, ...options
+    };
     const startTime = performance.now();
     const errors = [];
-    const options = Object.assign(opt.minify ?? true ? {
-        indent: '',
-        newLine: '',
-        removeComments: true
-    } : {
-        indent: ' ',
-        newLine: '\n',
-        compress: false,
-        removeComments: false,
-    }, { colorConvert: true, expandNestingRules: false, preserveLicense: false }, opt);
-    return {
-        code: doRender(options.expandNestingRules ? expand(data) : data, options, errors, function reducer(acc, curr) {
-            if (curr.typ == 'Comment' && options.removeComments) {
+    const sourcemap = options.sourcemap ? new SourceMap : null;
+    const cache = Object.create(null);
+    const result = {
+        code: renderAstNode(options.expandNestingRules ? expand(data) : data, options, sourcemap, {
+            ind: 0,
+            lin: 1,
+            col: 1
+        }, errors, function reducer(acc, curr) {
+            if (curr.typ == EnumToken.CommentTokenType && options.removeComments) {
                 if (!options.preserveLicense || !curr.val.startsWith('/*!')) {
                     return acc;
                 }
                 return acc + curr.val;
             }
-            return acc + renderToken(curr, options, reducer, errors);
-        }, 0), errors, stats: {
+            return acc + renderToken(curr, options, cache, reducer, errors);
+        }, cache), errors, stats: {
             total: `${(performance.now() - startTime).toFixed(2)}ms`
         }
     };
+    if (options.output != null) {
+        // @ts-ignore
+        options.output = options.resolve(options.output, options.cwd).absolute;
+    }
+    if (sourcemap != null) {
+        result.map = sourcemap.toJSON();
+    }
+    return result;
+}
+function updateSourceMap(node, options, cache, sourcemap, position, str) {
+    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 (!(output in cache)) {
+            // @ts-ignore
+            cache[output] = options.resolve(output, options.cwd).relative;
+        }
+        // @ts-ignore
+        sourcemap.add({ src: cache[output], sta: { ...position } }, {
+            ...node.loc,
+            // @ts-ignore
+            src: options.resolve(cache[src], options.cwd).relative
+        });
+    }
+    update(position, str);
 }
 // @ts-ignore
-function doRender(data, options, errors, reducer, level = 0, indents = []) {
+function renderAstNode(data, options, sourcemap, position, errors, reducer, cache, level = 0, indents = []) {
     if (indents.length < level + 1) {
         indents.push(options.indent.repeat(level));
     }
@@ -57,46 +113,61 @@ function doRender(data, options, errors, reducer, level = 0, indents = []) {
     const indent = indents[level];
     const indentSub = indents[level + 1];
     switch (data.typ) {
-        case 'Declaration':
+        case EnumToken.DeclarationNodeType:
             return `${data.nam}:${options.indent}${data.val.reduce(reducer, '')}`;
-        case 'Comment':
-        case 'CDOCOMM':
+        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 'StyleSheet':
+        case EnumToken.StyleSheetNodeType:
             return data.chi.reduce((css, node) => {
-                const str = doRender(node, options, errors, reducer, level, indents);
+                const str = renderAstNode(node, options, sourcemap, { ...position }, errors, reducer, cache, level, indents);
                 if (str === '') {
                     return css;
                 }
                 if (css === '') {
+                    if (sourcemap != null) {
+                        updateSourceMap(node, options, cache, sourcemap, position, str);
+                    }
                     return str;
                 }
+                if (sourcemap != null) {
+                    update(position, options.newLine);
+                    updateSourceMap(node, options, cache, sourcemap, position, str);
+                }
                 return `${css}${options.newLine}${str}`;
             }, '');
-        case 'AtRule':
-        case 'Rule':
-            if (data.typ == 'AtRule' && !('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 == 'Comment') {
+                if (node.typ == EnumToken.CommentNodeType) {
                     str = options.removeComments && (!options.preserveLicense || !node.val.startsWith('/*!')) ? '' : node.val;
                 }
-                else if (node.typ == 'Declaration') {
+                else if (node.typ == EnumToken.DeclarationNodeType) {
                     if (node.val.length == 0) {
                         // @ts-ignore
-                        errors.push({ action: 'ignore', message: `render: invalid declaration ${JSON.stringify(node)}`, location: node.loc });
+                        errors.push({
+                            action: 'ignore',
+                            message: `render: invalid declaration ${JSON.stringify(node)}`,
+                            location: node.loc
+                        });
                         return '';
                     }
                     str = `${node.nam}:${options.indent}${node.val.reduce(reducer, '').trimEnd()};`;
                 }
-                else if (node.typ == 'AtRule' && !('chi' in node)) {
+                else if (node.typ == EnumToken.AtRuleNodeType && !('chi' in node)) {
                     str = `${data.val === '' ? '' : options.indent || ' '}${data.val};`;
                 }
                 else {
-                    str = doRender(node, options, errors, reducer, level + 1, indents);
+                    str = renderAstNode(node, options, sourcemap, { ...position }, errors, reducer, cache, level + 1, indents);
                 }
                 if (css === '') {
                     return str;
@@ -109,28 +180,68 @@ function doRender(data, options, errors, reducer, level = 0, indents = []) {
             if (children.endsWith(';')) {
                 children = children.slice(0, -1);
             }
-            if (data.typ == 'AtRule') {
+            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 + `}`;
     }
     return '';
 }
-function renderToken(token, options = {}, reducer, errors) {
+function renderToken(token, options = {}, cache = Object.create(null), reducer, errors) {
     if (reducer == null) {
         reducer = function (acc, curr) {
-            if (curr.typ == 'Comment' && options.removeComments) {
+            if (curr.typ == EnumToken.CommentTokenType && options.removeComments) {
                 if (!options.preserveLicense || !curr.val.startsWith('/*!')) {
                     return acc;
                 }
                 return acc + curr.val;
             }
-            return acc + renderToken(curr, options, reducer, errors);
+            return acc + renderToken(curr, options, cache, reducer, errors);
         };
     }
     switch (token.typ) {
-        case 'Color':
-            if (options.minify || options.colorConvert) {
+        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:
+            return ' - ';
+        case EnumToken.Mul:
+            return '*';
+        case EnumToken.Div:
+            return '/';
+        case EnumToken.ColorTokenType:
+            if (options.colorConvert) {
                 if (token.kin == 'lit' && token.val.toLowerCase() == 'currentcolor') {
                     return 'currentcolor';
                 }
@@ -170,54 +281,85 @@ function renderToken(token, options = {}, reducer, errors) {
             if (token.kin == 'hex' || token.kin == 'lit') {
                 return token.val;
             }
-        case 'Start-parens':
-            if (!('chi' in token)) {
-                return '(';
+        case EnumToken.ParensTokenType:
+        case EnumToken.FunctionTokenType:
+        case EnumToken.UrlFunctionTokenType:
+        case EnumToken.ImageFunctionTokenType:
+        case EnumToken.PseudoClassFuncTokenType:
+        case EnumToken.TimingFunctionTokenType:
+        case EnumToken.TimelineFunctionTokenType:
+            if (token.typ == EnumToken.FunctionTokenType &&
+                token.val == 'calc' &&
+                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), '');
             }
-        case 'Func':
-        case 'UrlFunc':
-        case 'Pseudo-class-func':
             // @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 'Includes':
+        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.IncludeMatchTokenType:
             return '~=';
-        case 'Dash-match':
+        case EnumToken.DashMatchTokenType:
             return '|=';
-        case 'Lt':
+        case EnumToken.StartMatchTokenType:
+            return '^=';
+        case EnumToken.EndMatchTokenType:
+            return '$=';
+        case EnumToken.ContainMatchTokenType:
+            return '*=';
+        case EnumToken.LtTokenType:
             return '<';
-        case 'Lte':
+        case EnumToken.LteTokenType:
             return '<=';
-        case 'Gt':
+        case EnumToken.GtTokenType:
             return '>';
-        case 'Gte':
+        case EnumToken.GteTokenType:
             return '>=';
-        case 'End-parens':
+        case EnumToken.ColumnCombinatorTokenType:
+            return '||';
+        case EnumToken.EndParensTokenType:
             return ')';
-        case 'Attr-start':
+        case EnumToken.AttrStartTokenType:
             return '[';
-        case 'Attr-end':
+        case EnumToken.AttrEndTokenType:
             return ']';
-        case 'Whitespace':
+        case EnumToken.WhitespaceTokenType:
             return ' ';
-        case 'Colon':
+        case EnumToken.ColonTokenType:
             return ':';
-        case 'Semi-colon':
+        case EnumToken.SemiColonTokenType:
             return ';';
-        case 'Comma':
+        case EnumToken.CommaTokenType:
             return ',';
-        case 'Important':
+        case EnumToken.ImportantTokenType:
             return '!important';
-        case 'Attr':
+        case EnumToken.AttrTokenType:
             return '[' + token.chi.reduce(reducer, '') + ']';
-        case 'Time':
-        case 'Angle':
-        case 'Length':
-        case 'Dimension':
-        case 'Frequency':
-        case 'Resolution':
-            let val = reduceNumber(token.val);
+        case EnumToken.TimeTokenType:
+        case EnumToken.AngleTokenType:
+        case EnumToken.LengthTokenType:
+        case EnumToken.DimensionTokenType:
+        case EnumToken.FrequencyTokenType:
+        case EnumToken.ResolutionTokenType:
+            let val = token.val.typ == EnumToken.FractionTokenType ? renderToken(token.val, options, cache) : reduceNumber(token.val);
             let unit = token.unit;
-            if (token.typ == 'Angle') {
+            if (token.typ == EnumToken.AngleTokenType && !val.includes('/')) {
                 const angle = getAngle(token);
                 let v;
                 let value = val + unit;
@@ -262,40 +404,67 @@ function renderToken(token, options = {}, reducer, errors) {
                 }
             }
             if (val === '0') {
-                if (token.typ == 'Time') {
+                if (token.typ == EnumToken.TimeTokenType) {
                     return '0s';
                 }
-                if (token.typ == 'Frequency') {
+                if (token.typ == EnumToken.FrequencyTokenType) {
                     return '0Hz';
                 }
                 // @ts-ignore
-                if (token.typ == 'Resolution') {
+                if (token.typ == EnumToken.ResolutionTokenType) {
                     return '0x';
                 }
                 return '0';
             }
-            return val + unit;
-        case 'Perc':
-            const perc = reduceNumber(token.val);
-            return options.minify && perc == '0' ? '0' : perc + '%';
-        case 'Number':
-            return reduceNumber(token.val);
-        case 'Comment':
+            return val.includes('/') ? val.replace('/', unit + '/') : val + unit;
+        case EnumToken.PercentageTokenType:
+            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('/', '%/') : perc + '%');
+        case EnumToken.NumberTokenType:
+            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 'Url-token':
-        case 'At-rule':
-        case 'Hash':
-        case 'Pseudo-class':
-        case 'Literal':
-        case 'String':
-        case 'Iden':
-        case 'Delim':
+        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) {
+                    if (!('original' in token)) {
+                        // do not modify original token
+                        token = { ...token };
+                        Object.defineProperty(token, 'original', { enumerable: false, writable: false, value: token.val });
+                    }
+                    // @ts-ignore
+                    if (!(token.original in cache)) {
+                        let output = options.output ?? '';
+                        const key = output + 'abs';
+                        if (!(key in cache)) {
+                            // @ts-ignore
+                            cache[key] = options.dirname(options.resolve(output, options.cwd).absolute);
+                        }
+                        // @ts-ignore
+                        cache[token.original] = options.resolve(token.original, cache[key]).relative;
+                    }
+                    // @ts-ignore
+                    token.val = cache[token.original];
+                }
+            }
+        case EnumToken.HashTokenType:
+        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)}` });
     return '';
 }
 
-export { colorsFunc, render, renderToken };
+export { colorsFunc, doRender, reduceNumber, renderToken };

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

@@ -0,0 +1,37 @@
+// from https://github.com/Rich-Harris/vlq/tree/master
+// credit: Rich Harris
+const integer_to_char = {};
+let i = 0;
+for (const char of 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=') {
+    integer_to_char[i++] = char;
+}
+function encode(value) {
+    if (typeof value === 'number') {
+        return encode_integer(value);
+    }
+    let result = '';
+    for (let i = 0; i < value.length; i += 1) {
+        result += encode_integer(value[i]);
+    }
+    return result;
+}
+function encode_integer(num) {
+    let result = '';
+    if (num < 0) {
+        num = (-num << 1) | 1;
+    }
+    else {
+        num <<= 1;
+    }
+    do {
+        let clamped = num & 31;
+        num >>>= 5;
+        if (num > 0) {
+            clamped |= 32;
+        }
+        result += integer_to_char[clamped];
+    } while (num > 0);
+    return result;
+}
+
+export { encode };

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

@@ -0,0 +1,58 @@
+import { encode } from './lib/encode.js';
+
+class SourceMap {
+    #version = 3;
+    #sources = [];
+    #map = new Map;
+    #line = -1;
+    lastLocation = null;
+    add(source, original) {
+        if (original.src !== '') {
+            if (!this.#sources.includes(original.src)) {
+                this.#sources.push(original.src);
+            }
+            const line = source.sta.lin - 1;
+            let record;
+            if (line > this.#line) {
+                this.#line = line;
+            }
+            if (!this.#map.has(line)) {
+                record = [Math.max(0, source.sta.col - 1), this.#sources.indexOf(original.src), original.sta.lin - 1, original.sta.col - 1];
+                this.#map.set(line, [record]);
+            }
+            else {
+                const arr = this.#map.get(line);
+                record = [Math.max(0, source.sta.col - 1 - arr[0][0]), this.#sources.indexOf(original.src) - arr[0][1], original.sta.lin - 1, original.sta.col - 1];
+                arr.push(record);
+            }
+            if (this.lastLocation != null) {
+                record[2] -= this.lastLocation.sta.lin - 1;
+                record[3] -= this.lastLocation.sta.col - 1;
+            }
+            this.lastLocation = original;
+        }
+    }
+    toUrl() {
+        // /*# sourceMappingURL = ${url} */
+        return `data:application/json,${encodeURIComponent(JSON.stringify(this.toJSON()))}`;
+    }
+    toJSON() {
+        const mappings = [];
+        let i = 0;
+        for (; i <= this.#line; i++) {
+            if (!this.#map.has(i)) {
+                mappings.push('');
+            }
+            else {
+                mappings.push(this.#map.get(i).reduce((acc, curr) => acc + (acc === '' ? '' : ',') + encode(curr), ''));
+            }
+        }
+        return {
+            version: this.#version,
+            sources: this.#sources.slice(),
+            mappings: mappings.join(';')
+        };
+    }
+}
+
+export { SourceMap };