@cssfn/cssfn - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

dist/mergeStyles.js

@@ -265,3 +265,15 @@ import {
 };
-const mergeableNestedAtRules = ['@media', '@supports', '@document', '@global'];
+const mergeableNestedAtRules = [
+    // conditional responsives:
+    '@media',
+    '@container',
+    // conditional compatibility:
+    '@supports',
+    // conditional deprecated:
+    '@document',
+    // grouping:
+    // '@layer', // do not merge anonymous layers, the orders are important
+    // unscope selector:
+    '@global',
+];
 // const unmergeableNestedAtRules = ['@keyframes', '@font-face', '@property', '@fallback'];
@@ -268,0 +280,0 @@ export const isMergeableNestedAtRule = (finalSelector) => mergeableNestedAtRules.some((at) => finalSelector.startsWith(at));

dist/renderRules.js

@@ -19,3 +19,13 @@ import {
 // utilities:
-const nestedAtRules = ['@media', '@supports', '@layer', '@document'];
+const nestedAtRules = [
+    // conditional responsives:
+    '@media',
+    '@container',
+    // conditional compatibility:
+    '@supports',
+    // conditional deprecated:
+    '@document',
+    // grouping:
+    '@layer',
+];
 export const isNestedAtRule = (finalSelector) => nestedAtRules.some((at) => finalSelector.startsWith(at));
@@ -131,4 +141,4 @@ const combineSelector = (parentSelector, nestedSelector) => {
     }
-    renderNestedSelector(finalSelector, nestedRules) {
-        if (!nestedRules)
+    renderNestedSelector(finalSelector, finalStyle) {
+        if (!finalStyle)
             return;
@@ -140,3 +150,4 @@ //#region render complete .selector { style }
         {
-            this.renderNestedRules(null, nestedRules);
+            this.renderStyle(finalStyle); // render regular_properties for @font-face // render rule_properties for @keyframes
+            this.renderNestedRules(null /* no parent (&) selector */, finalStyle);
         }
@@ -237,3 +248,3 @@ this.rendered += '\n}\n';
                     // top_level at rule with nestedRules
-                    // this.rendered += (new RenderRule(finalSelector, finalStyle)).rendered; doesn't work, the nested will automatically unnested
+                    // this.rendered += (new RenderRule(finalSelector, finalStyle, this._options)).rendered; // doesn't work, the nested will automatically *un-nested*
                     this.renderNestedSelector(finalSelector, finalStyle);
@@ -257,3 +268,4 @@ }
                 // top_level at rule  , eg: @keyframes, @font-face, @property
-                this.rendered += (new RenderRule(finalSelector, finalStyle, this._options)).rendered;
+                // this.rendered += (new RenderRule(finalSelector, finalStyle, this._options)).rendered; // doesn't work, the nested will automatically *un-nested*
+                this.renderNestedSelector(finalSelector, finalStyle);
             }
@@ -260,0 +272,0 @@ else {

package.json

 {
   "name": "@cssfn/cssfn",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Writes, imports, and exports css stylesheets as javascript modules.",
@@ -34,6 +34,6 @@ "keywords": [
   "dependencies": {
-    "@cssfn/css-prop-auto-prefix": "^3.1.0",
-    "@cssfn/css-selectors": "^3.1.0",
-    "@cssfn/css-types": "^3.1.0",
-    "@cssfn/types": "^3.1.0",
+    "@cssfn/css-prop-auto-prefix": "^3.2.0",
+    "@cssfn/css-selectors": "^3.2.0",
+    "@cssfn/css-types": "^3.2.0",
+    "@cssfn/types": "^3.2.0",
     "@types/hyphenate-style-name": "^1.0.0",
@@ -53,3 +53,3 @@ "camel-case": "^4.1.2",
   },
-  "gitHead": "adf3659c95d997c71c8465edc8a54c26d8ed4d66"
+  "gitHead": "86e3bc9e9d47919dc93eeac6bf8039bce9d03620"
 }

src/mergeStyles.ts

@@ -386,3 +386,19 @@ // cssfn:
 
-const mergeableNestedAtRules = ['@media', '@supports', '@document', '@global'];
+const mergeableNestedAtRules = [
+    // conditional responsives:
+    '@media',
+    '@container',
+    
+    // conditional compatibility:
+    '@supports',
+    
+    // conditional deprecated:
+    '@document',
+    
+    // grouping:
+    // '@layer', // do not merge anonymous layers, the orders are important
+    
+    // unscope selector:
+    '@global',
+];
 // const unmergeableNestedAtRules = ['@keyframes', '@font-face', '@property', '@fallback'];
@@ -389,0 +405,0 @@ export const isMergeableNestedAtRule = (finalSelector: CssFinalSelector) => mergeableNestedAtRules.some((at) => finalSelector.startsWith(at));

src/renderRules.ts

@@ -75,3 +75,16 @@ // cssfn:
 // utilities:
-const nestedAtRules = ['@media', '@supports', '@layer', '@document'];
+const nestedAtRules = [
+    // conditional responsives:
+    '@media',
+    '@container',
+    
+    // conditional compatibility:
+    '@supports',
+    
+    // conditional deprecated:
+    '@document',
+    
+    // grouping:
+    '@layer',
+];
 export const isNestedAtRule = (finalSelector: CssFinalSelector) => nestedAtRules.some((at) => finalSelector.startsWith(at));
@@ -231,4 +244,4 @@
     }
-    private renderNestedSelector(finalSelector: CssFinalSelector, nestedRules: CssFinalStyleMap|null): void {
-        if (!nestedRules) return;
+    private renderNestedSelector(finalSelector: CssFinalSelector, finalStyle: CssFinalStyleMap|null): void {
+        if (!finalStyle) return;
         
@@ -242,3 +255,4 @@
         {
-            this.renderNestedRules(null, nestedRules);
+            this.renderStyle(finalStyle); // render regular_properties for @font-face // render rule_properties for @keyframes
+            this.renderNestedRules(null /* no parent (&) selector */, finalStyle);
         }
@@ -354,3 +368,3 @@ this.rendered += '\n}\n';
                     
-                    // this.rendered += (new RenderRule(finalSelector, finalStyle)).rendered; doesn't work, the nested will automatically unnested
+                    // this.rendered += (new RenderRule(finalSelector, finalStyle, this._options)).rendered; // doesn't work, the nested will automatically *un-nested*
                     this.renderNestedSelector(finalSelector, finalStyle);
@@ -376,3 +390,4 @@ }
                 
-                this.rendered += (new RenderRule(finalSelector, finalStyle, this._options)).rendered;
+                // this.rendered += (new RenderRule(finalSelector, finalStyle, this._options)).rendered; // doesn't work, the nested will automatically *un-nested*
+                this.renderNestedSelector(finalSelector, finalStyle);
             }
@@ -379,0 +394,0 @@ else {

No alert changes

Improved metrics

Total package byte prevSize

723390

increased by0.21%

Lines of code

18798

increased by0.26%

Dependency changes

• Updated@cssfn/css-prop-auto-prefix@^3.2.0

• Updated@cssfn/css-selectors@^3.2.0

• Updated@cssfn/css-types@^3.2.0

• Updated@cssfn/types@^3.2.0