@tbela99/css-parser 0.1.0 → 0.2.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/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

@@ -76,21 +76,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 +113,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 +140,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 +163,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 +180,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 + `}`;
@@ -205,7 +203,35 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         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:
@@ -258,21 +284,45 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
         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.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 +331,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:
@@ -305,19 +357,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 +416,21 @@ function renderToken(token, options = {}, cache = Object.create(null), reducer,
                 }
                 return '0';
             }
-            return val + unit;
+            return val.includes('/') ? val.replace('/', unit + '/') : val + unit;
         case EnumToken.PercentageTokenType:
-            const perc = reduceNumber(token.val);
-            return options.minify && perc == '0' ? '0' : perc + '%';
+            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 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 +454,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)}` });

package/dist/node/index.js

@@ -1,18 +1,14 @@
-export { EnumToken, NodeType } from '../lib/ast/types.js';
-export { combinators, hasDeclaration, minify, reduceSelector, splitRule } from '../lib/ast/minify.js';
+export { EnumToken } from '../lib/ast/types.js';
+export { minify } from '../lib/ast/minify.js';
 export { walk, walkValues } from '../lib/ast/walk.js';
-export { expand, replaceCompound } from '../lib/ast/expand.js';
+export { expand } from '../lib/ast/expand.js';
 import { doRender } from '../lib/renderer/render.js';
-export { colorsFunc, reduceNumber, renderToken } from '../lib/renderer/render.js';
+export { renderToken } from '../lib/renderer/render.js';
 import { doParse } from '../lib/parser/parse.js';
-export { parseString, parseTokens, urlTokenMatcher } from '../lib/parser/parse.js';
-export { tokenize } from '../lib/parser/tokenize.js';
-export { isAngle, isAtKeyword, isColor, isDigit, isDimension, isFrequency, isFunction, isHash, isHexColor, isIdent, isIdentCodepoint, isIdentStart, isLength, isNewLine, isNonPrintable, isNumber, isPercentage, isPseudo, isResolution, isTime, isWhiteSpace, parseDimension } from '../lib/parser/utils/syntax.js';
-export { getConfig } from '../lib/parser/utils/config.js';
-export { funcList, matchType } from '../lib/parser/utils/type.js';
-import { load } from './load.js';
+export { parseString, parseTokens } from '../lib/parser/parse.js';
+import '../lib/renderer/utils/color.js';
 import { resolve, dirname } from '../lib/fs/resolve.js';
-export { matchUrl } from '../lib/fs/resolve.js';
+import { load } from './load.js';
 
 function render(data, options = {}) {
     return doRender(data, Object.assign(options, { load, resolve, dirname, cwd: options.cwd ?? process.cwd() }));
@@ -39,4 +35,4 @@ async function transform(css, options = {}) {
     });
 }
 
-export { dirname, doParse, doRender, load, parse, render, resolve, transform };
+export { dirname, load, parse, render, resolve, transform };

package/dist/web/index.js

@@ -1,18 +1,14 @@
-export { EnumToken, NodeType } from '../lib/ast/types.js';
-export { combinators, hasDeclaration, minify, reduceSelector, splitRule } from '../lib/ast/minify.js';
+export { EnumToken } from '../lib/ast/types.js';
+export { minify } from '../lib/ast/minify.js';
 export { walk, walkValues } from '../lib/ast/walk.js';
-export { expand, replaceCompound } from '../lib/ast/expand.js';
+export { expand } from '../lib/ast/expand.js';
 import { doRender } from '../lib/renderer/render.js';
-export { colorsFunc, reduceNumber, renderToken } from '../lib/renderer/render.js';
+export { renderToken } from '../lib/renderer/render.js';
 import { doParse } from '../lib/parser/parse.js';
-export { parseString, parseTokens, urlTokenMatcher } from '../lib/parser/parse.js';
-export { tokenize } from '../lib/parser/tokenize.js';
-export { isAngle, isAtKeyword, isColor, isDigit, isDimension, isFrequency, isFunction, isHash, isHexColor, isIdent, isIdentCodepoint, isIdentStart, isLength, isNewLine, isNonPrintable, isNumber, isPercentage, isPseudo, isResolution, isTime, isWhiteSpace, parseDimension } from '../lib/parser/utils/syntax.js';
-export { getConfig } from '../lib/parser/utils/config.js';
-export { funcList, matchType } from '../lib/parser/utils/type.js';
-import { load } from './load.js';
+export { parseString, parseTokens } from '../lib/parser/parse.js';
+import '../lib/renderer/utils/color.js';
 import { resolve, dirname } from '../lib/fs/resolve.js';
-export { matchUrl } from '../lib/fs/resolve.js';
+import { load } from './load.js';
 
 function render(data, options = {}) {
     return doRender(data, Object.assign(options, {
@@ -49,4 +45,4 @@ async function transform(css, options = {}) {
     });
 }
 
-export { dirname, doParse, doRender, load, parse, render, resolve, transform };
+export { dirname, load, parse, render, resolve, transform };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tbela99/css-parser",
   "description": "CSS parser for node and the browser",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "exports": {
     ".": "./dist/node/index.js",
     "./umd": "./dist/index-umd-web.js",
@@ -11,10 +11,10 @@
   "type": "module",
   "typings": "dist/index.d.ts",
   "scripts": {
-    "build": "rollup -c",
-    "test": "web-test-runner \"test/**/*.web.spec.js\" --node-resolve --root-dir=.; mocha --reporter-options='maxDiffSize=1801920' \"test/**/*.node.spec.js\"",
+    "build": "rollup -c;./build.sh dist/index.d.ts 'declare interface' 'declare type'",
+    "test": "web-test-runner \"test/**/*.web.spec.js\" --node-resolve --playwright --browsers chromium firefox webkit --root-dir=.; mocha --reporter-options='maxDiffSize=1801920' \"test/**/*.node.spec.js\"",
     "test:cov": "c8 --reporter=html --reporter=text --reporter=json-summary mocha --reporter-options='maxDiffSize=1801920' \"test/**/*.node.spec.js\"",
-    "test:web-cov": "web-test-runner \"test/**/*.web.spec.js\" --node-resolve --root-dir=.  --coverage",
+    "test:web-cov": "web-test-runner --playwright --browsers chromium firefox webkit \"test/**/*.web.spec.js\" --node-resolve --root-dir=.  --coverage",
     "profile": "node --inspect-brk test/inspect.mjs",
     "debug": "web-test-runner \"test/**/*.web.spec.js\" --manual --open --node-resolve --root-dir=."
   },
@@ -34,7 +34,8 @@
     "browser",
     "css-nesting",
     "css-compiler",
-    "nested-css"
+    "nested-css",
+    "walker"
   ],
   "author": "Thierry Bela",
   "license": "MIT OR LGPL-3.0",
@@ -52,6 +53,7 @@
     "@types/mocha": "^10.0.1",
     "@types/node": "^20.4.10",
     "@web/test-runner": "^0.17.0",
+    "@web/test-runner-playwright": "^0.11.0",
     "c8": "^8.0.1",
     "mocha": "^10.2.0",
     "rollup": "^3.28.0",