@navita/engine 0.0.12 → 0.1.0

package/helpers/declarationsToBlock.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var helpers_hypenateProperty = require('./hypenateProperty.cjs');
+var helpers_hyphenateProperty = require('./hyphenateProperty.cjs');
 
 // https://github.com/styletron/styletron/blob/b552ddc5050a8cc5eec84a46a299d937d3bb0112/packages/styletron-engine-atomic/src/css.ts#L36
 function declarationsToBlock(style) {
@@ -8,7 +8,7 @@ function declarationsToBlock(style) {
     for(const prop in style){
         const val = style[prop];
         if (typeof val === "string" || typeof val === "number") {
-            css += `${helpers_hypenateProperty.hyphenateProperty(prop)}:${val};`;
+            css += `${helpers_hyphenateProperty.hyphenateProperty(prop)}:${val};`;
         }
     }
     return css.slice(0, -1);

package/helpers/declarationsToBlock.mjs

@@ -1,4 +1,4 @@
-import { hyphenateProperty } from './hypenateProperty.mjs';
+import { hyphenateProperty } from './hyphenateProperty.mjs';
 
 // https://github.com/styletron/styletron/blob/b552ddc5050a8cc5eec84a46a299d937d3bb0112/packages/styletron-engine-atomic/src/css.ts#L36
 function declarationsToBlock(style) {

package/helpers/{hypenateProperty.cjs → hyphenateProperty.cjs}

@@ -1,10 +1,15 @@
 'use strict';
 
+// Modified from
 // https://github.com/styletron/styletron/blob/b552ddc5050a8cc5eec84a46a299d937d3bb0112/packages/styletron-engine-atomic/src/hyphenate-style-name.ts
 const uppercasePattern = /[A-Z]/g;
 const msPattern = /^ms-/;
+const cssVarPattern = /^--/;
 const cache = {};
 function hyphenateProperty(property) {
+    if (cssVarPattern.test(property)) {
+        return property;
+    }
     return property in cache ? cache[property] : cache[property] = property.replace(uppercasePattern, "-$&").toLowerCase().replace(msPattern, "-ms-");
 }
 

package/helpers/{hypenateProperty.mjs → hyphenateProperty.mjs}

@@ -1,8 +1,13 @@
+// Modified from
 // https://github.com/styletron/styletron/blob/b552ddc5050a8cc5eec84a46a299d937d3bb0112/packages/styletron-engine-atomic/src/hyphenate-style-name.ts
 const uppercasePattern = /[A-Z]/g;
 const msPattern = /^ms-/;
+const cssVarPattern = /^--/;
 const cache = {};
 function hyphenateProperty(property) {
+    if (cssVarPattern.test(property)) {
+        return property;
+    }
     return property in cache ? cache[property] : cache[property] = property.replace(uppercasePattern, "-$&").toLowerCase().replace(msPattern, "-ms-");
 }
 

package/helpers/normalizeCSSVarsValue.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+const cssVarRegex = /(?<!var\()(\s*)(--[a-zA-Z0-9_-]+)/g;
+function normalizeCSSVarsValue(value) {
+    if (value.includes('--')) {
+        return value.replace(cssVarRegex, "$1var($2)");
+    }
+    return value;
+}
+
+exports.normalizeCSSVarsValue = normalizeCSSVarsValue;

package/helpers/normalizeCSSVarsValue.mjs

@@ -0,0 +1,9 @@
+const cssVarRegex = /(?<!var\()(\s*)(--[a-zA-Z0-9_-]+)/g;
+function normalizeCSSVarsValue(value) {
+    if (value.includes('--')) {
+        return value.replace(cssVarRegex, "$1var($2)");
+    }
+    return value;
+}
+
+export { normalizeCSSVarsValue };

package/helpers/splitStyleBlocks.cjs

@@ -1,17 +1,26 @@
 'use strict';
 
+const lowPriorityProperties = [
+    'all'
+];
 function splitStyleBlocks(blocks) {
     const atRules = [];
     const rules = [];
+    const lowPrioRules = [];
     for (const block of blocks){
         if (block.media || block.support) {
             atRules.push(block);
-        } else {
-            rules.push(block);
+            continue;
         }
+        if (lowPriorityProperties.includes(block.property.toLowerCase())) {
+            lowPrioRules.push(block);
+            continue;
+        }
+        rules.push(block);
     }
     return {
         atRules,
+        lowPrioRules,
         rules
     };
 }

package/helpers/splitStyleBlocks.mjs

@@ -1,15 +1,24 @@
+const lowPriorityProperties = [
+    'all'
+];
 function splitStyleBlocks(blocks) {
     const atRules = [];
     const rules = [];
+    const lowPrioRules = [];
     for (const block of blocks){
         if (block.media || block.support) {
             atRules.push(block);
-        } else {
-            rules.push(block);
+            continue;
         }
+        if (lowPriorityProperties.includes(block.property.toLowerCase())) {
+            lowPrioRules.push(block);
+            continue;
+        }
+        rules.push(block);
     }
     return {
         atRules,
+        lowPrioRules,
         rules
     };
 }

package/index.cjs

@@ -13,6 +13,7 @@ var printers_printKeyFrames = require('./printers/printKeyFrames.cjs');
 var printers_printSourceMap = require('./printers/printSourceMap.cjs');
 var printers_printStyleBlocks = require('./printers/printStyleBlocks.cjs');
 var printers_sortAtRules = require('./printers/sortAtRules.cjs');
+var processKeyframes = require('./processKeyframes.cjs');
 var processStyles = require('./processStyles.cjs');
 var wrappers_classList = require('./wrappers/classList.cjs');
 var wrappers_static = require('./wrappers/static.cjs');
@@ -80,7 +81,7 @@ class Engine {
     addKeyframes(keyframes) {
         const { id  } = this.caches.keyframes.getOrStore({
             type: "keyframes",
-            rule: keyframes
+            rule: processKeyframes.processKeyframes(keyframes)
         });
         this.addUsedIds("keyframes", [
             id
@@ -105,6 +106,14 @@ class Engine {
         };
         return extraClass;
     }
+    clearSourceMapReferences(filePath) {
+        const newFilePath = path.relative(this.options.context || process.cwd(), filePath);
+        this.sourceMapReferences[newFilePath] = [];
+    }
+    clearCache(filePath) {
+        this.clearUsedIds(filePath);
+        this.clearSourceMapReferences(filePath);
+    }
     generateIdentifier(value) {
         if (typeof value === 'undefined') {
             let identifier = hash((this.identifierCount++).toString(36));
@@ -126,20 +135,29 @@ class Engine {
         const { filePaths , usedIds , opinionatedLayers =false  } = options || {};
         // We prioritize ids over filePaths. If neither are provided, we use all the used filePaths.
         const { keyframes: keyframesCache , fontFace: fontFaceCache , static: staticCache , rule: ruleCache  } = usedIds ?? this.getUsedCacheIds(filePaths ?? Object.keys(this.usedIds));
-        const { atRules , rules  } = helpers_splitStyleBlocks.splitStyleBlocks(this.caches.rule.items(ruleCache));
+        const { atRules , lowPrioRules , rules  } = helpers_splitStyleBlocks.splitStyleBlocks(this.caches.rule.items(ruleCache));
         const keyFrameCss = printers_printKeyFrames.printKeyFrames(this.caches.keyframes.items(keyframesCache));
         const fontFaceCss = printers_printFontFaces.printFontFaces(this.caches.fontFace.items(fontFaceCache));
         const staticCss = printers_printStyleBlocks.printStyleBlocks(this.caches.static.items(staticCache));
         const atRulesCss = printers_printStyleBlocks.printStyleBlocks(printers_sortAtRules.sortAtRules(atRules));
+        const lowPrioRulesCss = printers_printStyleBlocks.printStyleBlocks(lowPrioRules);
         const rulesCss = printers_printStyleBlocks.printStyleBlocks(rules);
         if (opinionatedLayers) {
-            const result = `${keyFrameCss}${fontFaceCss}` + (staticCss.length > 0 ? `@layer static{${staticCss}}` : '') + (rulesCss.length > 0 ? `@layer rules{${rulesCss}}` : '') + (atRulesCss.length > 0 ? `@layer at{${atRulesCss}}` : '');
+            const result = `${keyFrameCss}${fontFaceCss}` + (staticCss.length > 0 ? `@layer s{${staticCss}}` : '') + (lowPrioRulesCss.length > 0 ? `@layer lpr{${lowPrioRulesCss}}` : '') + (rulesCss.length > 0 ? `@layer r{${rulesCss}}` : '') + (atRulesCss.length > 0 ? `@layer at{${atRulesCss}}` : '');
             if (result.length > 0) {
-                return `@layer static,rules,at;${result}`;
+                // s - static
+                // lpr - low priority rules
+                // r - rules
+                // at - at rules
+                return `@layer s,lpr,r,at;${result}`;
             }
             return '';
         }
-        return printers_printSourceMap.printSourceMap(this.sourceMapReferences, keyFrameCss + fontFaceCss + staticCss + rulesCss + atRulesCss);
+        const content = keyFrameCss + fontFaceCss + staticCss + lowPrioRulesCss + rulesCss + atRulesCss;
+        if (this.options.enableSourceMaps) {
+            return printers_printSourceMap.printSourceMap(this.sourceMapReferences, content);
+        }
+        return content;
     }
     serialize() {
         const { caches , usedIds , identifierCount , sourceMapReferences  } = this;

package/index.d.ts

@@ -35,6 +35,8 @@ declare class Engine {
         line: number;
         column: number;
     }): string | false;
+    private clearSourceMapReferences;
+    clearCache(filePath: string): void;
     generateIdentifier(value: unknown): string;
     renderCssToString(options?: {
         filePaths?: string[];

package/index.mjs

@@ -11,6 +11,7 @@ import { printKeyFrames } from './printers/printKeyFrames.mjs';
 import { printSourceMap } from './printers/printSourceMap.mjs';
 import { printStyleBlocks } from './printers/printStyleBlocks.mjs';
 import { sortAtRules } from './printers/sortAtRules.mjs';
+import { processKeyframes } from './processKeyframes.mjs';
 import { processStyles } from './processStyles.mjs';
 import { ClassList } from './wrappers/classList.mjs';
 import { Static } from './wrappers/static.mjs';
@@ -78,7 +79,7 @@ class Engine {
     addKeyframes(keyframes) {
         const { id  } = this.caches.keyframes.getOrStore({
             type: "keyframes",
-            rule: keyframes
+            rule: processKeyframes(keyframes)
         });
         this.addUsedIds("keyframes", [
             id
@@ -103,6 +104,14 @@ class Engine {
         };
         return extraClass;
     }
+    clearSourceMapReferences(filePath) {
+        const newFilePath = path.relative(this.options.context || process.cwd(), filePath);
+        this.sourceMapReferences[newFilePath] = [];
+    }
+    clearCache(filePath) {
+        this.clearUsedIds(filePath);
+        this.clearSourceMapReferences(filePath);
+    }
     generateIdentifier(value) {
         if (typeof value === 'undefined') {
             let identifier = hash((this.identifierCount++).toString(36));
@@ -124,20 +133,29 @@ class Engine {
         const { filePaths , usedIds , opinionatedLayers =false  } = options || {};
         // We prioritize ids over filePaths. If neither are provided, we use all the used filePaths.
         const { keyframes: keyframesCache , fontFace: fontFaceCache , static: staticCache , rule: ruleCache  } = usedIds ?? this.getUsedCacheIds(filePaths ?? Object.keys(this.usedIds));
-        const { atRules , rules  } = splitStyleBlocks(this.caches.rule.items(ruleCache));
+        const { atRules , lowPrioRules , rules  } = splitStyleBlocks(this.caches.rule.items(ruleCache));
         const keyFrameCss = printKeyFrames(this.caches.keyframes.items(keyframesCache));
         const fontFaceCss = printFontFaces(this.caches.fontFace.items(fontFaceCache));
         const staticCss = printStyleBlocks(this.caches.static.items(staticCache));
         const atRulesCss = printStyleBlocks(sortAtRules(atRules));
+        const lowPrioRulesCss = printStyleBlocks(lowPrioRules);
         const rulesCss = printStyleBlocks(rules);
         if (opinionatedLayers) {
-            const result = `${keyFrameCss}${fontFaceCss}` + (staticCss.length > 0 ? `@layer static{${staticCss}}` : '') + (rulesCss.length > 0 ? `@layer rules{${rulesCss}}` : '') + (atRulesCss.length > 0 ? `@layer at{${atRulesCss}}` : '');
+            const result = `${keyFrameCss}${fontFaceCss}` + (staticCss.length > 0 ? `@layer s{${staticCss}}` : '') + (lowPrioRulesCss.length > 0 ? `@layer lpr{${lowPrioRulesCss}}` : '') + (rulesCss.length > 0 ? `@layer r{${rulesCss}}` : '') + (atRulesCss.length > 0 ? `@layer at{${atRulesCss}}` : '');
             if (result.length > 0) {
-                return `@layer static,rules,at;${result}`;
+                // s - static
+                // lpr - low priority rules
+                // r - rules
+                // at - at rules
+                return `@layer s,lpr,r,at;${result}`;
             }
             return '';
         }
-        return printSourceMap(this.sourceMapReferences, keyFrameCss + fontFaceCss + staticCss + rulesCss + atRulesCss);
+        const content = keyFrameCss + fontFaceCss + staticCss + lowPrioRulesCss + rulesCss + atRulesCss;
+        if (this.options.enableSourceMaps) {
+            return printSourceMap(this.sourceMapReferences, content);
+        }
+        return content;
     }
     serialize() {
         const { caches , usedIds , identifierCount , sourceMapReferences  } = this;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navita/engine",
-  "version": "0.0.12",
+  "version": "0.1.0",
   "description": "Navitas CSS-in-JS engine",
   "keywords": [
     "css-in-js",

package/processKeyframes.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var helpers_isObject = require('./helpers/isObject.cjs');
+var helpers_transformContentProperty = require('./helpers/transformContentProperty.cjs');
+
+const transformValuePropertyMap = {
+    content: helpers_transformContentProperty.transformContentProperty
+};
+function processKeyframes(keyframes) {
+    const newKeyframes = {};
+    for (const [key, value] of Object.entries(keyframes)){
+        if (helpers_isObject.isObject(value)) {
+            newKeyframes[key] = processKeyframes(value);
+            continue;
+        }
+        let newValue = value;
+        if (transformValuePropertyMap[key]) {
+            newValue = transformValuePropertyMap[key](newValue);
+        }
+        newKeyframes[key] = newValue;
+    }
+    return newKeyframes;
+}
+
+exports.processKeyframes = processKeyframes;

package/processKeyframes.mjs

@@ -0,0 +1,23 @@
+import { isObject } from './helpers/isObject.mjs';
+import { transformContentProperty } from './helpers/transformContentProperty.mjs';
+
+const transformValuePropertyMap = {
+    content: transformContentProperty
+};
+function processKeyframes(keyframes) {
+    const newKeyframes = {};
+    for (const [key, value] of Object.entries(keyframes)){
+        if (isObject(value)) {
+            newKeyframes[key] = processKeyframes(value);
+            continue;
+        }
+        let newValue = value;
+        if (transformValuePropertyMap[key]) {
+            newValue = transformValuePropertyMap[key](newValue);
+        }
+        newKeyframes[key] = newValue;
+    }
+    return newKeyframes;
+}
+
+export { processKeyframes };

package/processStyles.cjs

@@ -1,12 +1,13 @@
 'use strict';
 
 var helpers_generateCombinedAtRules = require('./helpers/generateCombinedAtRules.cjs');
-var helpers_hypenateProperty = require('./helpers/hypenateProperty.cjs');
+var helpers_hyphenateProperty = require('./helpers/hyphenateProperty.cjs');
 var helpers_isMediaQuery = require('./helpers/isMediaQuery.cjs');
 var helpers_isNestedSelector = require('./helpers/isNestedSelector.cjs');
 var helpers_isObject = require('./helpers/isObject.cjs');
 var helpers_isSupportsQuery = require('./helpers/isSupportsQuery.cjs');
 var helpers_normalizeCSSVarsProperty = require('./helpers/normalizeCSSVarsProperty.cjs');
+var helpers_normalizeCSSVarsValue = require('./helpers/normalizeCSSVarsValue.cjs');
 var helpers_normalizeNestedProperty = require('./helpers/normalizeNestedProperty.cjs');
 var helpers_pixelifyProperties = require('./helpers/pixelifyProperties.cjs');
 var helpers_transformContentProperty = require('./helpers/transformContentProperty.cjs');
@@ -57,10 +58,7 @@ function processStyles({ cache , type  }) {
                 let newValue = value;
                 if (typeof value === "string") {
                     newValue = value.trim().replace(/;[\n\s]*$/, "");
-                }
-                // Check if value starts with --, if so, wrap in var()
-                if (typeof newValue === "string" && newValue.startsWith("--")) {
-                    newValue = `var(${value})`;
+                    newValue = helpers_normalizeCSSVarsValue.normalizeCSSVarsValue(newValue);
                 }
                 if (typeof value === "number") {
                     newValue = helpers_pixelifyProperties.pixelifyProperties(newProperty, value);
@@ -68,7 +66,7 @@ function processStyles({ cache , type  }) {
                 if (transformValuePropertyMap[newProperty]) {
                     newValue = transformValuePropertyMap[newProperty](value);
                 }
-                newProperty = helpers_hypenateProperty.hyphenateProperty(newProperty);
+                newProperty = helpers_hyphenateProperty.hyphenateProperty(newProperty);
                 // Remove trailing semicolon and new lines with regex
                 result.push(cache.getOrStore({
                     type,

package/processStyles.mjs

@@ -1,10 +1,11 @@
 import { generateCombinedAtRules } from './helpers/generateCombinedAtRules.mjs';
-import { hyphenateProperty } from './helpers/hypenateProperty.mjs';
+import { hyphenateProperty } from './helpers/hyphenateProperty.mjs';
 import { isMediaQuery } from './helpers/isMediaQuery.mjs';
 import { isNestedSelector } from './helpers/isNestedSelector.mjs';
 import { isObject } from './helpers/isObject.mjs';
 import { isSupportsQuery } from './helpers/isSupportsQuery.mjs';
 import { normalizeCSSVarsProperty } from './helpers/normalizeCSSVarsProperty.mjs';
+import { normalizeCSSVarsValue } from './helpers/normalizeCSSVarsValue.mjs';
 import { normalizeNestedProperty } from './helpers/normalizeNestedProperty.mjs';
 import { pixelifyProperties } from './helpers/pixelifyProperties.mjs';
 import { transformContentProperty } from './helpers/transformContentProperty.mjs';
@@ -55,10 +56,7 @@ function processStyles({ cache , type  }) {
                 let newValue = value;
                 if (typeof value === "string") {
                     newValue = value.trim().replace(/;[\n\s]*$/, "");
-                }
-                // Check if value starts with --, if so, wrap in var()
-                if (typeof newValue === "string" && newValue.startsWith("--")) {
-                    newValue = `var(${value})`;
+                    newValue = normalizeCSSVarsValue(newValue);
                 }
                 if (typeof value === "number") {
                     newValue = pixelifyProperties(newProperty, value);