@navita/engine 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navita/engine",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "Navitas CSS-in-JS engine",
   "keywords": [
     "css-in-js",
@@ -12,7 +12,7 @@
   "exports": {
     ".": {
       "import": "./index.mjs",
-      "require": "./index.js",
+      "require": "./index.cjs",
       "types": "./index.d.ts"
     }
   },

package/printers/printFontFaces.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var helpers_declarationsToBlock = require('../helpers/declarationsToBlock.cjs');
+require('../helpers/hypenateProperty.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)}}`;
+        }
+    }
+    return fontFaces;
+}
+
+exports.printFontFaces = printFontFaces;

package/printers/printFontFaces.mjs

@@ -0,0 +1,14 @@
+import { declarationsToBlock } from '../helpers/declarationsToBlock.mjs';
+import '../helpers/hypenateProperty.mjs';
+
+function printFontFaces(blocks) {
+    let fontFaces = '';
+    for (const block of blocks){
+        for (const rule of block.rule){
+            fontFaces += `@font-face{font-family:${block.id};${declarationsToBlock(rule)}}`;
+        }
+    }
+    return fontFaces;
+}
+
+export { printFontFaces };

package/printers/printKeyFrames.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var helpers_declarationsToBlock = require('../helpers/declarationsToBlock.cjs');
+require('../helpers/hypenateProperty.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])}}`;
+    }
+    return result;
+}
+function printKeyFrames(blocks) {
+    let keyframes = '';
+    for (const block of blocks){
+        keyframes += `@keyframes ${block.id}{${keyframesToBlock(block.rule)}}`;
+    }
+    return keyframes;
+}
+
+exports.printKeyFrames = printKeyFrames;

package/printers/printKeyFrames.mjs

@@ -0,0 +1,20 @@
+import { declarationsToBlock } from '../helpers/declarationsToBlock.mjs';
+import '../helpers/hypenateProperty.mjs';
+
+// 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}{${declarationsToBlock(keyframes[animationState])}}`;
+    }
+    return result;
+}
+function printKeyFrames(blocks) {
+    let keyframes = '';
+    for (const block of blocks){
+        keyframes += `@keyframes ${block.id}{${keyframesToBlock(block.rule)}}`;
+    }
+    return keyframes;
+}
+
+export { printKeyFrames };

package/printers/printSourceMap.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var sourceMap = require('source-map');
+
+function printSourceMap(sourceMapReferences, content) {
+    if (content.length === 0) {
+        return content;
+    }
+    const entries = Object.entries(sourceMapReferences);
+    if (entries.length === 0) {
+        return content;
+    }
+    const sourceMap$1 = new sourceMap.SourceMapGenerator({
+        file: "navita.css",
+        skipValidation: true
+    });
+    const references = entries.flatMap(([filePath, references])=>references.map((reference)=>({
+                filePath,
+                ...reference
+            })));
+    for (const reference of references){
+        const { filePath , selector , line , column  } = reference;
+        const generatedColumn = content.length - 1;
+        content += `${selector}{/* Only used for sourceMap */}`;
+        sourceMap$1.addMapping({
+            source: filePath,
+            original: {
+                line,
+                column
+            },
+            generated: {
+                line: 1,
+                column: generatedColumn
+            }
+        });
+    }
+    const sourceMapContent = Buffer.from(sourceMap$1.toString()).toString('base64');
+    content += `\n/*# sourceMappingURL=data:application/json;base64,${sourceMapContent} */`;
+    return content;
+}
+
+exports.printSourceMap = printSourceMap;

package/printers/printSourceMap.mjs

