fix: handle scoped :global and :local in nested pseudo (#58)

css-modules · May 18, 2023 · 15041cf · 15041cf
1 parent 9adc96b
commit 15041cf
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 3 deletions.
diff --git a/src/index.js b/src/index.js
@@ -149,9 +149,19 @@ function localizeNode(rule, mode, localAliasMap) {
               hasLocals: false,
               explicit: context.explicit,
             };
-            newNodes = node.map((childNode) =>
-              transform(childNode, childContext)
-            );
+            newNodes = node.map((childNode) => {
+              const newContext = {
+                ...childContext,
+                enforceNoSpacing: false,
+              };
+
+              const result = transform(childNode, newContext);
+
+              childContext.global = newContext.global;
+              childContext.hasLocals = newContext.hasLocals;
+
+              return result;
+            });
 
             node = node.clone();
             node.nodes = normalizeNodeArray(newNodes);

diff --git a/test/index.test.js b/test/index.test.js
@@ -276,6 +276,51 @@ const tests = [
     input: ":global .foo { animation: foo; animation-name: bar; }",
     expected: ".foo { animation: foo; animation-name: bar; }",
   },
+  {
+    name: "handle nested global",
+    input: ":global .a:not(:global .b) {}",
+    expected: ".a:not(.b) {}",
+  },
+  {
+    name: "handle nested global #1",
+    input: ":global .a:not(:global .b:not(:global .c)) {}",
+    expected: ".a:not(.b:not(.c)) {}",
+  },
+  {
+    name: "handle nested global #2",
+    input: ":local .a:not(:not(:not(:global .c))) {}",
+    expected: ":local(.a):not(:not(:not(.c))) {}",
+  },
+  {
+    name: "handle nested global #3",
+    input: ":global .a:not(:global .b, :global .c) {}",
+    expected: ".a:not(.b, .c) {}",
+  },
+  {
+    name: "handle nested global #4",
+    input: ":local .a:not(:global .b, :local .c) {}",
+    expected: ":local(.a):not(.b, :local(.c)) {}",
+  },
+  {
+    name: "handle nested global #5",
+    input: ":global .a:not(:local .b, :global .c) {}",
+    expected: ".a:not(:local(.b), .c) {}",
+  },
+  {
+    name: "handle nested global #6",
+    input: ":global .a:not(.b, .c) {}",
+    expected: ".a:not(.b, .c) {}",
+  },
+  {
+    name: "handle nested global #7",
+    input: ":local .a:not(.b, .c) {}",
+    expected: ":local(.a):not(:local(.b), :local(.c)) {}",
+  },
+  {
+    name: "handle nested global #8",
+    input: ":global .a:not(:local .b, .c) {}",
+    expected: ".a:not(:local(.b), :local(.c)) {}",
+  },
   {
     name: "handle a complex animation rule",
     input:
@@ -739,6 +784,11 @@ const tests = [
     input: ":global(#) {}",
     error: /Invalid class or id selector syntax/,
   },
+  {
+    name: "throw on invalid global class usage",
+    input: ":global(.a:not(:global .b, :global .c)) {}",
+    error: /A :global is not allowed inside of a :global/,
+  },
   /*
   Bug in postcss-selector-parser
   {