remove comments

css-modules · Nov 1, 2024 · d3cd217 · d3cd217
1 parent c812ff4
commit d3cd217
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 34 deletions.
diff --git a/src/index.js b/src/index.js
@@ -8,20 +8,18 @@ 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);
+function getIgnoreComment(node) {
+  const indexInParent = node.parent ? node.parent.index(node) : -1;
   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);
+      if (prevNode.text.trimStart().startsWith(IGNORE_MARKER)) {
+        return prevNode;
+      }
     } else {
       break;
     }
   }
-  return false;
 }
 
 function normalizeNodeArray(nodes) {
@@ -521,6 +519,7 @@ module.exports = (options = {}) => {
           });
 
           root.walkAtRules((atRule) => {
+            const ignoreComment = getIgnoreComment(atRule);
             if (/keyframes$/i.test(atRule.name)) {
               const globalMatch = /^\s*:global\s*\((.+)\)\s*$/.exec(
                 atRule.params
@@ -532,7 +531,7 @@ module.exports = (options = {}) => {
               let globalKeyframes = globalMode;
 
               if (globalMatch) {
-                if (pureMode && !hasIgnoreComment(atRule)) {
+                if (pureMode && !ignoreComment) {
                   throw atRule.error(
                     "@keyframes :global(...) is not allowed in pure mode"
                   );
@@ -572,11 +571,7 @@ module.exports = (options = {}) => {
                     context.options = options;
                     context.localAliasMap = localAliasMap;
 
-                    if (
-                      pureMode &&
-                      context.hasPureGlobals &&
-                      !hasIgnoreComment(atRule)
-                    ) {
+                    if (pureMode && context.hasPureGlobals && ignoreComment) {
                       throw atRule.error(
                         'Selector in at-rule"' +
                           selector +
@@ -610,9 +605,14 @@ module.exports = (options = {}) => {
                 }
               });
             }
+
+            if (ignoreComment) {
+              ignoreComment.remove();
+            }
           });
 
           root.walkRules((rule) => {
+            const ignoreComment = getIgnoreComment(rule);
             if (
               rule.parent &&
               rule.parent.type === "atrule" &&
@@ -627,7 +627,7 @@ module.exports = (options = {}) => {
             context.options = options;
             context.localAliasMap = localAliasMap;
 
-            if (pureMode && context.hasPureGlobals && !hasIgnoreComment(rule)) {
+            if (pureMode && context.hasPureGlobals && !ignoreComment) {
               throw rule.error(
                 'Selector "' +
                   rule.selector +
@@ -644,6 +644,10 @@ module.exports = (options = {}) => {
                 localizeDeclaration(declaration, context)
               );
             }
+
+            if (ignoreComment) {
+              ignoreComment.remove();
+            }
           });
         },
       };

diff --git a/test/index.test.js b/test/index.test.js
@@ -881,16 +881,23 @@ const tests = [
     options: { mode: "pure" },
     input: `/* cssmodules-pure-ignore */
             :global(.foo) { color: blue; }`,
-    expected: `/* cssmodules-pure-ignore */
+    expected: `.foo { color: blue; }`,
+  },
+  {
+    name: "should suppress errors for global selectors after ignore comment #2",
+    options: { mode: "pure" },
+    input: `/* cssmodules-pure-ignore */
+            /* another comment */
+            :global(.foo) { color: blue; }`,
+    expected: `/* another comment */
             .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; }`,
+    expected: `#foo { color: blue; }`,
   },
   {
     name: "should not affect rules after the ignored block",
@@ -917,9 +924,7 @@ const tests = [
               /* cssmodules-pure-ignore */
               :global(.bar) { color: blue; }
             }`,
-    expected: `/* cssmodules-pure-ignore */
-            .foo {
-              /* cssmodules-pure-ignore */
+    expected: `.foo {
               .bar { color: blue; }
             }`,
   },
@@ -930,8 +935,7 @@ const tests = [
             ::view-transition-group(modal) {
               animation-duration: 300ms;
             }`,
-    expected: `/* cssmodules-pure-ignore */
-            ::view-transition-group(modal) {
+    expected: `::view-transition-group(modal) {
               animation-duration: 300ms;
             }`,
   },
@@ -943,8 +947,7 @@ const tests = [
               from { opacity: 1; }
               to { opacity: 0; }
             }`,
-    expected: `/* cssmodules-pure-ignore */
-            @keyframes fadeOut {
+    expected: `@keyframes fadeOut {
               from { opacity: 1; }
               to { opacity: 0; }
             }`,
@@ -957,7 +960,6 @@ const tests = [
               :global(.foo) { color: blue; }
             }`,
     expected: `@media (min-width: 768px) {
-              /* cssmodules-pure-ignore */
               .foo { color: blue; }
             }`,
   },
@@ -969,10 +971,8 @@ const tests = [
             .local { color: green; }
             /* cssmodules-pure-ignore */
             :global(.bar) { color: red; }`,
-    expected: `/* cssmodules-pure-ignore */
-            .foo { color: blue; }
+    expected: `.foo { color: blue; }
             :local(.local) { color: green; }
-            /* cssmodules-pure-ignore */
             .bar { color: red; }`,
   },
   {
@@ -982,8 +982,7 @@ const tests = [
             :global(.foo):hover > :global(.bar) + :global(.baz) {
               color: blue;
             }`,
-    expected: `/* cssmodules-pure-ignore */
-            .foo:hover > .bar + .baz {
+    expected: `.foo:hover > .bar + .baz {
               color: blue;
             }`,
   },
@@ -996,8 +995,7 @@ const tests = [
             :global(.baz) {
               color: blue;
             }`,
-    expected: `/* cssmodules-pure-ignore */
-            .foo,
+    expected: `.foo,
             .bar,
             .baz {
               color: blue;
@@ -1011,8 +1009,7 @@ const tests = [
             :global(.foo)::after {
               content: '';
             }`,
-    expected: `/* cssmodules-pure-ignore */
-            .foo::before,
+    expected: `.foo::before,
             .foo::after {
               content: '';
             }`,