add pure ignore comment for css modules

Author: jantimon

README.md

@@ -28,6 +28,21 @@ Transformation examples:
 ```
 <!-- prettier-ignore-end -->
 
+## Pure Mode
+
+In pure mode, all selectors must contain at least one local class or id
+selector
+
+To ignore this rule for a specific selector, add the following comment in front
+of the selector:
+
+```css
+/* cssmodules-pure-ignore */
+:global(#modal-backdrop) {
+  ...;
+}
+```
+
 ## Building
 
 ```bash

src/index.js

@@ -4,8 +4,26 @@ const selectorParser = require("postcss-selector-parser");
 const valueParser = require("postcss-value-parser");
 const { extractICSS } = require("icss-utils");
 
+const IGNORE_MARKER = "cssmodules-pure-ignore";
+
 const isSpacing = (node) => node.type === "combinator" && node.value === " ";
 
+function hasIgnoreComment(node) {
+  if (!node.parent) {
+    return false;
+  }
+  const indexInParent = node.parent.index(node);
+  for (let i = indexInParent - 1; i >= 0; i--) {
+    const prevNode = node.parent.nodes[i];
+    if (prevNode.type === "comment") {
+      return prevNode.text.trimStart().startsWith(IGNORE_MARKER);
+    } else {
+      break;
+    }
+  }
+  return false;
+}
+
 function normalizeNodeArray(nodes) {
   const array = [];
 
@@ -514,7 +532,7 @@ module.exports = (options = {}) => {
               let globalKeyframes = globalMode;
 
               if (globalMatch) {
-                if (pureMode) {
+                if (pureMode && !hasIgnoreComment(atRule)) {
                   throw atRule.error(
                     "@keyframes :global(...) is not allowed in pure mode"
                   );
@@ -554,7 +572,11 @@ module.exports = (options = {}) => {
                     context.options = options;
                     context.localAliasMap = localAliasMap;
 
-                    if (pureMode && context.hasPureGlobals) {
+                    if (
+                      pureMode &&
+                      context.hasPureGlobals &&
+                      !hasIgnoreComment(atRule)
+                    ) {
                       throw atRule.error(
                         'Selector in at-rule"' +
                           selector +
@@ -605,7 +627,7 @@ module.exports = (options = {}) => {
             context.options = options;
             context.localAliasMap = localAliasMap;
 
-            if (pureMode && context.hasPureGlobals) {
+            if (pureMode && context.hasPureGlobals && !hasIgnoreComment(rule)) {
               throw rule.error(
                 'Selector "' +
                   rule.selector +

test/index.test.js

@@ -876,6 +876,147 @@ const tests = [
     options: { mode: "pure" },
     error: /is not pure/,
   },
+  {
+    name: "should suppress errors for global selectors after ignore comment",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore */
+            :global(.foo) { color: blue; }`,
+    expected: `/* cssmodules-pure-ignore */
+            .foo { color: blue; }`,
+  },
+  {
+    name: "should allow additional text in ignore comment",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore - needed for third party integration */
+            :global(#foo) { color: blue; }`,
+    expected: `/* cssmodules-pure-ignore - needed for third party integration */
+            #foo { color: blue; }`,
+  },
+  {
+    name: "should not affect rules after the ignored block",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore */
+            :global(.foo) { color: blue; }
+            :global(.bar) { color: red; }`,
+    error: /is not pure/,
+  },
+  {
+    name: "should work with nested global selectors in ignored block",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore */
+            :global(.foo) {
+              :global(.bar) { color: blue; }
+            }`,
+    error: /is not pure/,
+  },
+  {
+    name: "should work with ignored nested global selectors in ignored block",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore */
+            :global(.foo) {
+              /* cssmodules-pure-ignore */
+              :global(.bar) { color: blue; }
+            }`,
+    expected: `/* cssmodules-pure-ignore */
+            .foo {
+              /* cssmodules-pure-ignore */
+              .bar { color: blue; }
+            }`,
+  },
+  {
+    name: "should work with view transitions in ignored block",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore */
+            ::view-transition-group(modal) {
+              animation-duration: 300ms;
+            }`,
+    expected: `/* cssmodules-pure-ignore */
+            ::view-transition-group(modal) {
+              animation-duration: 300ms;
+            }`,
+  },
+  {
+    name: "should work with keyframes in ignored block",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore */
+            @keyframes :global(fadeOut) {
+              from { opacity: 1; }
+              to { opacity: 0; }
+            }`,
+    expected: `/* cssmodules-pure-ignore */
+            @keyframes fadeOut {
+              from { opacity: 1; }
+              to { opacity: 0; }
+            }`,
+  },
+  {
+    name: "should work in media queries",
+    options: { mode: "pure" },
+    input: `@media (min-width: 768px) {
+              /* cssmodules-pure-ignore */
+              :global(.foo) { color: blue; }
+            }`,
+    expected: `@media (min-width: 768px) {
+              /* cssmodules-pure-ignore */
+              .foo { color: blue; }
+            }`,
+  },
+  {
+    name: "should handle multiple ignore comments",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore */
+            :global(.foo) { color: blue; }
+            .local { color: green; }
+            /* cssmodules-pure-ignore */
+            :global(.bar) { color: red; }`,
+    expected: `/* cssmodules-pure-ignore */
+            .foo { color: blue; }
+            :local(.local) { color: green; }
+            /* cssmodules-pure-ignore */
+            .bar { color: red; }`,
+  },
+  {
+    name: "should work with complex selectors in ignored block",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore */
+            :global(.foo):hover > :global(.bar) + :global(.baz) {
+              color: blue;
+            }`,
+    expected: `/* cssmodules-pure-ignore */
+            .foo:hover > .bar + .baz {
+              color: blue;
+            }`,
+  },
+  {
+    name: "should work with multiple selectors in ignored block",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore */
+            :global(.foo),
+            :global(.bar),
+            :global(.baz) {
+              color: blue;
+            }`,
+    expected: `/* cssmodules-pure-ignore */
+            .foo,
+            .bar,
+            .baz {
+              color: blue;
+            }`,
+  },
+  {
+    name: "should work with pseudo-elements in ignored block",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore */
+            :global(.foo)::before,
+            :global(.foo)::after {
+              content: '';
+            }`,
+    expected: `/* cssmodules-pure-ignore */
+            .foo::before,
+            .foo::after {
+              content: '';
+            }`,
+  },
   {
     name: "css nesting",
     input: `