fix: support css nesting and scope at-rule (#59)

Author: alexander-akait

src/index.js

@@ -4,7 +4,23 @@ const selectorParser = require("postcss-selector-parser");
 
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
-function getSingleLocalNamesForComposes(root) {
+function isNestedRule(rule) {
+  if (!rule.parent || rule.parent.type === "root") {
+    return false;
+  }
+
+  if (rule.parent.type === "rule") {
+    return true;
+  }
+
+  return isNestedRule(rule.parent);
+}
+
+function getSingleLocalNamesForComposes(root, rule) {
+  if (isNestedRule(rule)) {
+    throw new Error(`composition is not allowed in nested rule \n\n${rule}`);
+  }
+
   return root.nodes.map((node) => {
     if (node.type !== "selector" || node.nodes.length !== 1) {
       throw new Error(
@@ -91,7 +107,7 @@ const plugin = (options = {}) => {
     Once(root, { rule }) {
       const exports = Object.create(null);
 
-      function exportScopedName(name, rawName, node) {
+      function exportScopedName(name, rawName, node, needExport = true) {
         const scopedName = generateScopedName(
           rawName ? rawName : name,
           root.source.input.from,
@@ -107,6 +123,10 @@ const plugin = (options = {}) => {
         );
         const { key, value } = exportEntry;
 
+        if (!needExport) {
+          return scopedName;
+        }
+
         exports[key] = exports[key] || [];
 
         if (exports[key].indexOf(value) < 0) {
@@ -116,25 +136,27 @@ const plugin = (options = {}) => {
         return scopedName;
       }
 
-      function localizeNode(node) {
+      function localizeNode(node, needExport = true) {
         switch (node.type) {
           case "selector":
-            node.nodes = node.map(localizeNode);
+            node.nodes = node.map((item) => localizeNode(item, needExport));
             return node;
           case "class":
             return selectorParser.className({
               value: exportScopedName(
                 node.value,
                 node.raws && node.raws.value ? node.raws.value : null,
-                node
+                node,
+                needExport
               ),
             });
           case "id": {
             return selectorParser.id({
               value: exportScopedName(
                 node.value,
                 node.raws && node.raws.value ? node.raws.value : null,
-                node
+                node,
+                needExport
               ),
             });
           }
@@ -144,7 +166,7 @@ const plugin = (options = {}) => {
                 attribute: node.attribute,
                 operator: node.operator,
                 quoteMark: "'",
-                value: exportScopedName(node.value),
+                value: exportScopedName(node.value, null, null, needExport),
               });
             }
           }
@@ -155,15 +177,15 @@ const plugin = (options = {}) => {
         );
       }
 
-      function traverseNode(node) {
+      function traverseNode(node, needExport = true) {
         switch (node.type) {
           case "pseudo":
             if (node.value === ":local") {
               if (node.nodes.length !== 1) {
                 throw new Error('Unexpected comma (",") in :local block');
               }
 
-              const selector = localizeNode(node.first, node.spaces);
+              const selector = localizeNode(node.first, needExport);
               // move the spaces that were around the pseudo selector to the first
               // non-container node
               selector.first.spaces = node.spaces;
@@ -186,12 +208,12 @@ const plugin = (options = {}) => {
           /* falls through */
           case "root":
           case "selector": {
-            node.each(traverseNode);
+            node.each((item) => traverseNode(item, needExport));
             break;
           }
           case "id":
           case "class":
-            if (exportGlobals) {
+            if (needExport && exportGlobals) {
               exports[node.value] = [node.value];
             }
             break;
@@ -215,7 +237,10 @@ const plugin = (options = {}) => {
         rule.selector = traverseNode(parsedSelector.clone()).toString();
 
         rule.walkDecls(/composes|compose-with/i, (decl) => {
-          const localNames = getSingleLocalNamesForComposes(parsedSelector);
+          const localNames = getSingleLocalNamesForComposes(
+            parsedSelector,
+            decl.parent
+          );
           const classes = decl.value.split(/\s+/);
 
           classes.forEach((className) => {
@@ -291,6 +316,25 @@ const plugin = (options = {}) => {
         atRule.params = exportScopedName(localMatch[1]);
       });
 
+      root.walkAtRules(/scope$/i, (atRule) => {
+        atRule.params = atRule.params
+          .split("to")
+          .map((item) => {
+            const selector = item.trim().slice(1, -1).trim();
+
+            const localMatch = /^\s*:local\s*\((.+?)\)\s*$/.exec(selector);
+
+            if (!localMatch) {
+              return `(${selector})`;
+            }
+
+            let parsedSelector = selectorParser().astSync(selector);
+
+            return `(${traverseNode(parsedSelector, false).toString()})`;
+          })
+          .join(" to ");
+      });
+
       // If we found any :locals, insert an :export rule
       const exportedNames = Object.keys(exports);
 

test/test-cases/at-rule-scope/expected.css

@@ -0,0 +1,35 @@
+._input__d {
+  color: red;
+}
+
+@scope (._input__a) to (._input__b) {
+  ._input__c {
+    border: 5px solid black;
+    background-color: goldenrod;
+  }
+}
+
+@scope (._input__a) {
+  ._input__e {
+    border: 5px solid black;
+  }
+}
+
+@scope (._input__a) to (img) {
+  ._input__f {
+    background-color: goldenrod;
+  }
+}
+
+@scope (._input__g) {
+  img {
+    backdrop-filter: blur(2px);
+  }
+}
+
+:export {
+  d: _input__d;
+  c: _input__c;
+  e: _input__e;
+  f: _input__f;
+}

test/test-cases/at-rule-scope/source.css

@@ -0,0 +1,28 @@
+:local(.d) {
+  color: red;
+}
+
+@scope (:local(.a)) to (:local(.b)) {
+  :local(.c) {
+    border: 5px solid black;
+    background-color: goldenrod;
+  }
+}
+
+@scope (:local(.a)) {
+  :local(.e) {
+    border: 5px solid black;
+  }
+}
+
+@scope (:local(.a)) to (img) {
+  :local(.f) {
+    background-color: goldenrod;
+  }
+}
+
+@scope (:local(.g)) {
+  img {
+    backdrop-filter: blur(2px);
+  }
+}

test/test-cases/at-rule/expected.css

@@ -0,0 +1,18 @@
+._input__otherClass {
+  background: red;
+}
+
+@media screen {
+  ._input__foo {
+    color: green;
+    ._input__baz {
+      color: blue;
+    }
+  }
+}
+
+:export {
+  otherClass: _input__otherClass;
+  foo: _input__foo;
+  baz: _input__baz;
+}

test/test-cases/at-rule/source.css

@@ -0,0 +1,12 @@
+:local(.otherClass) {
+  background: red;
+}
+
+@media screen {
+  :local(.foo) {
+    color: green;
+    :local(.baz) {
+      color: blue;
+    }
+  }
+}

test/test-cases/css-nesting-composes/expected.css

@@ -0,0 +1,16 @@
+._input__bar {
+  color: red;
+}
+
+._input__foo {
+  display: grid;
+
+  @media (orientation: landscape) {
+    grid-auto-flow: column;
+  }
+}
+
+:export {
+  bar: _input__bar;
+  foo: _input__foo _input__bar;
+}

test/test-cases/css-nesting-composes/source.css

@@ -0,0 +1,12 @@
+:local(.bar) {
+  color: red;
+}
+
+:local(.foo) {
+  display: grid;
+  composes: bar;
+
+  @media (orientation: landscape) {
+    grid-auto-flow: column;
+  }
+}

test/test-cases/css-nesting/expected.css

@@ -0,0 +1,39 @@
+._input__otherClass {
+  background: red;
+}
+
+._input__foo {
+  color: green;
+
+  @media (max-width: 520px) {
+    ._input__bar {
+      color: darkgreen;
+    }
+
+    &._input__baz {
+      color: blue;
+    }
+  }
+}
+
+._input__a {
+  color: red;
+
+  &._input__b {
+    color: green;
+  }
+
+  ._input__c {
+    color: blue;
+  }
+}
+
+:export {
+  otherClass: _input__otherClass;
+  foo: _input__foo;
+  bar: _input__bar;
+  baz: _input__baz;
+  a: _input__a;
+  b: _input__b;
+  c: _input__c;
+}

test/test-cases/css-nesting/source.css

@@ -0,0 +1,29 @@
+:local(.otherClass) {
+  background: red;
+}
+
+:local(.foo) {
+  color: green;
+
+  @media (max-width: 520px) {
+    :local(.bar) {
+      color: darkgreen;
+    }
+
+    &:local(.baz) {
+      color: blue;
+    }
+  }
+}
+
+:local(.a) {
+  color: red;
+
+  &:local(.b) {
+    color: green;
+  }
+
+  :local(.c) {
+    color: blue;
+  }
+}

test/test-cases/error-composes-css-nesting-at-rule/expected.error.txt

@@ -0,0 +1 @@
+composition is not allowed in nested rule

test/test-cases/error-composes-css-nesting-at-rule/source.css

@@ -0,0 +1,10 @@
+:local(.otherClassName) {
+}
+
+@media (min-width: 1024px) {
+  :local(.a) {
+    :local(.b) {
+      compose-with: otherClassName;
+    }
+  }
+}

test/test-cases/error-composes-css-nesting-with-media/expected.error.txt

@@ -0,0 +1 @@
+composition is not allowed in nested rule

test/test-cases/error-composes-css-nesting-with-media/source.css

@@ -0,0 +1,10 @@
+:local(.otherClassName) {
+}
+
+:local(.a) {
+  @media (min-width: 1024px) {
+    :local(.b) {
+      compose-with: otherClassName;
+    }
+  }
+}

test/test-cases/error-composes-css-nesting/expected.error.txt

@@ -0,0 +1 @@
+composition is not allowed in nested rule

test/test-cases/error-composes-css-nesting/source.css

@@ -0,0 +1,8 @@
+:local(.otherClassName) {
+}
+
+:local(.a) {
+  :local(.b) {
+    compose-with: otherClassName;
+  }
+}

test/test-cases/error-composes-keyframes/expected.error.txt

@@ -0,0 +1 @@
+composition is only allowed when selector is single :local class name not in "to", "to" is weird