Add Ability to Ignore Files/Folders (#638)

* Add Skiplist Option

Adds support for the "ignore" option of the glob dependency to prevent PurgeCSS from scanning specific folders (such as node_modules, etc.)

* Update Readme

Add description for new "skippedlist" option

* Rename Option, Fix Type

Replaced "skiplist" with "skippedContentGlobs" and changed the type to Array<String>

* Rename Option, Fix Type

Replaced "skiplist" with "skippedContentGlobs" and changed the type to Array<String>

* Add Skipped-Content Test

test for "skippedContentGlobs" added, casing on 'string' type fixed. Test passes, but only with full path to file to skip right now.

* Fix test

Use the correct path for the test environment

* Update Docs

Minor documentation tweaks

Co-authored-by: Bryan Jones <bryan@codekitapp.com>
Co-authored-by: Floriel <Ffloriel@users.noreply.github.com>

Author: 3 people

packages/postcss-purgecss/README.md

@@ -94,6 +94,15 @@ blocklist: ['usedClass', /^nav-/]
 ```
 Even if nav-links and usedClass are found by an extractor, they will be removed.
 
+### `skippedContentGlobs`
+
+If you provide globs for the `content` parameter, you can use this option to exclude certain files or folders that would otherwise be scanned. Pass an array of globs matching items that should be excluded. (Note: this option has no effect if `content` is not globs.)
+
+```ts
+skippedContentGlobs: ['node_modules/**', 'components/**']
+```
+Here, PurgeCSS will not scan anything in the "node_modules" and "components" folders.
+
 
 ### `rejected`
 Type: `boolean`

packages/postcss-purgecss/src/types/index.ts

@@ -30,4 +30,5 @@ export interface UserDefinedOptions {
   variables?: boolean;
   safelist?: UserDefinedSafelist;
   blocklist?: StringRegExpArray;
+  skippedContentGlobs?: Array<string>;
 }

packages/purgecss/__tests__/skipped-content.test.ts

@@ -0,0 +1,24 @@
+import PurgeCSS from "./../src/index";
+
+import { ROOT_TEST_EXAMPLES } from "./utils";
+
+describe("skipped-content", () => {
+  let purgedCSS: string;
+
+  beforeAll(async () => {
+    const resultsPurge = await new PurgeCSS().purge({
+      content: [`${ROOT_TEST_EXAMPLES}skipped-content/**/*.html`],
+      css: [`${ROOT_TEST_EXAMPLES}skipped-content/simple.css`],
+      skippedContentGlobs: [
+        `${ROOT_TEST_EXAMPLES}skipped-content/skippedFolder/**`,
+      ],
+    });
+    purgedCSS = resultsPurge[0].css;
+  });
+
+  it("purges appropriate CSS rules when skippedContentGlobs is set", () => {
+    expect(purgedCSS.includes(".red")).toBe(true);
+    expect(purgedCSS.includes(".black")).toBe(true);
+    expect(purgedCSS.includes(".green")).toBe(false);
+  });
+});

packages/purgecss/__tests__/test_examples/skipped-content/simple.css

@@ -0,0 +1,11 @@
+.black {
+  color: black;
+}
+
+.red {
+  color: red;
+}
+
+.green {
+  color: green;
+}

packages/purgecss/__tests__/test_examples/skipped-content/skippedFolder/skipped.html

@@ -0,0 +1 @@
+<p class="green">anything</p>

packages/purgecss/__tests__/test_examples/skipped-content/unskipped.html

@@ -0,0 +1,2 @@
+<p class="black">anything</p>
+<p class="red">anything</p>

packages/purgecss/bin/purgecss.js

@@ -35,6 +35,10 @@ program
   .option(
     "-b, --blocklist <list...>",
     "list of selectors that should be removed"
+  )
+  .option(
+    "-k, --skippedContentGlobs <list...>",
+    "list of glob patterns for folders/files that should not be scanned"
   );
 
 program.parse(process.argv);
@@ -58,9 +62,9 @@ const run = async () => {
   if (program.keyframes) options.keyframes = program.keyframes;
   if (program.rejected) options.rejected = program.rejected;
   if (program.variables) options.variables = program.variables;
-  if (program.safelist)
-    options.safelist = standardizeSafelist(program.safelist);
+  if (program.safelist) options.safelist = standardizeSafelist(program.safelist);
   if (program.blocklist) options.blocklist = program.blocklist;
+  if (program.skippedContentGlobs) options.skippedContentGlobs = program.skippedContentGlobs;
 
   const purged = await new PurgeCSS().purge(options);
   const output = options.output || program.output;

packages/purgecss/src/index.ts

@@ -368,7 +368,10 @@ class PurgeCSS {
         await asyncFs.access(globfile, fs.constants.F_OK);
         filesNames.push(globfile);
       } catch (err) {
-        filesNames = glob.sync(globfile, { nodir: true });
+        filesNames = glob.sync(globfile, {
+          nodir: true,
+          ignore: this.options.skippedContentGlobs,
+        });
       }
       for (const file of filesNames) {
         const content = await asyncFs.readFile(file, "utf-8");
@@ -510,7 +513,12 @@ class PurgeCSS {
     const processedOptions: Array<string | RawCSS> = [];
     for (const option of cssOptions) {
       if (typeof option === "string") {
-        processedOptions.push(...glob.sync(option, { nodir: true }));
+        processedOptions.push(
+          ...glob.sync(option, {
+            nodir: true,
+            ignore: this.options.skippedContentGlobs,
+          })
+        );
       } else {
         processedOptions.push(option);
       }

packages/purgecss/src/options.ts

@@ -20,5 +20,6 @@ export const defaultOptions: Options = {
     keyframes: [],
   },
   blocklist: [],
+  skippedContentGlobs: [],
   dynamicAttributes: [],
 };

packages/purgecss/src/types/index.ts

@@ -66,6 +66,7 @@ export interface UserDefinedOptions {
   variables?: boolean;
   safelist?: UserDefinedSafelist;
   blocklist?: StringRegExpArray;
+  skippedContentGlobs?: Array<string>;
   dynamicAttributes?: string[];
 }
 
@@ -83,6 +84,7 @@ export interface Options {
   variables: boolean;
   safelist: Required<ComplexSafelist>;
   blocklist: StringRegExpArray;
+  skippedContentGlobs: Array<string>;
   dynamicAttributes: string[];
 }