@@ -0,0 +1,40 @@
+import { SourceMapGenerator } from 'source-map';
+
+function printSourceMap(sourceMapReferences, content) {
+    if (content.length === 0) {
+        return content;
+    }
+    const entries = Object.entries(sourceMapReferences);
+    if (entries.length === 0) {
+        return content;
+    }
+    const sourceMap = new SourceMapGenerator({
+        file: "navita.css",
+        skipValidation: true
+    });
+    const references = entries.flatMap(([filePath, references])=>references.map((reference)=>({
+                filePath,
+                ...reference
+            })));
+    for (const reference of references){
+        const { filePath , selector , line , column  } = reference;
+        const generatedColumn = content.length - 1;
+        content += `${selector}{/* Only used for sourceMap */}`;
+        sourceMap.addMapping({
+            source: filePath,
+            original: {
+                line,
+                column
+            },
+            generated: {
+                line: 1,
+                column: generatedColumn
+            }
+        });
+    }
+    const sourceMapContent = Buffer.from(sourceMap.toString()).toString('base64');
+    content += `\n/*# sourceMappingURL=data:application/json;base64,${sourceMapContent} */`;
+    return content;
+}
+
+export { printSourceMap };

package/printers/printStyleBlocks.cjs

@@ -0,0 +1,60 @@
+'use strict';
+
+var helpers_getPropertyPriority = require('../helpers/getPropertyPriority.cjs');
+
+function printStyleBlocks(blocks) {
+    let stylesheet = '';
+    let previousStyle;
+    for (const style of blocks){
+        if (style.type === 'static' && previousStyle && (previousStyle.selector !== style.selector || previousStyle.pseudo !== style.pseudo || previousStyle.media !== style.media || previousStyle.support !== style.support)) {
+            stylesheet += '}';
+        }
+        // Close support queries:
+        // 1. When the current style is not a support query, and the previous style was support query
+        // 2. When the current style is a support query and the previous style was a support query with a different support query
+        if (previousStyle && previousStyle.support && (!style.support || style.support !== previousStyle.support)) {
+            stylesheet += '}';
+        }
+        // Close media queries:
+        // 1. When the current style is not a media query, and the previous style was media query
+        // 2. When the current style is a media query and the previous style was a media query with a different media query
+        if (previousStyle && previousStyle.media && (!style.media || style.media !== previousStyle.media)) {
+            stylesheet += '}';
+        }
+        // Only add media queries if the previous style was not the same media query
+        if (style.media && previousStyle?.media !== style.media) {
+            stylesheet += `@media ${style.media}{`;
+        }
+        // Only add support queries if the previous style was not the same support query
+        if (style.support && previousStyle?.support !== style.support) {
+            stylesheet += `@supports ${style.support}{`;
+        }
+        if (style.type === 'rule') {
+            const className = `.${style.id}`.repeat(helpers_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)) {
+            // If static, we don't add pseudo selectors currently
+            stylesheet += `${style.selector}${style.pseudo}{`;
+        }
+        stylesheet += `${style.property}:${style.value}`;
+        if (style.type === 'static') {
+            stylesheet += ';';
+        }
+        if (style.type === 'rule') {
+            stylesheet += '}';
+        }
+        previousStyle = style;
+    }
+    if (previousStyle?.support) {
+        stylesheet += '}';
+    }
+    if (previousStyle?.media) {
+        stylesheet += '}';
+    }
+    if (previousStyle?.type === 'static') {
+        stylesheet += '}';
+    }
+    return stylesheet;
+}
+
+exports.printStyleBlocks = printStyleBlocks;

package/printers/printStyleBlocks.mjs

