@tbela99/css-parser 0.0.1-alpha3 → 0.0.1-alpha5

package/dist/lib/parser/parse.js

@@ -1,7 +1,7 @@
-import { isWhiteSpace, isPseudo, isAtKeyword, isFunction, isNumber, isDimension, parseDimension, isPercentage, isIdent, isHash, isNewLine, isIdentStart, isHexColor } from './utils/syntax.js';
+import { isWhiteSpace, isDigit, isPseudo, isAtKeyword, isFunction, isNumber, isDimension, parseDimension, isPercentage, isIdent, isHash, isNewLine, isIdentStart, isHexColor } from './utils/syntax.js';
 import { renderToken } from '../renderer/render.js';
 import { COLORS_NAMES } from '../renderer/utils/color.js';
-import { hasDeclaration, deduplicateRule, deduplicate } from './deduplicate.js';
+import { deduplicate } from './deduplicate.js';
 
 const urlTokenMatcher = /^(["']?)[a-zA-Z0-9_/.-][a-zA-Z0-9_/:.#?-]+(\1)$/;
 const funcLike = ['Start-parens', 'Func', 'UrlFunc', 'Pseudo-class-func'];
@@ -11,6 +11,7 @@ async function parse(iterator, opt = {}) {
         src: '',
         sourcemap: false,
         compress: false,
+        nestingRules: false,
         resolveImport: false,
         resolveUrls: false,
         removeEmpty: true,
@@ -281,11 +282,16 @@ async function parse(iterator, opt = {}) {
                         try {
                             // @ts-ignore
                             const root = await options.load(url, options.src).then((src) => {
-                                bytesIn += src.length;
-                                // @ts-ignore
-                                return parse(src, Object.assign({}, options, { src: options.resolve(url, options.src).absolute }));
+                                return parse(src, Object.assign({}, options, {
+                                    compress: false,
+                                    // @ts-ignore
+                                    src: options.resolve(url, options.src).absolute
+                                }));
                             });
-                            context.chi.push(...root.ast.chi);
+                            bytesIn += root.bytesIn;
+                            if (root.ast.chi.length > 0) {
+                                context.chi.push(...root.ast.chi);
+                            }
                             if (root.errors.length > 0) {
                                 errors.push(...root.errors);
                             }
@@ -300,20 +306,16 @@ async function parse(iterator, opt = {}) {
             // https://www.w3.org/TR/css-nesting-1/#conditionals
             // allowed nesting at-rules
             // there must be a top level rule in the stack
+            const raw = tokens.reduce((acc, curr) => {
+                acc.push(renderToken(curr, { removeComments: true }));
+                return acc;
+            }, []);
             const node = {
                 typ: 'AtRule',
                 nam: renderToken(atRule, { removeComments: true }),
-                val: tokens.reduce((acc, curr, index, array) => {
-                    if (curr.typ == 'Whitespace') {
-                        if (array[index + 1]?.typ == 'Start-parens' ||
-                            array[index - 1]?.typ == 'End-parens' ||
-                            array[index - 1]?.typ == 'Func') {
-                            return acc;
-                        }
-                    }
-                    return acc + renderToken(curr, { removeComments: true });
-                }, '')
+                val: raw.join('')
             };
+            Object.defineProperty(node, 'raw', { enumerable: false, writable: false, value: raw });
             if (delim.typ == 'Block-start') {
                 node.chi = [];
             }
@@ -338,23 +340,33 @@ async function parse(iterator, opt = {}) {
                         return null;
                     }
                 }
-                const sel = parseTokens(tokens, { compress: options.compress }).map(curr => renderToken(curr, { compress: true }));
-                const raw = [...new Set(sel.reduce((acc, curr) => {
-                        if (curr == ',') {
-                            acc.push('');
-                        }
-                        else {
-                            acc[acc.length - 1] += curr;
+                const uniq = new Map;
+                parseTokens(tokens, 'Rule', { compress: options.compress }).reduce((acc, curr, index, array) => {
+                    if (curr.typ == 'Whitespace') {
+                        if (array[index - 1]?.val == '+' || array[index + 1]?.val == '+') {
+                            return acc;
                         }
-                        return acc;
-                    }, ['']))];
+                    }
+                    let t = renderToken(curr, { compress: true });
+                    if (t == ',') {
+                        acc.push([]);
+                    }
+                    else {
+                        acc[acc.length - 1].push(t);
+                    }
+                    return acc;
+                }, [[]]).reduce((acc, curr) => {
+                    acc.set(curr.join(''), curr);
+                    return acc;
+                }, uniq);
                 const node = {
                     typ: 'Rule',
                     // @ts-ignore
-                    sel: raw.join(','),
+                    sel: [...uniq.keys()].join(','),
                     chi: []
                 };
-                Object.defineProperty(node, 'raw', { enumerable: false, get: () => raw });
+                let raw = [...uniq.values()];
+                Object.defineProperty(node, 'raw', { enumerable: false, writable: true, value: raw });
                 loc = {
                     sta: position,
                     src
@@ -378,7 +390,13 @@ async function parse(iterator, opt = {}) {
                     }
                     if (tokens[i].typ == 'Colon') {
                         name = tokens.slice(0, i);
-                        value = parseTokens(tokens.slice(i + 1), { parseColor: true, src: options.src, resolveUrls: options.resolveUrls, resolve: options.resolve, cwd: options.cwd });
+                        value = parseTokens(tokens.slice(i + 1), 'Declaration', {
+                            parseColor: true,
+                            src: options.src,
+                            resolveUrls: options.resolveUrls,
+                            resolve: options.resolve,
+                            cwd: options.cwd
+                        });
                     }
                 }
                 if (name == null) {
@@ -397,11 +415,6 @@ async function parse(iterator, opt = {}) {
                         }
                     }
                 }
-                // if (name.length == 0) {
-                //
-                //     errors.push({action: 'drop', message: 'invalid declaration', location: {src, ...position}});
-                //     return null;
-                // }
                 if (value == null) {
                     errors.push({ action: 'drop', message: 'invalid declaration', location: { src, ...position } });
                     return null;
@@ -424,16 +437,6 @@ async function parse(iterator, opt = {}) {
                     errors.push({ action: 'drop', message: 'invalid declaration', location: { src, ...position } });
                     return null;
                 }
-                // // location not needed for declaration
-                // loc = <Location>{
-                //     sta: position,
-                //     src
-                // };
-                //
-                // if (options.sourcemap) {
-                //
-                //     node.loc = loc
-                // }
                 // @ts-ignore
                 context.chi.push(node);
                 return null;
@@ -476,7 +479,6 @@ async function parse(iterator, opt = {}) {
         position.ind = ind;
         position.lin = lin;
         position.col = col == 0 ? 1 : col;
-        // }
     }
     function consumeWhiteSpace() {
         let count = 0;
@@ -658,11 +660,6 @@ async function parse(iterator, opt = {}) {
                         }
                     }
                 }
-                // else {
-                //
-                //     pushToken(getType(buffer));
-                //     buffer = '';
-                // }
                 break;
             case '<':
                 if (buffer.length > 0) {
@@ -713,6 +710,9 @@ async function parse(iterator, opt = {}) {
                 break;
             case '~':
             case '|':
+                if (tokens.at(-1)?.typ == 'Whitespace') {
+                    tokens.pop();
+                }
                 if (buffer.length > 0) {
                     pushToken(getType(buffer));
                     buffer = '';
@@ -734,15 +734,32 @@ async function parse(iterator, opt = {}) {
                     break;
                 }
                 pushToken(getType(buffer));
+                while (isWhiteSpace(value.charCodeAt(0))) {
+                    value = next();
+                }
                 buffer = value;
                 break;
             case '>':
+                if (buffer !== '') {
+                    pushToken(getType(buffer));
+                    buffer = '';
+                }
                 if (tokens[tokens.length - 1]?.typ == 'Whitespace') {
                     tokens.pop();
                 }
                 pushToken({ typ: 'Gt' });
                 consumeWhiteSpace();
                 break;
+            case '.':
+                const codepoint = peek().charCodeAt(0);
+                if (!isDigit(codepoint) && buffer !== '') {
+                    pushToken(getType(buffer));
+                    buffer = value;
+                    break;
+                }
+                buffer += value;
+                break;
+            case '+':
             case ':':
             case ',':
             case '=':
@@ -754,12 +771,11 @@ async function parse(iterator, opt = {}) {
                     buffer += value + next();
                     break;
                 }
-                // if (value == ',' && tokens[tokens.length - 1]?.typ == 'Whitespace') {
-                //
-                //     tokens.pop();
-                // }
                 pushToken(getType(value));
                 buffer = '';
+                if (value == '+' && isWhiteSpace(peek().charCodeAt(0))) {
+                    pushToken(getType(next()));
+                }
                 while (isWhiteSpace(peek().charCodeAt(0))) {
                     next();
                 }
@@ -780,7 +796,7 @@ async function parse(iterator, opt = {}) {
                     pushToken(getType(buffer));
                     buffer = '';
                     const token = tokens[tokens.length - 1];
-                    if (token.typ == 'UrlFunc' /* && token.chi == 'url' */) {
+                    if (token.typ == 'UrlFunc') {
                         // consume either string or url token
                         let whitespace = '';
                         value = peek();
@@ -897,15 +913,6 @@ async function parse(iterator, opt = {}) {
                     if (options.removeEmpty && previousNode != null && previousNode.chi.length == 0 && context.chi[context.chi.length - 1] == previousNode) {
                         context.chi.pop();
                     }
-                    else if (previousNode != null && previousNode != ast && options.compress) {
-                        // @ts-ignore
-                        if (hasDeclaration(previousNode)) {
-                            deduplicateRule(previousNode);
-                        }
-                        else {
-                            deduplicate(previousNode, options);
-                        }
-                    }
                     tokens.length = 0;
                     map.clear();
                     buffer = '';
@@ -940,28 +947,22 @@ async function parse(iterator, opt = {}) {
         await parseNode(tokens);
     }
     if (options.compress) {
-        while (stack.length > 0) {
-            const node = stack.pop();
-            if (hasDeclaration(node)) {
-                deduplicateRule(node, options);
-            }
-            else {
-                deduplicate(node, options);
-            }
-        }
         if (ast.chi.length > 0) {
-            deduplicate(ast, options);
+            deduplicate(ast, options, true);
         }
     }
     return { ast, errors, bytesIn };
 }
-function parseTokens(tokens, options = {}) {
+function parseTokens(tokens, nodeType, options = {}) {
     for (let i = 0; i < tokens.length; i++) {
         const t = tokens[i];
         if (t.typ == 'Whitespace' && ((i == 0 ||
             i + 1 == tokens.length ||
-            ['Comma', 'Start-parens'].includes(tokens[i + 1].typ) ||
-            (i > 0 && funcLike.includes(tokens[i - 1].typ))))) {
+            ['Comma'].includes(tokens[i + 1].typ) ||
+            (i > 0 &&
+                tokens[i + 1]?.typ != 'Literal' &&
+                funcLike.includes(tokens[i - 1].typ) &&
+                !['var', 'calc'].includes(tokens[i - 1].val))))) {
             tokens.splice(i--, 1);
             continue;
         }
@@ -1006,7 +1007,7 @@ function parseTokens(tokens, options = {}) {
                 if (t.chi.length > 1) {
                     /*(<AttrToken>t).chi =*/
                     // @ts-ignore
-                    parseTokens(t.chi, options);
+                    parseTokens(t.chi, t.typ, options);
                 }
                 // @ts-ignore
                 t.chi.forEach(val => {
@@ -1059,9 +1060,9 @@ function parseTokens(tokens, options = {}) {
                 // @ts-ignore
                 t.chi.pop();
             }
+            let isColor = true;
             // @ts-ignore
             if (options.parseColor && ['rgb', 'rgba', 'hsl', 'hsla', 'hwb', 'device-cmyk'].includes(t.val)) {
-                let isColor = true;
                 // @ts-ignore
                 for (const v of t.chi) {
                     if (v.typ == 'Func' && v.val == 'var') {
@@ -1069,37 +1070,38 @@ function parseTokens(tokens, options = {}) {
                         break;
                     }
                 }
-                if (!isColor) {
-                    continue;
-                }
-                // @ts-ignore
-                t.typ = 'Color';
-                // @ts-ignore
-                t.kin = t.val;
-                // @ts-ignore
-                let m = t.chi.length;
-                while (m-- > 0) {
+                if (isColor) {
+                    // @ts-ignore
+                    t.typ = 'Color';
                     // @ts-ignore
-                    if (t.chi[m].typ == 'Literal') {
+                    t.kin = t.val;
+                    // @ts-ignore
+                    let m = t.chi.length;
+                    while (m-- > 0) {
                         // @ts-ignore
-                        if (t.chi[m + 1]?.typ == 'Whitespace') {
+                        if (t.chi[m].typ == 'Literal') {
                             // @ts-ignore
-                            t.chi.splice(m + 1, 1);
-                        }
-                        // @ts-ignore
-                        if (t.chi[m - 1]?.typ == 'Whitespace') {
+                            if (t.chi[m + 1]?.typ == 'Whitespace') {
+                                // @ts-ignore
+                                t.chi.splice(m + 1, 1);
+                            }
                             // @ts-ignore
-                            t.chi.splice(m - 1, 1);
-                            m--;
+                            if (t.chi[m - 1]?.typ == 'Whitespace') {
+                                // @ts-ignore
+                                t.chi.splice(m - 1, 1);
+                                m--;
+                            }
                         }
                     }
+                    continue;
                 }
             }
-            else if (t.typ == 'UrlFunc') {
+            if (t.typ == 'UrlFunc') {
                 // @ts-ignore
                 if (t.chi[0]?.typ == 'String') {
                     // @ts-ignore
                     const value = t.chi[0].val.slice(1, -1);
+                    // @ts-ignore
                     if (t.chi[0].val.slice(1, 5) != 'data:' && urlTokenMatcher.test(value)) {
                         // @ts-ignore
                         t.chi[0].typ = 'Url-token';
@@ -1117,7 +1119,7 @@ function parseTokens(tokens, options = {}) {
             // @ts-ignore
             if (t.chi.length > 0) {
                 // @ts-ignore
-                parseTokens(t.chi, options);
+                parseTokens(t.chi, t.typ, options);
                 if (t.typ == 'Pseudo-class-func' && t.val == ':is' && options.compress) {
                     //
                     const count = t.chi.filter(t => t.typ != 'Comment').length;

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

@@ -49,7 +49,7 @@ function isIdent(name) {
     // -
     if (codepoint == 0x2d) {
         const nextCodepoint = name.charCodeAt(1);
-        if (nextCodepoint == null) {
+        if (Number.isNaN(nextCodepoint)) {
             return false;
         }
         // -
@@ -98,6 +98,9 @@ function isNumber(name) {
     let codepoint = name.charCodeAt(0);
     let i = 0;
     const j = name.length;
+    if (j == 1 && !isDigit(codepoint)) {
+        return false;
+    }
     // '+' '-'
     if ([0x2b, 0x2d].includes(codepoint)) {
         i++;
@@ -241,7 +244,9 @@ function isNewLine(codepoint) {
     return codepoint == 0xa || codepoint == 0xc || codepoint == 0xd;
 }
 function isWhiteSpace(codepoint) {
-    return codepoint == 0x9 || codepoint == 0x20 || isNewLine(codepoint);
+    return codepoint == 0x9 || codepoint == 0x20 ||
+        // isNewLine
+        codepoint == 0xa || codepoint == 0xc || codepoint == 0xd;
 }
 
 export { isAngle, isAtKeyword, isDigit, isDimension, isFrequency, isFunction, isHash, isHexColor, isIdent, isIdentCodepoint, isIdentStart, isLength, isNewLine, isNumber, isPercentage, isPseudo, isResolution, isTime, isWhiteSpace, parseDimension };

package/dist/lib/renderer/render.js

@@ -1,6 +1,5 @@
 import { rgb2Hex, hsl2Hex, hwb2hex, cmyk2hex, NAMES_COLORS } from './utils/color.js';
 
-const indents = [];
 function render(data, opt = {}) {
     const options = Object.assign(opt.compress ? {
         indent: '',
@@ -18,24 +17,12 @@ function render(data, opt = {}) {
                 return acc;
             }
         }
-        if (options.compress && curr.typ == 'Whitespace') {
-            if (original[index + 1]?.typ == 'Start-parens' ||
-                (index > 0 && (original[index - 1].typ == 'Pseudo-class-func' ||
-                    original[index - 1].typ == 'End-parens' ||
-                    original[index - 1].typ == 'UrlFunc' ||
-                    original[index - 1].typ == 'Func' ||
-                    (original[index - 1].typ == 'Color' &&
-                        original[index - 1].kin != 'hex' &&
-                        original[index - 1].kin != 'lit')))) {
-                return acc;
-            }
-        }
         return acc + renderToken(curr, options);
     }
-    return { code: doRender(data, options, reducer) };
+    return { code: doRender(data, options, reducer, 0) };
 }
 // @ts-ignore
-function doRender(data, options, reducer, level = 0) {
+function doRender(data, options, reducer, level = 0, indents = []) {
     if (indents.length < level + 1) {
         indents.push(options.indent.repeat(level));
     }
@@ -49,7 +36,7 @@ function doRender(data, options, reducer, level = 0) {
             return options.removeComments ? '' : data.val;
         case 'StyleSheet':
             return data.chi.reduce((css, node) => {
-                const str = doRender(node, options, reducer, level);
+                const str = doRender(node, options, reducer, level, indents);
                 if (str === '') {
                     return css;
                 }
@@ -76,7 +63,7 @@ function doRender(data, options, reducer, level = 0) {
                     str = `@${node.nam} ${node.val};`;
                 }
                 else {
-                    str = doRender(node, options, reducer, level + 1);
+                    str = doRender(node, options, reducer, level + 1, indents);
                 }
                 if (css === '') {
                     return str;
@@ -84,8 +71,7 @@ function doRender(data, options, reducer, level = 0) {
                 if (str === '') {
                     return css;
                 }
-                if (str !== '')
-                    return `${css}${options.newLine}${indentSub}${str}`;
+                return `${css}${options.newLine}${indentSub}${str}`;
             }, '');
             if (children.endsWith(';')) {
                 children = children.slice(0, -1);
@@ -137,11 +123,15 @@ function renderToken(token, options = {}) {
             if (token.kin == 'hex' || token.kin == 'lit') {
                 return token.val;
             }
+        case 'Start-parens':
+            if (!('chi' in token)) {
+                return '(';
+            }
         case 'Func':
         case 'UrlFunc':
         case 'Pseudo-class-func':
             // @ts-ignore
-            return (options.compress && 'Pseudo-class-func' == token.typ && token.val.slice(0, 2) == '::' ? token.val.slice(1) : token.val) + '(' + token.chi.reduce((acc, curr) => {
+            return ( /* options.compress && 'Pseudo-class-func' == token.typ && token.val.slice(0, 2) == '::' ? token.val.slice(1) :*/token.val ?? '') + '(' + token.chi.reduce((acc, curr) => {
                 if (options.removeComments && curr.typ == 'Comment') {
                     if (!options.preserveLicense || !curr.val.startsWith('/*!')) {
                         return acc;
@@ -157,8 +147,6 @@ function renderToken(token, options = {}) {
             return '<';
         case 'Gt':
             return '>';
-        case 'Start-parens':
-            return '(';
         case 'End-parens':
             return ')';
         case 'Attr-start':
@@ -234,7 +222,7 @@ function renderToken(token, options = {}) {
         case 'String':
         case 'Iden':
         case 'Delim':
-            return options.compress && 'Pseudo-class' == token.typ && '::' == token.val.slice(0, 2) ? token.val.slice(1) : token.val;
+            return /* options.compress && 'Pseudo-class' == token.typ && '::' == token.val.slice(0, 2) ? token.val.slice(1) :  */ token.val;
     }
     throw new Error(`unexpected token ${JSON.stringify(token, null, 1)}`);
 }

package/dist/lib/walker/walk.js

@@ -6,7 +6,7 @@ function* doWalk(node, parent, root) {
     yield { node, parent, root };
     if ('chi' in node) {
         for (const child of node.chi) {
-            yield* doWalk(child, node, (root == null ? node : root));
+            yield* doWalk(child, node, (root ?? node));
         }
     }
 }

package/dist/node/index.js

@@ -6,12 +6,10 @@ import { resolve } from '../lib/fs/resolve.js';
 export { dirname, matchUrl } from '../lib/fs/resolve.js';
 
 function parse(iterator, opt = {}) {
-    Object.assign(opt, { load, resolve, cwd: opt.cwd ?? process.cwd() });
-    return parse$1(iterator, opt);
+    return parse$1(iterator, Object.assign(opt, { load, resolve, cwd: opt.cwd ?? process.cwd() }));
 }
 function transform(css, options = {}) {
-    Object.assign(options, { load, resolve, cwd: options.cwd ?? process.cwd() });
-    return transform$1(css, options);
+    return transform$1(css, Object.assign(options, { load, resolve, cwd: options.cwd ?? process.cwd() }));
 }
 
 export { load, parse, resolve, transform };

package/dist/web/index.js

@@ -1,5 +1,5 @@
 import { parse as parse$1 } from '../lib/parser/parse.js';
-export { deduplicate, deduplicateRule, hasDeclaration } from '../lib/parser/deduplicate.js';
+export { deduplicate, deduplicateRule, hasDeclaration, reduceSelector } from '../lib/parser/deduplicate.js';
 export { render, renderToken } from '../lib/renderer/render.js';
 export { walk } from '../lib/walker/walk.js';
 import { transform as transform$1 } from '../lib/transform.js';
@@ -8,20 +8,18 @@ import { resolve, dirname } from '../lib/fs/resolve.js';
 export { matchUrl } from '../lib/fs/resolve.js';
 
 function parse(iterator, opt = {}) {
-    Object.assign(opt, {
+    return parse$1(iterator, Object.assign(opt, {
         load,
         resolve,
         cwd: opt.cwd ?? self.location.pathname.endsWith('/') ? self.location.pathname : dirname(self.location.pathname)
-    });
-    return parse$1(iterator, opt);
+    }));
 }
 function transform(css, options = {}) {
-    Object.assign(options, {
+    return transform$1(css, Object.assign(options, {
         load,
         resolve,
         cwd: options.cwd ?? self.location.pathname.endsWith('/') ? self.location.pathname : dirname(self.location.pathname)
-    });
-    return transform$1(css, options);
+    }));
 }
 
 export { dirname, load, parse, resolve, transform };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tbela99/css-parser",
   "description": "CSS parser for node and the browser",
-  "version": "0.0.1-alpha3",
+  "version": "0.0.1-alpha5",
   "exports": {
     ".": "./dist/index.js",
     "./web": "./dist/web/index.js",
@@ -11,8 +11,9 @@
   "typings": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
-    "debug": "web-test-runner \"test/**/*.web.js\" --manual --open --node-resolve --root-dir=./test/",
-    "test": "web-test-runner \"test/**/*.web.js\" --node-resolve --root-dir=./test/; mocha --reporter-options='maxDiffSize=181920' \"test/**/*.test.js\""
+    "debug": "web-test-runner \"test/**/*.web.js\" --manual --open --node-resolve --root-dir=.",
+    "test": "web-test-runner \"test/**/*.web-spec.js\" --node-resolve --root-dir=.; mocha --reporter-options='maxDiffSize=181920' \"test/**/*.spec.js\"",
+    "test:cov": "web-test-runner \"test/**/*.web-spec.js\" --node-resolve --root-dir=.  --coverage; c8 --reporter=html --reporter=text --reporter=json-summary mocha --reporter-options='maxDiffSize=181920' \"test/**/*.spec.js\""
   },
   "repository": {
     "type": "git",
@@ -43,7 +44,7 @@
     "@types/node": "^18.15.10",
     "@web/test-runner": "^0.16.1",
     "@webref/css": "^6.5.9",
-    "glob": "^10.3.0",
+    "c8": "^8.0.1",
     "mocha": "^10.2.0",
     "rollup": "^3.20.1",
     "rollup-plugin-dts": "^5.3.0",