@navita/engine 0.2.0 → 0.2.2

package/helpers/declarationsToBlock.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var helpers_hyphenateProperty = require('./hyphenateProperty.cjs');
+var 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_hyphenateProperty.hyphenateProperty(prop)}:${val};`;
+            css += `${hyphenateProperty.hyphenateProperty(prop)}:${val};`;
         }
     }
     return css.slice(0, -1);

package/identifiers/propertyValueIDGenerator.cjs

@@ -1,9 +1,9 @@
 'use strict';
 
-var identifiers_alphaIDGenerator = require('./alphaIDGenerator.cjs');
+var alphaIDGenerator = require('./alphaIDGenerator.cjs');
 
 class PropertyValueIDGenerator {
-    property = new identifiers_alphaIDGenerator.AlphaIDGenerator();
+    property = new alphaIDGenerator.AlphaIDGenerator();
     cache = {};
     next({ property , media ='' , support ='' , container ='' , pseudo ='' , value  }) {
         const propertyKey = `m${media}s${support}c${container}ps${pseudo}p${property}`;

package/index.cjs

@@ -3,20 +3,20 @@
 var path = require('node:path');
 var hash = require('@emotion/hash');
 var cache = require('./cache.cjs');
-var helpers_isObject = require('./helpers/isObject.cjs');
-var helpers_splitStyleBlocks = require('./helpers/splitStyleBlocks.cjs');
-var identifiers_IDGenerator = require('./identifiers/IDGenerator.cjs');
-var identifiers_alphaIDGenerator = require('./identifiers/alphaIDGenerator.cjs');
-var identifiers_propertyValueIDGenerator = require('./identifiers/propertyValueIDGenerator.cjs');
-var printers_printFontFaces = require('./printers/printFontFaces.cjs');
-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 isObject = require('./helpers/isObject.cjs');
+var splitStyleBlocks = require('./helpers/splitStyleBlocks.cjs');
+var IDGenerator = require('./identifiers/IDGenerator.cjs');
+var alphaIDGenerator = require('./identifiers/alphaIDGenerator.cjs');
+var propertyValueIDGenerator = require('./identifiers/propertyValueIDGenerator.cjs');
+var printFontFaces = require('./printers/printFontFaces.cjs');
+var printKeyFrames = require('./printers/printKeyFrames.cjs');
+var printSourceMap = require('./printers/printSourceMap.cjs');
+var printStyleBlocks = require('./printers/printStyleBlocks.cjs');
+var 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');
+var classList = require('./wrappers/classList.cjs');
+var _static = require('./wrappers/static.cjs');
 
 const defaultOptions = {
     enableSourceMaps: false,
@@ -24,11 +24,11 @@ const defaultOptions = {
 };
 class Engine {
     caches = {
-        rule: new cache.Cache(new identifiers_propertyValueIDGenerator.PropertyValueIDGenerator()),
-        static: new cache.Cache(new identifiers_IDGenerator.IDGenerator()),
-        keyframes: new cache.Cache(new identifiers_alphaIDGenerator.AlphaIDGenerator()),
-        fontFace: new cache.Cache(new identifiers_alphaIDGenerator.AlphaIDGenerator()),
-        identifiers: new cache.Cache(new identifiers_alphaIDGenerator.AlphaIDGenerator())
+        rule: new cache.Cache(new propertyValueIDGenerator.PropertyValueIDGenerator()),
+        static: new cache.Cache(new IDGenerator.IDGenerator()),
+        keyframes: new cache.Cache(new alphaIDGenerator.AlphaIDGenerator()),
+        fontFace: new cache.Cache(new alphaIDGenerator.AlphaIDGenerator()),
+        identifiers: new cache.Cache(new alphaIDGenerator.AlphaIDGenerator())
     };
     usedIds = {};
     identifierCount = 0;
@@ -53,7 +53,7 @@ class Engine {
             styles,
             selector
         }).map((style)=>style.id));
-        return new wrappers_static.Static();
+        return new _static.Static();
     }
     addStyle(styles) {
         const rules = processStyles.processStyles({
@@ -64,7 +64,7 @@ class Engine {
         });
         const ids = rules.map((rule)=>rule.id);
         this.addUsedIds("rule", ids);
-        return new wrappers_classList.ClassList(ids.join(" "));
+        return new classList.ClassList(ids.join(" "));
     }
     addFontFace(fontFace) {
         const { id  } = this.caches.fontFace.getOrStore({
@@ -135,13 +135,13 @@ 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.getCacheIds(filePaths ?? Object.keys(this.usedIds));
-        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);
+        const { atRules , lowPrioRules , rules  } = splitStyleBlocks.splitStyleBlocks(this.caches.rule.items(ruleCache));
+        const keyFrameCss = printKeyFrames.printKeyFrames(this.caches.keyframes.items(keyframesCache));
+        const fontFaceCss = printFontFaces.printFontFaces(this.caches.fontFace.items(fontFaceCache));
+        const staticCss = printStyleBlocks.printStyleBlocks(this.caches.static.items(staticCache));
+        const atRulesCss = printStyleBlocks.printStyleBlocks(sortAtRules.sortAtRules(atRules));
+        const lowPrioRulesCss = printStyleBlocks.printStyleBlocks(lowPrioRules);
+        const rulesCss = printStyleBlocks.printStyleBlocks(rules);
         if (opinionatedLayers) {
             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) {
@@ -155,7 +155,7 @@ class Engine {
         }
         const content = keyFrameCss + fontFaceCss + staticCss + lowPrioRulesCss + rulesCss + atRulesCss;
         if (this.options.enableSourceMaps) {
-            return printers_printSourceMap.printSourceMap(this.sourceMapReferences, content);
+            return printSourceMap.printSourceMap(this.sourceMapReferences, content);
         }
         return content;
     }
@@ -173,7 +173,7 @@ class Engine {
         const data = JSON.parse(buffer.toString());
         function assign(target, source) {
             for(const key in source){
-                if (helpers_isObject.isObject(target[key]) && helpers_isObject.isObject(source[key])) {
+                if (isObject.isObject(target[key]) && isObject.isObject(source[key])) {
                     assign(target[key], source[key]);
                 } else {
                     target[key] = source[key];
@@ -236,6 +236,6 @@ class Engine {
     }
 }
 
-exports.ClassList = wrappers_classList.ClassList;
-exports.Static = wrappers_static.Static;
+exports.ClassList = classList.ClassList;
+exports.Static = _static.Static;
 exports.Engine = Engine;

package/index.d.ts

@@ -1,4 +1,26 @@
-import { StyleRule, FontFaceRule, CSSKeyframes } from '@navita/types';
+import { CSSKeyframes, FontFaceRule, StyleRule } from '@navita/types';
+
+interface StyleBlock {
+    type: 'rule' | 'static';
+    selector: string;
+    property: string;
+    value: string;
+    pseudo: string;
+    media: string;
+    support: string;
+    container: string;
+    id: string | number;
+}
+interface KeyframesBlock {
+    type: 'keyframes';
+    rule: CSSKeyframes;
+    id: string;
+}
+interface FontFaceBlock {
+    type: 'fontFace';
+    rule: FontFaceRule[];
+    id: string;
+}
 
 declare class ClassList extends String {
 }
@@ -10,6 +32,10 @@ type CacheKeys = keyof Engine["caches"];
 type UsedIdCache = {
     [key in CacheKeys]?: (string | number)[];
 };
+interface Identifier {
+    value: string;
+    id: string;
+}
 type Options = {
     context?: string;
     enableSourceMaps?: boolean;
@@ -47,7 +73,23 @@ declare class Engine {
     deserialize(buffer: Buffer | string): Promise<void>;
     setFilePath(filePath: string | undefined): void;
     getUsedFilePaths(): string[];
-    getItems(caches: UsedIdCache): {};
+    getItems(caches: UsedIdCache): {
+        rule?: (StyleBlock & {
+            id: string | number;
+        })[];
+        static?: (StyleBlock & {
+            id: string | number;
+        })[];
+        keyframes?: (KeyframesBlock & {
+            id: string | number;
+        })[];
+        fontFace?: (FontFaceBlock & {
+            id: string | number;
+        })[];
+        identifiers?: (Identifier & {
+            id: string | number;
+        })[];
+    };
     clearUsedIds(filePath: string): void;
     private addUsedIds;
     getCacheIds(filePaths?: string[]): UsedIdCache;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navita/engine",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Navitas CSS-in-JS engine",
   "keywords": [
     "css-in-js",
@@ -17,9 +17,9 @@
     }
   },
   "dependencies": {
-    "sort-css-media-queries": "^2.2.0",
-    "@emotion/hash": "^0.9.1",
-    "source-map": "^0.7.4"
+    "sort-css-media-queries": "2.4.0",
+    "@emotion/hash": "0.9.2",
+    "source-map": "0.7.4"
   },
   "license": "MIT",
   "author": "Eagerpatch",

package/printers/printFontFaces.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var helpers_declarationsToBlock = require('../helpers/declarationsToBlock.cjs');
+var declarationsToBlock = require('../helpers/declarationsToBlock.cjs');
 
 function printFontFaces(blocks) {
     let fontFaces = '';
     for (const block of blocks){
         for (const rule of block.rule){
-            fontFaces += `@font-face{font-family:${block.id};${helpers_declarationsToBlock.declarationsToBlock(rule)}}`;
+            fontFaces += `@font-face{font-family:${block.id};${declarationsToBlock.declarationsToBlock(rule)}}`;
         }
     }
     return fontFaces;

package/printers/printKeyFrames.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
-var helpers_declarationsToBlock = require('../helpers/declarationsToBlock.cjs');
+var declarationsToBlock = require('../helpers/declarationsToBlock.cjs');
 
 // https://github.com/styletron/styletron/blob/master/packages/styletron-engine-atomic/src/css.ts#L48
 function keyframesToBlock(keyframes) {
     let result = "";
     for(const animationState in keyframes){
-        result += `${animationState}{${helpers_declarationsToBlock.declarationsToBlock(keyframes[animationState])}}`;
+        result += `${animationState}{${declarationsToBlock.declarationsToBlock(keyframes[animationState])}}`;
     }
     return result;
 }

package/printers/printStyleBlocks.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var helpers_getPropertyPriority = require('../helpers/getPropertyPriority.cjs');
+var getPropertyPriority = require('../helpers/getPropertyPriority.cjs');
 
 function printStyleBlocks(blocks) {
     let stylesheet = '';
@@ -40,7 +40,7 @@ function printStyleBlocks(blocks) {
             stylesheet += `@container ${style.container}{`;
         }
         if (style.type === 'rule') {
-            const className = `.${style.id}`.repeat(helpers_getPropertyPriority.getPropertyPriority(style.property));
+            const className = `.${style.id}`.repeat(getPropertyPriority.getPropertyPriority(style.property));
             stylesheet += `${className}${style.pseudo}{`;
         } else if (style.type === 'static' && (previousStyle?.selector !== style.selector || previousStyle?.pseudo !== style.pseudo || previousStyle?.media !== style.media || previousStyle?.support !== style.support || previousStyle?.container !== style.container)) {
             // If static, we don't add pseudo selectors currently

package/processKeyframes.cjs

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

package/processStyles.cjs

@@ -1,28 +1,28 @@
 'use strict';
 
-var helpers_generateCombinedAtRules = require('./helpers/generateCombinedAtRules.cjs');
-var helpers_hyphenateProperty = require('./helpers/hyphenateProperty.cjs');
-var helpers_isContainerQuery = require('./helpers/isContainerQuery.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');
+var generateCombinedAtRules = require('./helpers/generateCombinedAtRules.cjs');
+var hyphenateProperty = require('./helpers/hyphenateProperty.cjs');
+var isContainerQuery = require('./helpers/isContainerQuery.cjs');
+var isMediaQuery = require('./helpers/isMediaQuery.cjs');
+var isNestedSelector = require('./helpers/isNestedSelector.cjs');
+var isObject = require('./helpers/isObject.cjs');
+var isSupportsQuery = require('./helpers/isSupportsQuery.cjs');
+var normalizeCSSVarsProperty = require('./helpers/normalizeCSSVarsProperty.cjs');
+var normalizeCSSVarsValue = require('./helpers/normalizeCSSVarsValue.cjs');
+var normalizeNestedProperty = require('./helpers/normalizeNestedProperty.cjs');
+var pixelifyProperties = require('./helpers/pixelifyProperties.cjs');
+var transformContentProperty = require('./helpers/transformContentProperty.cjs');
 
 const transformValuePropertyMap = {
-    content: helpers_transformContentProperty.transformContentProperty
+    content: transformContentProperty.transformContentProperty
 };
 function processStyles({ cache , type  }) {
     return function process({ styles , pseudo ="" , media ="" , support ="" , container ="" , selector =""  }) {
         const result = [];
         for (const [property, value] of Object.entries(styles)){
-            if (helpers_isObject.isObject(value)) {
-                if (helpers_isMediaQuery.isMediaQuery(property)) {
-                    const combinedMedia = helpers_generateCombinedAtRules.generateCombinedAtRules(media, property.slice(6).trim());
+            if (isObject.isObject(value)) {
+                if (isMediaQuery.isMediaQuery(property)) {
+                    const combinedMedia = generateCombinedAtRules.generateCombinedAtRules(media, property.slice(6).trim());
                     result.push(...process({
                         styles: value,
                         pseudo,
@@ -33,8 +33,8 @@ function processStyles({ cache , type  }) {
                     }));
                     continue;
                 }
-                if (helpers_isSupportsQuery.isSupportsQuery(property)) {
-                    const combinedSupport = helpers_generateCombinedAtRules.generateCombinedAtRules(support, property.slice(9).trim());
+                if (isSupportsQuery.isSupportsQuery(property)) {
+                    const combinedSupport = generateCombinedAtRules.generateCombinedAtRules(support, property.slice(9).trim());
                     result.push(...process({
                         styles: value,
                         pseudo,
@@ -45,8 +45,8 @@ function processStyles({ cache , type  }) {
                     }));
                     continue;
                 }
-                if (helpers_isContainerQuery.isContainerQuery(property)) {
-                    const combinedContainer = helpers_generateCombinedAtRules.generateCombinedAtRules(container, property.slice(10).trim());
+                if (isContainerQuery.isContainerQuery(property)) {
+                    const combinedContainer = generateCombinedAtRules.generateCombinedAtRules(container, property.slice(10).trim());
                     result.push(...process({
                         styles: value,
                         pseudo,
@@ -57,13 +57,13 @@ function processStyles({ cache , type  }) {
                     }));
                     continue;
                 }
-                if (helpers_isNestedSelector.isNestedSelector(property)) {
+                if (isNestedSelector.isNestedSelector(property)) {
                     // This is only allowed in simple pseudos currently.
                     const copies = property.split(',').map((p)=>p.trim());
                     for (const copy of copies){
                         result.push(...process({
                             styles: value,
-                            pseudo: pseudo + helpers_normalizeNestedProperty.normalizeNestedProperty(copy),
+                            pseudo: pseudo + normalizeNestedProperty.normalizeNestedProperty(copy),
                             media,
                             support,
                             container,
@@ -75,19 +75,19 @@ function processStyles({ cache , type  }) {
                 console.warn("Unknown property", property);
                 continue;
             }
-            let newProperty = helpers_normalizeCSSVarsProperty.normalizeCSSVarsProperty(property);
+            let newProperty = normalizeCSSVarsProperty.normalizeCSSVarsProperty(property);
             let newValue = value;
             if (typeof value === "string") {
                 newValue = value.trim().replace(/;[\n\s]*$/, "");
-                newValue = helpers_normalizeCSSVarsValue.normalizeCSSVarsValue(newValue);
+                newValue = normalizeCSSVarsValue.normalizeCSSVarsValue(newValue);
             }
             if (typeof value === "number") {
-                newValue = helpers_pixelifyProperties.pixelifyProperties(newProperty, value);
+                newValue = pixelifyProperties.pixelifyProperties(newProperty, value);
             }
             if (transformValuePropertyMap[newProperty]) {
                 newValue = transformValuePropertyMap[newProperty](value);
             }
-            newProperty = helpers_hyphenateProperty.hyphenateProperty(newProperty);
+            newProperty = hyphenateProperty.hyphenateProperty(newProperty);
             // Remove trailing semicolon and new lines with regex
             result.push(cache.getOrStore({
                 type,