@tbela99/css-parser 0.0.1-rc1 → 0.0.1-rc3

package/README.md

@@ -1,4 +1,4 @@
-[![cov](https://tbela99.github.io/css-parser/badges/coverage.svg)](https://github.com/tbela99/css-parser/actions)
+[![npm](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Ftbela99%2Fcss-parser%2Fmaster%2Fpackage.json&query=version&logo=npm&label=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40tbela99%2Fcss-parser)](https://www.npmjs.com/package/@tbela99/css-parser) [![cov](https://tbela99.github.io/css-parser/badges/coverage.svg)](https://github.com/tbela99/css-parser/actions)
 
 # css-parser
 
@@ -12,15 +12,15 @@ $ npm install @tbela99/css-parser
 
 ### Features
 
-- [x] fault tolerant parser, will try to fix invalid tokens according to the CSS syntax module 3 recommendations.
-- [x] efficient minification, see benchmark.
-- [x] replace @import at-rules with actual css content of the imported rule
-- [x] CSS nesting: automatically create nested rules.
-- [x] works the same way in node and web browser
+- fault tolerant parser, will try to fix invalid tokens according to the CSS syntax module 3 recommendations.
+- efficient minification, see [benchmark](https://tbela99.github.io/css-parser/benchmark/index.html)
+- replace @import at-rules with actual css content of the imported rule
+- automatically generate nested css rules
+- works the same way in node and web browser
 
 ### Performance
 
-- [x] flatten @import
+- flatten @import
 
 ## Transform
 
@@ -50,7 +50,7 @@ Include ParseOptions and RenderOptions
 
 - src: string, optional. css file location to be used with sourcemap.
 - minify: boolean, optional. default to _true_. optimize ast.
-- nestingRules: boolean, optional. automatically nest rules.
+- nestingRules: boolean, optional. automatically generated nested rules.
 - removeEmpty: boolean, remove empty nodes from the ast.
 - location: boolean, optional. includes node location in the ast, required for sourcemap generation.
 - cwd: string, optional. the current working directory. when specified url() are resolved using this value
@@ -79,7 +79,7 @@ parse(css, parseOptions = {})
 
 ````javascript
 
-const {ast, errors} = await parse(css);
+const {ast, errors, stats} = await parse(css);
 ````
 
 ## Rendering
@@ -96,7 +96,7 @@ render(ast, RenderOptions = {});
 import {render} from '@tbela99/css-parser';
 
 // minified
-const {code} = render(ast, {minify: true});
+const {code, stats} = render(ast, {minify: true});
 
 console.log(code);
 ```
@@ -160,6 +160,62 @@ Single JavaScript file
 <script src="dist/index-umd-web.js"></script>
 ```
 
+## Example
+
+### Automatic CSS Nesting
+
+CSS
+
+```css
+
+table.colortable td {
+  text-align:center;
+}
+table.colortable td.c {
+  text-transform:uppercase;
+}
+table.colortable td:first-child, table.colortable td:first-child+td {
+  border:1px solid black;
+}
+table.colortable th {
+  text-align:center;
+  background:black;
+  color:white;
+}
+```
+
+Javascript
+```javascript
+import {parse, render} from '@tbela99/css-parser';
+
+
+const options = {minify: true, nestingRules: true};
+
+const {code} = await parse(css, options).then(result => render(result.ast, {minify: false}));
+//
+console.debug(code);
+```
+
+Result
+```css
+table.colortable {
+ & td {
+  text-align: center;
+  &.c {
+   text-transform: uppercase
+  }
+  &:first-child,&:first-child+td {
+   border: 1px solid #000
+  }
+ }
+ & th {
+  text-align: center;
+  background: #000;
+  color: #fff
+ }
+}
+```
+
 ## AST
 
 ### Comment
@@ -188,4 +244,4 @@ Single JavaScript file
 ### AtRuleStyleSheet
 
 - typ: string 'Stylesheet'
-- chi: array of children
+- chi: array of children

package/dist/index-umd-web.js

@@ -93,10 +93,7 @@
         if (name.charAt(0) != '#') {
             return false;
         }
-        if (isIdent(name.charAt(1))) {
-            return true;
-        }
-        return true;
+        return isIdent(name.charAt(1));
     }
     function isNumber(name) {
         if (name.length == 0) {
@@ -1072,6 +1069,21 @@
 
     const getConfig = () => config$1;
 
+    const funcList = ['clamp', 'calc'];
+    function matchType(val, properties) {
+        if (val.typ == 'Iden' && properties.keywords.includes(val.val) ||
+            (properties.types.includes(val.typ))) {
+            return true;
+        }
+        if (val.typ == 'Number' && val.val == '0') {
+            return properties.types.some(type => type == 'Length' || type == 'Angle');
+        }
+        if (val.typ == 'Func' && funcList.includes(val.val)) {
+            return val.chi.every((t => ['Literal', 'Comma', 'Whitespace', 'Start-parens', 'End-parens'].includes(t.typ) || matchType(t, properties)));
+        }
+        return false;
+    }
+
     // name to color
     const COLORS_NAMES = Object.seal({
         'aliceblue': '#f0f8ff',
@@ -1566,6 +1578,7 @@
     }
 
     function render(data, opt = {}) {
+        const startTime = performance.now();
         const options = Object.assign(opt.minify ?? true ? {
             indent: '',
             newLine: '',
@@ -1584,7 +1597,9 @@
             }
             return acc + renderToken(curr, options);
         }
-        return { code: doRender(data, options, reducer, 0) };
+        return { code: doRender(data, options, reducer, 0), stats: {
+                total: `${(performance.now() - startTime).toFixed(2)}ms`
+            } };
     }
     // @ts-ignore
     function doRender(data, options, reducer, level = 0, indents = []) {
@@ -1597,6 +1612,8 @@
         const indent = indents[level];
         const indentSub = indents[level + 1];
         switch (data.typ) {
+            case 'Declaration':
+                return `${data.nam}:${options.indent}${data.val.reduce((acc, curr) => acc + renderToken(curr), '')}`;
             case 'Comment':
                 return options.removeComments ? '' : data.val;
             case 'StyleSheet':
@@ -1613,7 +1630,7 @@
             case 'AtRule':
             case 'Rule':
                 if (data.typ == 'AtRule' && !('chi' in data)) {
-                    return `${indent}@${data.nam} ${data.val};`;
+                    return `${indent}@${data.nam}${data.val === '' ? '' : options.indent || ' '}${data.val};`;
                 }
                 // @ts-ignore
                 let children = data.chi.reduce((css, node) => {
@@ -1622,10 +1639,14 @@
                         str = options.removeComments ? '' : node.val;
                     }
                     else if (node.typ == 'Declaration') {
+                        if (node.val.length == 0) {
+                            console.error(`invalid declaration`, node);
+                            return '';
+                        }
                         str = `${node.nam}:${options.indent}${node.val.reduce(reducer, '').trimEnd()};`;
                     }
                     else if (node.typ == 'AtRule' && !('chi' in node)) {
-                        str = `@${node.nam} ${node.val};`;
+                        str = `${data.val === '' ? '' : options.indent || ' '}${data.val};`;
                     }
                     else {
                         str = doRender(node, options, reducer, level + 1, indents);
@@ -1642,7 +1663,7 @@
                     children = children.slice(0, -1);
                 }
                 if (data.typ == 'AtRule') {
-                    return `@${data.nam}${data.val ? ' ' + data.val + options.indent : ''}{${options.newLine}` + (children === '' ? '' : indentSub + children + options.newLine) + indent + `}`;
+                    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 + `}`;
         }
@@ -1792,7 +1813,9 @@
             case 'Delim':
                 return /* options.minify && '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)}`);
+        console.error(`unexpected token ${JSON.stringify(token, null, 1)}`);
+        // throw  new Error(`unexpected token ${JSON.stringify(token, null, 1)}`);
+        return '';
     }
 
     function eq(a, b) {
@@ -1998,17 +2021,6 @@
         }
     }
 
-    function matchType(val, properties) {
-        if (val.typ == 'Iden' && properties.keywords.includes(val.val) ||
-            (properties.types.includes(val.typ))) {
-            return true;
-        }
-        if (val.typ == 'Number' && val.val == '0') {
-            return properties.types.some(type => type == 'Length' || type == 'Angle');
-        }
-        return false;
-    }
-
     const propertiesConfig = getConfig();
     class PropertyMap {
         config;
@@ -2023,6 +2035,9 @@
             this.pattern = config.pattern.split(/\s/);
         }
         add(declaration) {
+            for (const val of declaration.val) {
+                Object.defineProperty(val, 'propertyName', { enumerable: false, writable: true, value: declaration.nam });
+            }
             if (declaration.nam == this.config.shorthand) {
                 this.declarations = new Map;
                 this.declarations.set(declaration.nam, declaration);
@@ -2056,7 +2071,7 @@
                                     i--;
                                     continue;
                                 }
-                                if (matchType(acc[i], props)) {
+                                if (('propertyName' in acc[i] && acc[i].propertyName == property) || matchType(acc[i], props)) {
                                     if ('prefix' in props && props.previous != null && !(props.previous in tokens)) {
                                         return acc;
                                     }
@@ -2190,10 +2205,12 @@
             }
             else {
                 let count = 0;
+                let match;
                 const separator = this.config.separator;
                 const tokens = {};
                 // @ts-ignore
-                /* const valid: string[] =*/ Object.entries(this.config.properties).reduce((acc, curr) => {
+                /* const valid: string[] =*/
+                Object.entries(this.config.properties).reduce((acc, curr) => {
                     if (!this.declarations.has(curr[0])) {
                         if (curr[1].required) {
                             acc.push(curr[0]);
@@ -2202,33 +2219,39 @@
                     }
                     let current = 0;
                     const props = this.config.properties[curr[0]];
-                    const declaration = this.declarations.get(curr[0]);
-                    // @ts-ignore
-                    for (const val of (declaration instanceof PropertySet ? [...declaration][0] : declaration).val) {
-                        if (separator != null && separator.typ == val.typ && eq(separator, val)) {
-                            current++;
-                            if (tokens[curr[0]].length == current) {
-                                tokens[curr[0]].push([]);
+                    const properties = this.declarations.get(curr[0]);
+                    for (const declaration of [(properties instanceof PropertySet ? [...properties][0] : properties)]) {
+                        // @ts-ignore
+                        for (const val of declaration.val) {
+                            if (separator != null && separator.typ == val.typ && eq(separator, val)) {
+                                current++;
+                                if (tokens[curr[0]].length == current) {
+                                    tokens[curr[0]].push([]);
+                                }
+                                continue;
                             }
-                            continue;
-                        }
-                        if (val.typ == 'Whitespace' || val.typ == 'Comment') {
-                            continue;
-                        }
-                        if (props.multiple && props.separator != null && props.separator.typ == val.typ && eq(props.separator, val)) {
-                            continue;
-                        }
-                        if (matchType(val, curr[1])) {
-                            if (!(curr[0] in tokens)) {
-                                tokens[curr[0]] = [[]];
+                            if (val.typ == 'Whitespace' || val.typ == 'Comment') {
+                                continue;
+                            }
+                            if (props.multiple && props.separator != null && props.separator.typ == val.typ && eq(props.separator, val)) {
+                                continue;
+                            }
+                            match = matchType(val, curr[1]);
+                            if (isShorthand) {
+                                isShorthand = match;
+                            }
+                            if (('propertyName' in val && val.propertyName == property) || match) {
+                                if (!(curr[0] in tokens)) {
+                                    tokens[curr[0]] = [[]];
+                                }
+                                // is default value
+                                tokens[curr[0]][current].push(val);
+                                // continue;
+                            }
+                            else {
+                                acc.push(curr[0]);
+                                break;
                             }
-                            // is default value
-                            tokens[curr[0]][current].push(val);
-                            // continue;
-                        }
-                        else {
-                            acc.push(curr[0]);
-                            break;
                         }
                     }
                     if (count == 0) {
@@ -2237,7 +2260,10 @@
                     return acc;
                 }, []);
                 count++;
-                if (!Object.values(tokens).every(v => v.length == count)) {
+                if (!isShorthand || Object.entries(this.config.properties).some(entry => {
+                    // missing required property
+                    return entry[1].required && !(entry[0] in tokens);
+                }) || !Object.values(tokens).every(v => v.length == count)) {
                     // @ts-ignore
                     iterable = this.declarations.values();
                 }
@@ -2581,7 +2607,7 @@
                 // @ts-ignore
                 return null;
             }
-            return { result, node1: exchanged ? node2 : node1, node2: exchanged ? node2 : node2 };
+            return { result, node1: exchanged ? node2 : node1, node2: exchanged ? node1 : node2 };
         }
         function matchSelectors(selector1, selector2, parentType) {
             let match = [[]];
@@ -2769,11 +2795,27 @@
                 if (node.typ == 'AtRule' && node.nam == 'font-face') {
                     continue;
                 }
-                if (node.typ == 'AtRule' && node.val == 'all') {
+                if (node.typ == 'AtRule') {
+                    if (node.nam == 'media' && node.val == 'all') {
+                        // @ts-ignore
+                        ast.chi?.splice(i, 1, ...node.chi);
+                        i--;
+                        continue;
+                    }
+                    // console.debug({previous, node});
                     // @ts-ignore
-                    ast.chi?.splice(i, 1, ...node.chi);
-                    i--;
-                    continue;
+                    if (previous?.typ == 'AtRule' &&
+                        previous.nam == node.nam &&
+                        previous.val == node.val) {
+                        if ('chi' in node) {
+                            // @ts-ignore
+                            previous.chi.push(...node.chi);
+                        }
+                        // else {
+                        ast?.chi?.splice(i--, 1);
+                        continue;
+                        // }
+                    }
                 }
                 // @ts-ignore
                 if (node.typ == 'Rule') {
@@ -3288,10 +3330,11 @@
             }
             buffer += quoteStr;
             while (value = peek()) {
-                if (ind >= iterator.length) {
-                    yield pushToken(buffer, hasNewLine ? 'Bad-string' : 'Unclosed-string');
-                    break;
-                }
+                // if (ind >= iterator.length) {
+                //
+                //     yield pushToken(buffer, hasNewLine ? 'Bad-string' : 'Unclosed-string');
+                //     break;
+                // }
                 if (value == '\\') {
                     const sequence = peek(6);
                     let escapeSequence = '';
@@ -3314,7 +3357,7 @@
                     // not hex or new line
                     // @ts-ignore
                     if (i == 1 && !isNewLine(codepoint)) {
-                        buffer += sequence[i];
+                        buffer += value + sequence[i];
                         next(2);
                         continue;
                     }
@@ -3334,11 +3377,12 @@
                         continue;
                     }
                     // buffer += value;
-                    if (ind >= iterator.length) {
-                        // drop '\\' at the end
-                        yield pushToken(buffer);
-                        break;
-                    }
+                    // if (ind >= iterator.length) {
+                    //
+                    //     // drop '\\' at the end
+                    //     yield pushToken(buffer);
+                    //     break;
+                    // }
                     buffer += next(2);
                     continue;
                 }
@@ -3507,7 +3551,7 @@
                         buffer = '';
                         break;
                     }
-                    buffer += value;
+                    buffer += prev() + value;
                     break;
                 case '"':
                 case "'":
@@ -3709,6 +3753,7 @@
      * @param opt
      */
     async function parse$1(iterator, opt = {}) {
+        const startTime = performance.now();
         const errors = [];
         const options = {
             src: '',
@@ -3847,7 +3892,7 @@
                                         src: options.resolve(url, options.src).absolute
                                     }));
                                 });
-                                bytesIn += root.bytesIn;
+                                bytesIn += root.stats.bytesIn;
                                 if (root.ast.chi.length > 0) {
                                     context.chi.push(...root.ast.chi);
                                 }
@@ -3893,13 +3938,6 @@
                 // rule
                 if (delim.typ == 'Block-start') {
                     const position = map.get(tokens[0]);
-                    // if (context.typ == 'Rule') {
-                    //
-                    //     if (tokens[0]?.typ == 'Iden') {
-                    //         errors.push({action: 'drop', message: 'invalid nesting rule', location: {src, ...position}});
-                    //         return null;
-                    //     }
-                    // }
                     const uniq = new Map;
                     parseTokens(tokens, { minify: options.minify }).reduce((acc, curr, index, array) => {
                         if (curr.typ == 'Whitespace') {
@@ -4075,21 +4113,30 @@
         if (tokens.length > 0) {
             await parseNode(tokens);
         }
+        const endParseTime = performance.now();
         if (options.minify) {
             if (ast.chi.length > 0) {
                 minify(ast, options, true);
             }
         }
-        return { ast, errors, bytesIn };
+        const endTime = performance.now();
+        return {
+            ast, errors, stats: {
+                bytesIn,
+                parse: `${(endParseTime - startTime).toFixed(2)}ms`,
+                minify: `${(endTime - endParseTime).toFixed(2)}ms`,
+                total: `${(endTime - startTime).toFixed(2)}ms`
+            }
+        };
     }
     function parseString(src, options = { location: false }) {
-        return [...tokenize(src)].map(t => {
+        return parseTokens([...tokenize(src)].map(t => {
             const token = getTokenType(t.token, t.hint);
             if (options.location) {
                 Object.assign(token, { loc: t.position });
             }
             return token;
-        });
+        }));
     }
     function getTokenType(val, hint) {
         if (val === '' && hint == null) {
@@ -4431,19 +4478,17 @@
     async function transform$1(css, options = {}) {
         options = { minify: true, removeEmpty: true, ...options };
         const startTime = performance.now();
-        const parseResult = await parse$1(css, options);
-        const renderTime = performance.now();
-        const rendered = render(parseResult.ast, options);
-        const endTime = performance.now();
-        return {
-            ...parseResult, ...rendered, stats: {
-                bytesIn: parseResult.bytesIn,
-                bytesOut: rendered.code.length,
-                parse: `${(renderTime - startTime).toFixed(2)}ms`,
-                render: `${(endTime - renderTime).toFixed(2)}ms`,
-                total: `${(endTime - startTime).toFixed(2)}ms`
-            }
-        };
+        return parse$1(css, options).then((parseResult) => {
+            const rendered = render(parseResult.ast, options);
+            return {
+                ...parseResult, ...rendered, stats: {
+                    bytesOut: rendered.code.length,
+                    ...parseResult.stats,
+                    render: rendered.stats.total,
+                    total: `${(performance.now() - startTime).toFixed(2)}ms`
+                }
+            };
+        });
     }
 
     const matchUrl = /^(https?:)?\/\//;
@@ -4602,6 +4647,7 @@
     exports.isTime = isTime;
     exports.isWhiteSpace = isWhiteSpace;
     exports.load = load;
+    exports.matchType = matchType;
     exports.matchUrl = matchUrl;
     exports.minify = minify;
     exports.minifyRule = minifyRule;