@navita/engine 0.1.0 → 0.1.2

package/helpers/isContainerQuery.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+function isContainerQuery(property) {
+    return property.startsWith("@container");
+}
+
+exports.isContainerQuery = isContainerQuery;

package/helpers/isContainerQuery.mjs

@@ -0,0 +1,5 @@
+function isContainerQuery(property) {
+    return property.startsWith("@container");
+}
+
+export { isContainerQuery };

package/identifiers/propertyValueIDGenerator.cjs

@@ -5,8 +5,8 @@ var identifiers_alphaIDGenerator = require('./alphaIDGenerator.cjs');
 class PropertyValueIDGenerator {
     property = new identifiers_alphaIDGenerator.AlphaIDGenerator();
     cache = {};
-    next({ property , media ='' , support ='' , pseudo ='' , value  }) {
-        const propertyKey = `${media}${support}${pseudo}${property}`;
+    next({ property , media ='' , support ='' , container ='' , pseudo ='' , value  }) {
+        const propertyKey = `${media}${support}${container}${pseudo}${property}`;
         if (this.cache[propertyKey] === undefined) {
             this.cache[propertyKey] = {
                 key: this.property.next(),

package/identifiers/propertyValueIDGenerator.mjs

@@ -3,8 +3,8 @@ import { AlphaIDGenerator } from './alphaIDGenerator.mjs';
 class PropertyValueIDGenerator {
     property = new AlphaIDGenerator();
     cache = {};
-    next({ property , media ='' , support ='' , pseudo ='' , value  }) {
-        const propertyKey = `${media}${support}${pseudo}${property}`;
+    next({ property , media ='' , support ='' , container ='' , pseudo ='' , value  }) {
+        const propertyKey = `${media}${support}${container}${pseudo}${property}`;
         if (this.cache[propertyKey] === undefined) {
             this.cache[propertyKey] = {
                 key: this.property.next(),

package/package.json

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

package/printers/printStyleBlocks.cjs

@@ -6,7 +6,13 @@ 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)) {
+        if (style.type === 'static' && previousStyle && (previousStyle.selector !== style.selector || previousStyle.pseudo !== style.pseudo || previousStyle.media !== style.media || previousStyle.support !== style.support || previousStyle.container !== style.container)) {
+            stylesheet += '}';
+        }
+        // Close container queries:
+        // 1. When the current style is not a container query, and the previous style was container query
+        // 2. When the current style is a container query and the previous style was a container query with a different container query
+        if (previousStyle && previousStyle.container && (!style.container || style.container !== previousStyle.container)) {
             stylesheet += '}';
         }
         // Close support queries:
@@ -29,10 +35,14 @@ function printStyleBlocks(blocks) {
         if (style.support && previousStyle?.support !== style.support) {
             stylesheet += `@supports ${style.support}{`;
         }
+        // Only add container queries if the previous style was not the same container query
+        if (style.container && previousStyle?.container !== style.container) {
+            stylesheet += `@container ${style.container}{`;
+        }
         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)) {
+        } 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
             stylesheet += `${style.selector}${style.pseudo}{`;
         }
@@ -45,6 +55,9 @@ function printStyleBlocks(blocks) {
         }
         previousStyle = style;
     }
+    if (previousStyle?.container) {
+        stylesheet += '}';
+    }
     if (previousStyle?.support) {
         stylesheet += '}';
     }

package/printers/printStyleBlocks.mjs

@@ -4,7 +4,13 @@ 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)) {
+        if (style.type === 'static' && previousStyle && (previousStyle.selector !== style.selector || previousStyle.pseudo !== style.pseudo || previousStyle.media !== style.media || previousStyle.support !== style.support || previousStyle.container !== style.container)) {
+            stylesheet += '}';
+        }
+        // Close container queries:
+        // 1. When the current style is not a container query, and the previous style was container query
+        // 2. When the current style is a container query and the previous style was a container query with a different container query
+        if (previousStyle && previousStyle.container && (!style.container || style.container !== previousStyle.container)) {
             stylesheet += '}';
         }
         // Close support queries:
@@ -27,10 +33,14 @@ function printStyleBlocks(blocks) {
         if (style.support && previousStyle?.support !== style.support) {
             stylesheet += `@supports ${style.support}{`;
         }
+        // Only add container queries if the previous style was not the same container query
+        if (style.container && previousStyle?.container !== style.container) {
+            stylesheet += `@container ${style.container}{`;
+        }
         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)) {
+        } 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
             stylesheet += `${style.selector}${style.pseudo}{`;
         }
@@ -43,6 +53,9 @@ function printStyleBlocks(blocks) {
         }
         previousStyle = style;
     }
+    if (previousStyle?.container) {
+        stylesheet += '}';
+    }
     if (previousStyle?.support) {
         stylesheet += '}';
     }

package/processStyles.cjs

@@ -2,6 +2,7 @@
 
 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');
@@ -16,7 +17,7 @@ const transformValuePropertyMap = {
     content: helpers_transformContentProperty.transformContentProperty
 };
 function processStyles({ cache , type  }) {
-    return function process({ styles , pseudo ="" , media ="" , support ="" , selector =""  }) {
+    return function process({ styles , pseudo ="" , media ="" , support ="" , container ="" , selector =""  }) {
         const result = [];
         for (const [property, value] of Object.entries(styles)){
             if (helpers_isObject.isObject(value)) {
@@ -27,18 +28,36 @@ function processStyles({ cache , type  }) {
                         pseudo,
                         media: combinedMedia,
                         support,
+                        container,
                         selector
                     }));
-                } else if (helpers_isSupportsQuery.isSupportsQuery(property)) {
+                    continue;
+                }
+                if (helpers_isSupportsQuery.isSupportsQuery(property)) {
                     const combinedSupport = helpers_generateCombinedAtRules.generateCombinedAtRules(support, property.slice(9).trim());
                     result.push(...process({
                         styles: value,
                         pseudo,
                         media,
                         support: combinedSupport,
+                        container,
+                        selector
+                    }));
+                    continue;
+                }
+                if (helpers_isContainerQuery.isContainerQuery(property)) {
+                    const combinedContainer = helpers_generateCombinedAtRules.generateCombinedAtRules(container, property.slice(10).trim());
+                    result.push(...process({
+                        styles: value,
+                        pseudo,
+                        media,
+                        support,
+                        container: combinedContainer,
                         selector
                     }));
-                } else if (helpers_isNestedSelector.isNestedSelector(property)) {
+                    continue;
+                }
+                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){
@@ -47,37 +66,39 @@ function processStyles({ cache , type  }) {
                             pseudo: pseudo + helpers_normalizeNestedProperty.normalizeNestedProperty(copy),
                             media,
                             support,
+                            container,
                             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]*$/, "");
-                    newValue = helpers_normalizeCSSVarsValue.normalizeCSSVarsValue(newValue);
-                }
-                if (typeof value === "number") {
-                    newValue = helpers_pixelifyProperties.pixelifyProperties(newProperty, value);
+                    continue;
                 }
-                if (transformValuePropertyMap[newProperty]) {
-                    newValue = transformValuePropertyMap[newProperty](value);
-                }
-                newProperty = helpers_hyphenateProperty.hyphenateProperty(newProperty);
-                // Remove trailing semicolon and new lines with regex
-                result.push(cache.getOrStore({
-                    type,
-                    selector,
-                    property: newProperty,
-                    value: newValue,
-                    pseudo,
-                    media,
-                    support
-                }));
+                console.warn("Unknown property", property);
+                continue;
+            }
+            let newProperty = helpers_normalizeCSSVarsProperty.normalizeCSSVarsProperty(property);
+            let newValue = value;
+            if (typeof value === "string") {
+                newValue = value.trim().replace(/;[\n\s]*$/, "");
+                newValue = helpers_normalizeCSSVarsValue.normalizeCSSVarsValue(newValue);
+            }
+            if (typeof value === "number") {
+                newValue = helpers_pixelifyProperties.pixelifyProperties(newProperty, value);
+            }
+            if (transformValuePropertyMap[newProperty]) {
+                newValue = transformValuePropertyMap[newProperty](value);
             }
+            newProperty = helpers_hyphenateProperty.hyphenateProperty(newProperty);
+            // Remove trailing semicolon and new lines with regex
+            result.push(cache.getOrStore({
+                type,
+                selector,
+                property: newProperty,
+                value: newValue,
+                pseudo,
+                media,
+                support,
+                container
+            }));
         }
         return result;
     };

