fix: Fix interaction with other plugins (#647)

rluba · web-flow · commit fb08e3a3c27a · 2021-04-12T22:15:24.000+01:00
* test: Add (failing) test for working with other plugins

* fix: PurgeCSS must run on exit to work with other plugins

Otherwise it tries to understand selectors before they have been processed by other plugins.
For example, when using both postcss-nested and purgecss

* chore: cleanup
diff --git a/packages/postcss-purgecss/__tests__/fixtures/expected/other-plugins.css b/packages/postcss-purgecss/__tests__/fixtures/expected/other-plugins.css
@@ -0,0 +1,3 @@
+.prefixed-used-class {
+  color: black;
+}
diff --git a/packages/postcss-purgecss/__tests__/fixtures/src/other-plugins/other-plugins.css b/packages/postcss-purgecss/__tests__/fixtures/src/other-plugins/other-plugins.css
@@ -0,0 +1,11 @@
+.used-class {
+  color: black;
+}
+
+.unused-class {
+  color: black;
+}
+
+.another-one-not-found {
+  color: black;
+}
diff --git a/packages/postcss-purgecss/__tests__/fixtures/src/other-plugins/other-plugins.html b/packages/postcss-purgecss/__tests__/fixtures/src/other-plugins/other-plugins.html
@@ -0,0 +1,8 @@
+<html>
+
+  <body>
+
+    <div class="prefixed-used-class"></div>
+  </body>
+
+</html>
diff --git a/packages/postcss-purgecss/__tests__/index.test.ts b/packages/postcss-purgecss/__tests__/index.test.ts
@@ -82,4 +82,31 @@ describe("Purgecss postcss plugin", () => {
         done();
       });
   });
+
+  it(`lets other plugins transform selectors before purging`, async () => {
+    const input = fs
+      .readFileSync(`${__dirname}/fixtures/src/other-plugins/other-plugins.css`)
+      .toString();
+    const expected = fs
+      .readFileSync(`${__dirname}/fixtures/expected/other-plugins.css`)
+      .toString();
+    const result = await postcss([
+      {
+        postcssPlugin: "postcss-test-prefixer",
+        Rule(rule) {
+          if (rule.selector.startsWith(".")) {
+            rule.selector = ".prefixed-" + rule.selector.slice(1);
+          }
+        },
+      },
+      purgeCSSPlugin({
+        content: [`${__dirname}/fixtures/src/other-plugins/other-plugins.html`],
+        fontFace: true,
+        keyframes: true,
+      }),
+    ]).process(input, { from: undefined });
+
+    expect(result.css).toBe(expected);
+    expect(result.warnings().length).toBe(0);
+  });
 });
diff --git a/packages/postcss-purgecss/src/index.ts b/packages/postcss-purgecss/src/index.ts
@@ -77,7 +77,7 @@ const purgeCSSPlugin: postcss.PluginCreator<UserDefinedOptions> = function (
     throw new Error("PurgeCSS plugin does not have the correct options");
   return {
     postcssPlugin: PLUGIN_NAME,
-    Once(root, helpers) {
+    OnceExit(root, helpers) {
       return purgeCSS(opts, root, helpers);
     },
   };

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.prefixed-used-class {`
	`2`	`+ color: black;`
	`3`	`+}`
-Original file line number
+Diff line change
 +<html>
++
 +  <body>
++
 +    <div class="prefixed-used-class"></div>
 +  </body>
++
 +</html>