@navita/engine 0.0.13 → 0.1.1

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/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/helpers/normalizeCSSVarsValue.cjs

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

package/helpers/normalizeCSSVarsValue.mjs

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

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.13",
+  "version": "0.1.1",
   "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/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,22 +1,23 @@
 '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_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 helpers_normalizeCSSVarsValue = require('./helpers/normalizeCSSVarsValue.cjs');
 
 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_hypenateProperty.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,20 +1,21 @@
 import { generateCombinedAtRules } from './helpers/generateCombinedAtRules.mjs';
-import { hyphenateProperty } from './helpers/hypenateProperty.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';
 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';
-import { normalizeCSSVarsValue } from './helpers/normalizeCSSVarsValue.mjs';
 
 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;
     };