package/processStyles.mjs

@@ -1,5 +1,6 @@
 import { generateCombinedAtRules } from './helpers/generateCombinedAtRules.mjs';
 import { hyphenateProperty } from './helpers/hyphenateProperty.mjs';
+import { isContainerQuery } from './helpers/isContainerQuery.mjs';
 import { isMediaQuery } from './helpers/isMediaQuery.mjs';
 import { isNestedSelector } from './helpers/isNestedSelector.mjs';
 import { isObject } from './helpers/isObject.mjs';
@@ -14,7 +15,7 @@ const transformValuePropertyMap = {
     content: transformContentProperty
 };
 function processStyles({ cache , type  }) {
-    return function process({ styles , pseudo ="" , media ="" , support ="" , selector =""  }) {
+    return function process({ styles , pseudo ="" , media ="" , support ="" , container ="" , selector =""  }) {
         const result = [];
         for (const [property, value] of Object.entries(styles)){
             if (isObject(value)) {
@@ -25,18 +26,36 @@ function processStyles({ cache , type  }) {
                         pseudo,
                         media: combinedMedia,
                         support,
+                        container,
                         selector
                     }));
-                } else if (isSupportsQuery(property)) {
+                    continue;
+                }
+                if (isSupportsQuery(property)) {
                     const combinedSupport = generateCombinedAtRules(support, property.slice(9).trim());
                     result.push(...process({
                         styles: value,
                         pseudo,
                         media,
                         support: combinedSupport,
+                        container,
+                        selector
+                    }));
+                    continue;
+                }
+                if (isContainerQuery(property)) {
+                    const combinedContainer = generateCombinedAtRules(container, property.slice(10).trim());
+                    result.push(...process({
+                        styles: value,
+                        pseudo,
+                        media,
+                        support,
+                        container: combinedContainer,
                         selector
                     }));
-                } else if (isNestedSelector(property)) {
+                    continue;
+                }
+                if (isNestedSelector(property)) {
                     // This is only allowed in simple pseudos currently.
                     const copies = property.split(',').map((p)=>p.trim());
                     for (const copy of copies){
@@ -45,37 +64,39 @@ function processStyles({ cache , type  }) {
                             pseudo: pseudo + normalizeNestedProperty(copy),
                             media,
                             support,
+                            container,
                             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]*$/, "");
-                    newValue = normalizeCSSVarsValue(newValue);
-                }
-                if (typeof value === "number") {
-                    newValue = pixelifyProperties(newProperty, value);
+                    continue;
                 }
-                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
-                }));
+                console.warn("Unknown property", property);
+                continue;
+            }
+            let newProperty = normalizeCSSVarsProperty(property);
+            let newValue = value;
+            if (typeof value === "string") {
+                newValue = value.trim().replace(/;[\n\s]*$/, "");
+                newValue = normalizeCSSVarsValue(newValue);
+            }
+            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,
+                container
+            }));
         }
         return result;
     };