incorrectly expand css nesting rules #38

tbela99 · Jun 20, 2024 · d8ef152 · d8ef152
1 parent 9e832ba
commit d8ef152
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## V0.5.3
+
+- [x] incorrectly expand css nesting rules
+
 ## V0.5.1
 
 - [x] failed to flatten @import when using url() syntax

diff --git a/dist/index-umd-web.js b/dist/index-umd-web.js
@@ -1481,7 +1481,7 @@
                 return val / 4.5;
             }
             return sign * (Math.pow((abs + α - 1) / α, 1 / 0.45));
-        }).concat(a == null || a == 1 ? [] : [a]);
+        }).concat([] );
     }
     function lrec20202rec2020(r, g, b, a) {
         // convert an array of linear-light rec2020 RGB  in the range 0.0-1.0
@@ -7264,7 +7264,8 @@
         for (const t of walkValues(tokens)) {
             if (t.value.typ == exports.EnumToken.LiteralTokenType) {
                 if (t.value.val == '&') {
-                    t.value.val = replace;
+                    const rule = splitRule(replace);
+                    t.value.val = rule.length > 1 ? ':is(' + replace + ')' : replace;
                 }
                 else if (t.value.val.length > 1 && t.value.val.charAt(0) == '&') {
                     t.value.val = replaceCompoundLiteral(t.value.val, replace);

diff --git a/dist/index.cjs b/dist/index.cjs
@@ -1479,7 +1479,7 @@ function rec20202lrec2020(r, g, b, a) {
             return val / 4.5;
         }
         return sign * (Math.pow((abs + α - 1) / α, 1 / 0.45));
-    }).concat(a == null || a == 1 ? [] : [a]);
+    }).concat([] );
 }
 function lrec20202rec2020(r, g, b, a) {
     // convert an array of linear-light rec2020 RGB  in the range 0.0-1.0
@@ -7262,7 +7262,8 @@ function replaceCompound(input, replace) {
     for (const t of walkValues(tokens)) {
         if (t.value.typ == exports.EnumToken.LiteralTokenType) {
             if (t.value.val == '&') {
-                t.value.val = replace;
+                const rule = splitRule(replace);
+                t.value.val = rule.length > 1 ? ':is(' + replace + ')' : replace;
             }
             else if (t.value.val.length > 1 && t.value.val.charAt(0) == '&') {
                 t.value.val = replaceCompoundLiteral(t.value.val, replace);

diff --git a/dist/lib/ast/expand.js b/dist/lib/ast/expand.js
@@ -121,7 +121,8 @@ function replaceCompound(input, replace) {
     for (const t of walkValues(tokens)) {
         if (t.value.typ == EnumToken.LiteralTokenType) {
             if (t.value.val == '&') {
-                t.value.val = replace;
+                const rule = splitRule(replace);
+                t.value.val = rule.length > 1 ? ':is(' + replace + ')' : replace;
             }
             else if (t.value.val.length > 1 && t.value.val.charAt(0) == '&') {
                 t.value.val = replaceCompoundLiteral(t.value.val, replace);

diff --git a/dist/lib/renderer/color/rec2020.js b/dist/lib/renderer/color/rec2020.js
@@ -28,7 +28,7 @@ function rec20202lrec2020(r, g, b, a) {
             return val / 4.5;
         }
         return sign * (Math.pow((abs + α - 1) / α, 1 / 0.45));
-    }).concat(a == null || a == 1 ? [] : [a]);
+    }).concat([] );
 }
 function lrec20202rec2020(r, g, b, a) {
     // convert an array of linear-light rec2020 RGB  in the range 0.0-1.0

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@tbela99/css-parser",
   "description": "CSS parser for node and the browser",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "exports": {
     ".": "./dist/node/index.js",
     "./umd": "./dist/index-umd-web.js",

diff --git a/src/lib/ast/expand.ts b/src/lib/ast/expand.ts
@@ -81,10 +81,10 @@ function expandRule(node: AstRule): Array<AstRule | AstAtRule> {
 
                 if (!rule.sel.includes('&')) {
 
-                    const selRule = splitRule(rule.sel);
+                    const selRule: string[][] = splitRule(rule.sel);
                     selRule.forEach(arr => combinators.includes(arr[0].charAt(0)) ? arr.unshift(ast.sel) : arr.unshift(ast.sel, ' '));
 
-                    rule.sel = selRule.reduce((acc, curr) => {
+                    rule.sel = selRule.reduce((acc: string[], curr: string[]) => {
 
                         acc.push(curr.join(''));
 
@@ -102,7 +102,7 @@ function expandRule(node: AstRule): Array<AstRule | AstAtRule> {
 
 
                 let astAtRule: AstAtRule = <AstAtRule>ast.chi[i];
-                const values = <Array<AstRule | AstAtRule>>[];
+                const values: Array<AstRule | AstAtRule> = <Array<AstRule | AstAtRule>>[];
 
                 if (astAtRule.nam == 'scope') {
 
@@ -171,7 +171,9 @@ export function replaceCompound(input: string, replace: string) {
 
             if (t.value.val == '&') {
 
-                t.value.val = replace;
+                const rule = splitRule(replace);
+
+                t.value.val = rule.length > 1 ? ':is(' + replace + ')' : replace;
             } else if (t.value.val.length > 1 && t.value.val.charAt(0) == '&') {
 
                 t.value.val = replaceCompoundLiteral(t.value.val, replace);

diff --git a/test/specs/code/nesting.js b/test/specs/code/nesting.js
@@ -333,7 +333,6 @@ export function run(describe, expect, transform, parse, render, dirname, readFil
             }).then((result) => expect(result.code).equals(`.nav-pills{.nav-link.active,.show>.nav-link{color:var(--bs-nav-pills-link-active-color);background-color:var(--bs-nav-pills-link-active-bg)}}`));
         });
 
-
         it('merge selectors #16', function () {
             const file = `
 
@@ -356,6 +355,86 @@ a {
             }).then(result => expect(result.code).equals(`a{color:rgb(var(--bs-link-color-rgb) var(--bs-link-opacity,1));text-decoration:underline;:hover,& span{--bs-link-color-rgb:var(--bs-link-hover-color-rgb)}}`));
         });
 
+        it('merge selectors #17', function () {
+            const file = `
+table.colortable {
+ width: 100%;
+ text-shadow: none;
+ border-collapse: collapse;
+ & td {
+  text-align: center;
+  &.c {
+   text-transform: uppercase;
+   background: #ff0
+  }
+ }
+ & th {
+  text-align: center;
+  color: green;
+  font-weight: 400;
+  padding: 2px 3px
+ }
+ & td,& th {
+  border: 1px solid #d9dadd;
+  padding: 5px
+ }
+}
+.foo {
+ color: blue;
+ & {
+  padding: 2ch;
+  color: blue;
+  && {
+   padding: 2ch
+  }
+ }
+}
+.error,#404 {
+ &:hover>.baz {
+  color: red
+ }
+}
+`;
+            return transform(file, {
+                expandNestingRules: true,
+                minify: false
+            }).then(result => expect(result.code).equals(`table.colortable {
+ width: 100%;
+ text-shadow: none;
+ border-collapse: collapse
+}
+table.colortable td {
+ text-align: center
+}
+table.colortable td.c {
+ text-transform: uppercase;
+ background: #ff0
+}
+table.colortable th {
+ text-align: center;
+ color: green;
+ font-weight: 400;
+ padding: 2px 3px
+}
+table.colortable td,table.colortable th {
+ border: 1px solid #d9dadd;
+ padding: 5px
+}
+.foo {
+ color: blue
+}
+.foo {
+ padding: 2ch;
+ color: blue
+}
+.foo.foo {
+ padding: 2ch
+}
+:is(.error,#404):hover>.baz {
+ color: red
+}`));
+        });
+
         // see https://www.w3.org/TR/css-nesting-1/#conditionals
         /*
         .header {

diff --git a/tools/shorthand.ts b/tools/shorthand.ts
@@ -13,7 +13,6 @@ function createProperties(data: ShorthandPropertyType) {
     return {
         [data.shorthand]: {...data}, ...data.properties.reduce((acc, property: string) => {
 
-
             return Object.assign(acc, {
                 [property]: {
                     map,