@@ -0,0 +1,58 @@
+import { getPropertyPriority } from '../helpers/getPropertyPriority.mjs';
+
+function printStyleBlocks(blocks) {
+    let stylesheet = '';
+    let previousStyle;
+    for (const style of blocks){
+        if (style.type === 'static' && previousStyle && (previousStyle.selector !== style.selector || previousStyle.pseudo !== style.pseudo || previousStyle.media !== style.media || previousStyle.support !== style.support)) {
+            stylesheet += '}';
+        }
+        // Close support queries:
+        // 1. When the current style is not a support query, and the previous style was support query
+        // 2. When the current style is a support query and the previous style was a support query with a different support query
+        if (previousStyle && previousStyle.support && (!style.support || style.support !== previousStyle.support)) {
+            stylesheet += '}';
+        }
+        // Close media queries:
+        // 1. When the current style is not a media query, and the previous style was media query
+        // 2. When the current style is a media query and the previous style was a media query with a different media query
+        if (previousStyle && previousStyle.media && (!style.media || style.media !== previousStyle.media)) {
+            stylesheet += '}';
+        }
+        // Only add media queries if the previous style was not the same media query
+        if (style.media && previousStyle?.media !== style.media) {
+            stylesheet += `@media ${style.media}{`;
+        }
+        // Only add support queries if the previous style was not the same support query
+        if (style.support && previousStyle?.support !== style.support) {
+            stylesheet += `@supports ${style.support}{`;
+        }
+        if (style.type === 'rule') {
+            const className = `.${style.id}`.repeat(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)) {
+            // If static, we don't add pseudo selectors currently
+            stylesheet += `${style.selector}${style.pseudo}{`;
+        }
+        stylesheet += `${style.property}:${style.value}`;
+        if (style.type === 'static') {
+            stylesheet += ';';
+        }
+        if (style.type === 'rule') {
+            stylesheet += '}';
+        }
+        previousStyle = style;
+    }
+    if (previousStyle?.support) {
+        stylesheet += '}';
+    }
+    if (previousStyle?.media) {
+        stylesheet += '}';
+    }
+    if (previousStyle?.type === 'static') {
+        stylesheet += '}';
+    }
+    return stylesheet;
+}
+
+export { printStyleBlocks };

package/printers/sortAtRules.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+var createSort = require('sort-css-media-queries/lib/create-sort.js');
+
+const sortCSSMediaQueries = createSort();
+function sortAtRules(blocks) {
+    return blocks.sort((a, b)=>sortCSSMediaQueries(a.media, b.media) || a.support.localeCompare(b.support));
+}
+
+exports.sortAtRules = sortAtRules;

package/printers/sortAtRules.mjs

@@ -0,0 +1,8 @@
+import createSort from 'sort-css-media-queries/lib/create-sort.js';
+
+const sortCSSMediaQueries = createSort();
+function sortAtRules(blocks) {
+    return blocks.sort((a, b)=>sortCSSMediaQueries(a.media, b.media) || a.support.localeCompare(b.support));
+}
+
+export { sortAtRules };

package/printers/sortStatic.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+function sortStatic(blocks) {
+    return blocks.sort((a, b)=>a.id - b.id);
+}
+
+exports.sortStatic = sortStatic;

package/printers/sortStatic.mjs

@@ -0,0 +1,5 @@
+function sortStatic(blocks) {
+    return blocks.sort((a, b)=>a.id - b.id);
+}
+
+export { sortStatic };

package/processStyles.cjs

