void-css - npm Package Compare versions

Comparing version 1.0.14 to 1.0.15

index.js

@@ -6,14 +6,2 @@ "use strict";
 const defaultExtensions_1 = require("./src/extensions/defaultExtensions");
-const css = `
-:root {
-    --bg: #2E343D;
-    --bg2: #444B5B;
-    --bg3: #171F26;
-    --color: #fff;
-    --color2: #ccc; 
-}
-
-`;
-const compiler = VoidCSS();
-console.log(compiler(css));
 function VoidCSS(config) {
@@ -20,0 +8,0 @@ const configInstance = new config_1.Config(config ?? {});

index.ts

@@ -8,17 +8,3 @@
 
-const css = `
-:root {
-    --bg: #2E343D;
-    --bg2: #444B5B;
-    --bg3: #171F26;
-    --color: #fff;
-    --color2: #ccc; 
-}
 
-`
-
-const compiler = VoidCSS();
-
-console.log(compiler(css));
-
 function VoidCSS(config?: VoidCSSConfiguration) {
@@ -25,0 +11,0 @@ const configInstance = new Config(config ?? {});

package.json

 {
   "name": "void-css",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

src/compiler/compiler.js

@@ -65,4 +65,6 @@ "use strict";
         if (branch.dynamic) {
+            const css = createScope(branch, i);
             void dynamic.push({
-                css: createScope(branch, i),
+                exportedClasses: branch.exportedClasses || [],
+                css,
                 dependencies: branch.dependencies ?? [],
@@ -98,3 +100,4 @@ // TODO: cache
             last.selector === rule.selector &&
-            last.dynamic === rule.dynamic) {
+            last.dynamic === rule.dynamic &&
+            last.dependencies?.join(" ") === rule.dependencies?.join(" ")) {
             rules[i - 1].tokens.push(...rule.tokens);
@@ -121,2 +124,3 @@ }
         const children = [];
+        const exportedClasses = [];
         tokenIteration: for (const [i, token] of tokens.entries()) {
@@ -132,3 +136,7 @@ /** future optimization: don't push selectors */
                     const newClassName = generateNewClassName(token.match, ctx.config.randomizedExportedClassNameLength, ctx);
-                    classes[token.match.replace(/[_-]+([a-zA-Z0-9])|[_-]+$/g, (_, m) => m?.toUpperCase() ?? "")] = newClassName;
+                    void exportedClasses.push({
+                        newClassName,
+                        originalClassName: camelCaseClassName(token.match),
+                    });
+                    classes[camelCaseClassName(token.match)] = newClassName;
                     void register({
@@ -159,2 +167,3 @@ ...token,
                             dependencies,
+                            exportedClasses,
                         };
@@ -201,2 +210,3 @@ if (existingRule === -1)
                 dynamic: false,
+                exportedClasses,
             });
@@ -214,2 +224,5 @@ void rules.push(...dynamicRules);
 }
+function camelCaseClassName(className) {
+    return className.replace(/[_-]+([a-zA-Z0-9])|[_-]+$/g, (_, m) => m?.toUpperCase() ?? "");
+}
 function normalizeSelectorToken(selectorToken) {
@@ -223,11 +236,13 @@ switch (selectorToken.name) {
 }
-function interpolateParent(selector, parent) {
-    return selector.split(/,/g)
-        .map(selector => {
-        if (/&/.test(selector))
-            return selector.replace(/&/g, trimSelector(parent));
-        else
-            return `${parent} ${selector}`;
-    })
-        .join(", ");
+function interpolateParent(selector, parents) {
+    return parents.split(/\s*,\s*/g).map(parent => {
+        return selector.split(/\s*,\s*/g)
+            .map(selector => {
+            if (/&/.test(selector))
+                return selector.replace(/&/g, trimSelector(parent));
+            else
+                return `${parent} ${selector}`;
+        })
+            .join(", ");
+    }).join(", ");
 }
@@ -234,0 +249,0 @@ function generateRandomString(length) {

src/compiler/compiler.ts

@@ -11,2 +11,6 @@ import Context, { Token } from "../context";
     dependencies?: string[];
+    exportedClasses: {
+        newClassName: string;
+        originalClassName: string;
+    }[];
 }
@@ -36,2 +40,6 @@
         hash: string;
+        exportedClasses: {
+            newClassName: string;
+            originalClassName: string;
+        }[];
     }[] = [];
@@ -88,4 +96,6 @@ const queryExtensions = ctx.queryExtensions.bind(ctx);
         if (branch.dynamic) {
+            const css = createScope(branch, i);
             void dynamic.push({
-                css: createScope(branch, i),
+                exportedClasses: branch.exportedClasses || [],
+                css,
                 dependencies: branch.dependencies ?? [],
@@ -125,3 +135,4 @@ // TODO: cache
             last.selector === rule.selector &&
-            last.dynamic === rule.dynamic
+            last.dynamic === rule.dynamic &&
+            last.dependencies?.join(" ") === rule.dependencies?.join(" ")
         ) {
@@ -153,3 +164,6 @@ rules[i - 1].tokens.push(...rule.tokens);
         const children: number[] = [];
-
+        const exportedClasses: {
+            newClassName: string;
+            originalClassName: string;
+        }[] = [];
         tokenIteration: for (const [i, token] of tokens.entries()) {
@@ -164,3 +178,7 @@ /** future optimization: don't push selectors */
                     const newClassName = generateNewClassName(token.match, ctx.config.randomizedExportedClassNameLength, ctx);
-                    classes[token.match.replace(/[_-]+([a-zA-Z0-9])|[_-]+$/g, (_, m) => m?.toUpperCase() ?? "")] = newClassName;
+                    void exportedClasses.push({
+                        newClassName,
+                        originalClassName: camelCaseClassName(token.match),
+                    });
+                    classes[camelCaseClassName(token.match)] = newClassName;
                     void register({
@@ -192,2 +210,3 @@ ...token,
                             dependencies,
+                            exportedClasses,
                         };
@@ -229,2 +248,3 @@ if (existingRule === -1)
                 dynamic: false,
+                exportedClasses,
             });
@@ -246,2 +266,5 @@ void rules.push(...dynamicRules);
 
+function camelCaseClassName(className: string) {
+    return className.replace(/[_-]+([a-zA-Z0-9])|[_-]+$/g, (_, m) => m?.toUpperCase() ?? "");
+}
 
@@ -257,9 +280,12 @@ function normalizeSelectorToken(selectorToken: Token): string {
 
-function interpolateParent(selector: string, parent: string): string {
-    return selector.split(/,/g)
-        .map(selector => {
-            if (/&/.test(selector)) return selector.replace(/&/g, trimSelector(parent));
-            else return `${parent} ${selector}`;
-        })
-        .join(", ");
+function interpolateParent(selector: string, parents: string): string {
+
+    return parents.split(/\s*,\s*/g).map(parent => {
+        return selector.split(/\s*,\s*/g)
+            .map(selector => {
+                if (/&/.test(selector)) return selector.replace(/&/g, trimSelector(parent));
+                else return `${parent} ${selector}`;
+            })
+            .join(", ")
+    }).join(", ");
 }
@@ -272,3 +298,3 @@
         string += base[~~(Math.random() * base.length)];
-    } while(string.length !== length);
+    } while (string.length !== length);
     return string;
@@ -285,3 +311,3 @@ }
         name = `${seed}-${prefix}-${generateRandomString(length)}`;
-    } while([...ctx.classesCache.values()].find(v => v === name));
+    } while ([...ctx.classesCache.values()].find(v => v === name));
     void ctx.classesCache.set(seed, name);
@@ -288,0 +314,0 @@ return name;

src/compiler/lexer.js

@@ -59,3 +59,3 @@ "use strict";
                     "Instead found invalid or missing selector.";
-            return lex(ctx, expect(slice, ...globals, tokens_1.atSymbol, tokens_1.whiteSpace, ...enclosures, ..._if(enclosures.length === 0, [tokens_1.rootSelector]), ..._if(depth > 0, [tokens_1.currentSelector]), tokens_1.classNameInitiator, tokens_1.selectorName, tokens_1.idInitiator, tokens_1.wildcard), {
+            return lex(ctx, expect(slice, ...globals, tokens_1.atSymbol, tokens_1.whiteSpace, ...enclosures, ..._if(enclosures.length === 0, [tokens_1.rootSelector]), ..._if(depth > 0, [tokens_1.currentSelector]), tokens_1.classNameInitiator, tokens_1.selectorName, tokens_1.idInitiator, tokens_1.wildcard, tokens_1.notOperator), {
                 onError: (0, errors_1.createErrorContext)("Unexpected token. Expected: [css selector]. " + hint, start, end),
@@ -65,5 +65,17 @@ enclosures,
             });
+        case "notOperator":
+            return lex(ctx, expect(slice, ...globals, tokens_1.notOperatorParenthesis), {
+                onError: (0, errors_1.createErrorContext)("Unexpected token. Expected: '('.", ctx.index, ctx.index + (0, errors_1.resolveSelectorNameNotFound)(slice)),
+                enclosures,
+                depth,
+            });
+        case "notOperatorParenthesis":
+            return lex(ctx, expect(slice, ...globals, tokens_1.notOperatorParenthesis), {
+                onError: (0, errors_1.createErrorContext)("Unexpected token. Expected: [selector].", ctx.index, ctx.index + (0, errors_1.resolveSelectorNameNotFound)(slice)),
+                enclosures,
+                depth,
+            });
         case "atSymbol":
             return lex(ctx, expect(slice, ...globals, tokens_1.nestedAtRuleName), {
-                onError: (0, errors_1.createErrorContext)("Unexpected token. Expected: 'color-profile', 'counter-style', 'document', 'font-face', 'font-feature-values', 'keyframes', 'media', 'page', 'property' or 'supports'. It's possible that this list is outdated, if so please make an issue on the repository.", ctx.index, ctx.index + (0, errors_1.resolveEndOfPropertyValue)(slice)),
+                onError: (0, errors_1.createErrorContext)("Unexpected token. Expected: 'color-profile', 'counter-style', 'document', 'font-face', 'font-feature-values', 'keyframes', 'media', 'page', 'property' or 'supports'. It's possible that this list is outdated, if so please make an issue on the repository.", ctx.index, ctx.index + (0, errors_1.resolveSelectorNameNotFound)(slice)),
                 enclosures,
@@ -70,0 +82,0 @@ depth,

src/compiler/lexer.ts

@@ -1,2 +0,2 @@
-import { whiteSpace, Match, currentSelector, classNameInitiator, selectorName, idInitiator, wildcard, selectorChild, selectorCombinator, selectorSeparator, styleScope, renameToken, attributeSelectorCloseWithoutOperator, attributeSelectorModifier, attributeSelectorSingleQuoteInitiator, attributeSelectorDoubleQuoteInitiator, attributeSelectorSingleQuoteBody, attributeSelectorDoubleQuoteBody, attributeSelectorClose, attributeSelectorInitiator, styleScopeEnd, propertyName, valueSemiColon, propertyColon, propertyValueWithSemiColon, propertyValueWithoutSemiColon, TokenMatcher, inlineComment, renameTokens, blockComment, atSymbol, nestedAtRuleName, nestedAtRule, endStyleSheet, whiteSpaceOrNothing, exportClassName, colon, pseudoSelector, rootSelector } from "../tokens";
+import { whiteSpace, Match, currentSelector, classNameInitiator, selectorName, idInitiator, wildcard, selectorChild, selectorCombinator, selectorSeparator, styleScope, renameToken, attributeSelectorCloseWithoutOperator, attributeSelectorModifier, attributeSelectorSingleQuoteInitiator, attributeSelectorDoubleQuoteInitiator, attributeSelectorSingleQuoteBody, attributeSelectorDoubleQuoteBody, attributeSelectorClose, attributeSelectorInitiator, styleScopeEnd, propertyName, valueSemiColon, propertyColon, propertyValueWithSemiColon, propertyValueWithoutSemiColon, TokenMatcher, inlineComment, renameTokens, blockComment, atSymbol, nestedAtRuleName, nestedAtRule, endStyleSheet, whiteSpaceOrNothing, exportClassName, colon, pseudoSelector, rootSelector, notOperatorParenthesis, notOperator } from "../tokens";
 import { Config } from "../config";
@@ -68,3 +68,3 @@ import Context from "../context";
                 ctx,
-                expect(slice, ...globals, atSymbol, whiteSpace, ...enclosures, ..._if(enclosures.length === 0, [rootSelector]), ..._if(depth > 0, [currentSelector]), classNameInitiator, selectorName, idInitiator, wildcard),
+                expect(slice, ...globals, atSymbol, whiteSpace, ...enclosures, ..._if(enclosures.length === 0, [rootSelector]), ..._if(depth > 0, [currentSelector]), classNameInitiator, selectorName, idInitiator, wildcard, notOperator),
                 {
@@ -80,2 +80,30 @@ onError: createErrorContext(
             );
+        case "notOperator":
+            return lex(
+                ctx,
+                expect(slice, ...globals, notOperatorParenthesis),
+                {
+                    onError: createErrorContext(
+                        "Unexpected token. Expected: '('.",
+                        ctx.index,
+                        ctx.index + resolveSelectorNameNotFound(slice),
+                    ),
+                    enclosures,
+                    depth,
+                },
+            );
+        case "notOperatorParenthesis":
+            return lex(
+                ctx,
+                expect(slice, ...globals, notOperatorParenthesis),
+                {
+                    onError: createErrorContext(
+                        "Unexpected token. Expected: [selector].",
+                        ctx.index,
+                        ctx.index + resolveSelectorNameNotFound(slice),
+                    ),
+                    enclosures,
+                    depth,
+                },
+            );
         case "atSymbol":
@@ -89,3 +117,3 @@ return lex(
                         ctx.index,
-                        ctx.index + resolveEndOfPropertyValue(slice),
+                        ctx.index + resolveSelectorNameNotFound(slice),
                     ),
@@ -92,0 +120,0 @@ enclosures,

src/runtime/runtime.js

@@ -9,3 +9,3 @@ "use strict";
 const fs_1 = __importDefault(require("fs"));
-const runtime = fs_1.default.readFileSync(path_1.default.join(__dirname, "./voidDom.txt"), "utf-8");
+const runtime = fs_1.default.readFileSync(path_1.default.join(__dirname, "./voidDom.js"), "utf-8");
 function clientDevelopment(compiled, id, filePath) {
@@ -17,4 +17,5 @@ return `(function() {
     ${runtime}
+    return voidCSS();
 })();`;
 }
 exports.clientDevelopment = clientDevelopment;

src/runtime/runtime.ts

 import path from "path";
 import fs from "fs";
 import { compileScope } from "../compiler/lexer";
-const runtime = fs.readFileSync(path.join(__dirname, "./voidDom.txt"), "utf-8");
+const runtime = fs.readFileSync(path.join(__dirname, "./voidDom.js"), "utf-8");
 
@@ -13,3 +13,4 @@
     ${runtime}
+    return voidCSS();
 })();`;
 }

src/tokens.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.currentSelector = exports.wildcard = exports.selectorCombinator = exports.attributeSelectorCloseWithoutOperator = exports.attributeSelectorClose = exports.attributeSelectorDoubleQuoteBody = exports.attributeSelectorDoubleQuoteInitiator = exports.attributeSelectorSingleQuoteBody = exports.attributeSelectorSingleQuoteInitiator = exports.attributeSelectorModifier = exports.attributeSelectorInitiator = exports.valueSemiColon = exports.propertyValueWithoutSemiColon = exports.propertyValueWithSemiColon = exports.propertyColon = exports.propertyName = exports.styleScopeEnd = exports.styleScope = exports.selectorName = exports.selectorChild = exports.selectorSeparator = exports.idInitiator = exports.exportClassName = exports.classNameInitiator = exports.whiteSpaceOrNothing = exports.pseudoSelector = exports.colon = exports.whiteSpace = exports.blockComment = exports.inlineComment = exports.rootSelector = exports.endStyleSheet = exports.nestedAtRule = exports.nestedAtRuleName = exports.atSymbol = exports.serializePropertyValues = exports.renameTokens = exports.renameToken = void 0;
+exports.currentSelector = exports.wildcard = exports.selectorCombinator = exports.attributeSelectorCloseWithoutOperator = exports.attributeSelectorClose = exports.attributeSelectorDoubleQuoteBody = exports.attributeSelectorDoubleQuoteInitiator = exports.attributeSelectorSingleQuoteBody = exports.attributeSelectorSingleQuoteInitiator = exports.attributeSelectorModifier = exports.attributeSelectorInitiator = exports.valueSemiColon = exports.propertyValueWithoutSemiColon = exports.propertyValueWithSemiColon = exports.propertyColon = exports.propertyName = exports.styleScopeEnd = exports.styleScope = exports.selectorName = exports.selectorChild = exports.selectorSeparator = exports.idInitiator = exports.exportClassName = exports.classNameInitiator = exports.whiteSpaceOrNothing = exports.pseudoSelector = exports.colon = exports.whiteSpace = exports.blockComment = exports.inlineComment = exports.rootSelector = exports.endStyleSheet = exports.nestedAtRule = exports.nestedAtRuleName = exports.atSymbol = exports.notOperatorParenthesis = exports.notOperator = exports.serializePropertyValues = exports.renameTokens = exports.renameToken = void 0;
 /**
- * Rename token with new name.
+ * Renames a token. Useful for borrowing logic while preserving the current grammar branch.
  *
@@ -45,2 +45,20 @@ * **Note:** this doesn't actually change the name of token, it merely sets the
 exports.serializePropertyValues = serializePropertyValues;
+function notOperator(input) {
+    return {
+        type: "notOperator",
+        domain: "selector",
+        attributes: [],
+        match: input.match(/^:(?:not|has)/i),
+    };
+}
+exports.notOperator = notOperator;
+function notOperatorParenthesis(input) {
+    return {
+        type: "notOperatorParenthesis",
+        domain: "selector",
+        attributes: [],
+        match: input.match(/^\(/),
+    };
+}
+exports.notOperatorParenthesis = notOperatorParenthesis;
 function atSymbol(input) {
@@ -47,0 +65,0 @@ return {

src/tokens.ts

@@ -13,3 +13,3 @@ export type Domains =  "selector" | "style" | "void";
 /**
- * Rename token with new name.
+ * Renames a token. Useful for borrowing logic while preserving the current grammar branch.
  * 
@@ -43,3 +43,3 @@ * **Note:** this doesn't actually change the name of token, it merely sets the
         }
-    })
+    });
 }
@@ -54,4 +54,19 @@
 
+export function notOperator(input: string): Match {
+    return {
+        type: "notOperator",
+        domain: "selector",
+        attributes: [],
+        match: input.match(/^:(?:not|has)/i),
+    }
+}
+export function notOperatorParenthesis(input: string): Match {
+    return {
+        type: "notOperatorParenthesis",
+        domain: "selector",
+        attributes: [],
+        match: input.match(/^\(/),
+    }
+}
 
-
 export function atSymbol(input: string): Match {
@@ -58,0 +73,0 @@ return {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

164336

increased by9.48%

Number of package files

77

increased by13.24%

Lines of code

3446

increased by9.22%

No dependency changes