@@ -0,0 +1,88 @@
+'use strict';
+
+var helpers_generateCombinedAtRules = require('./helpers/generateCombinedAtRules.cjs');
+var helpers_hypenateProperty = require('./helpers/hypenateProperty.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_normalizeNestedProperty = require('./helpers/normalizeNestedProperty.cjs');
+var helpers_pixelifyProperties = require('./helpers/pixelifyProperties.cjs');
+var helpers_transformContentProperty = require('./helpers/transformContentProperty.cjs');
+
+const transformValuePropertyMap = {
+    content: helpers_transformContentProperty.transformContentProperty
+};
+function processStyles({ cache , type  }) {
+    return function process({ styles , pseudo ="" , media ="" , support ="" , 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());
+                    result.push(...process({
+                        styles: value,
+                        pseudo,
+                        media: combinedMedia,
+                        support,
+                        selector
+                    }));
+                } else if (helpers_isSupportsQuery.isSupportsQuery(property)) {
+                    const combinedSupport = helpers_generateCombinedAtRules.generateCombinedAtRules(support, property.slice(9).trim());
+                    result.push(...process({
+                        styles: value,
+                        pseudo,
+                        media,
+                        support: combinedSupport,
+                        selector
+                    }));
+                } else if (helpers_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),
+                            media,
+                            support,
+                            selector
+                        }));
+                    }
+                } else {
+                    console.warn("Unknown property", property);
+                }
+            } else {
+                let newProperty = helpers_normalizeCSSVarsProperty.normalizeCSSVarsProperty(property);
+                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})`;
+                }
+                if (typeof value === "number") {
+                    newValue = helpers_pixelifyProperties.pixelifyProperties(newProperty, value);
+                }
+                if (transformValuePropertyMap[newProperty]) {
+                    newValue = transformValuePropertyMap[newProperty](value);
+                }
+                newProperty = helpers_hypenateProperty.hyphenateProperty(newProperty);
+                // Remove trailing semicolon and new lines with regex
+                result.push(cache.getOrStore({
+                    type,
+                    selector,
+                    property: newProperty,
+                    value: newValue,
+                    pseudo,
+                    media,
+                    support
+                }));
+            }
+        }
+        return result;
+    };
+}
+
+exports.processStyles = processStyles;

package/processStyles.mjs

@@ -0,0 +1,86 @@
+import { generateCombinedAtRules } from './helpers/generateCombinedAtRules.mjs';
+import { hyphenateProperty } from './helpers/hypenateProperty.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 { normalizeNestedProperty } from './helpers/normalizeNestedProperty.mjs';
+import { pixelifyProperties } from './helpers/pixelifyProperties.mjs';
+import { transformContentProperty } from './helpers/transformContentProperty.mjs';
+
+const transformValuePropertyMap = {
+    content: transformContentProperty
+};
+function processStyles({ cache , type  }) {
+    return function process({ styles , pseudo ="" , media ="" , support ="" , selector =""  }) {
+        const result = [];
+        for (const [property, value] of Object.entries(styles)){
+            if (isObject(value)) {
+                if (isMediaQuery(property)) {
+                    const combinedMedia = generateCombinedAtRules(media, property.slice(6).trim());
+                    result.push(...process({
+                        styles: value,
+                        pseudo,
+                        media: combinedMedia,
+                        support,
+                        selector
+                    }));
+                } else if (isSupportsQuery(property)) {
+                    const combinedSupport = generateCombinedAtRules(support, property.slice(9).trim());
+                    result.push(...process({
+                        styles: value,
+                        pseudo,
+                        media,
+                        support: combinedSupport,
+                        selector
+                    }));
+                } else if (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 + normalizeNestedProperty(copy),
+                            media,
+                            support,
+                            selector
+                        }));
+                    }
+                } else {
+                    console.warn("Unknown property", property);
+                }
+            } else {
+                let newProperty = normalizeCSSVarsProperty(property);
+                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})`;
+                }
+                if (typeof value === "number") {
+                    newValue = pixelifyProperties(newProperty, value);
+                }
+                if (transformValuePropertyMap[newProperty]) {
+                    newValue = transformValuePropertyMap[newProperty](value);
+                }
+                newProperty = hyphenateProperty(newProperty);
+                // Remove trailing semicolon and new lines with regex
+                result.push(cache.getOrStore({
+                    type,
+                    selector,
+                    property: newProperty,
+                    value: newValue,
+                    pseudo,
+                    media,
+                    support
+                }));
+            }
+        }
+        return result;
+    };
+}
+
+export { processStyles };

package/types.cjs

@@ -0,0 +1,2 @@
+'use strict';
+

package/types.mjs

@@ -0,0 +1 @@
+

package/wrappers/classList.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+class ClassList extends String {
+}
+
+exports.ClassList = ClassList;

package/wrappers/classList.mjs

@@ -0,0 +1,4 @@
+class ClassList extends String {
+}
+
+export { ClassList };

package/wrappers/static.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+class Static {
+}
+
+exports.Static = Static;

package/wrappers/static.mjs

@@ -0,0 +1,4 @@
+class Static {
+}
+
+export { Static };