Unable to Exclude Folders From Content Globs

Describe the bug I’m filing this as a bug because the top results on Google for “purgeCSS skip folder” link to outdated advice from the PurgeCSS team. Specifically: https://github.com/FullHuman/purgecss/issues/158#issuecomment-456084860

You advise folks to use this syntax to skip a certain folder:

content: [
    '!(skippedFolder)/**/*.html',
    ...
]

The trouble is that your glob dependency removed support for ! as a negation operator in version 6.0. You currently use version 7 of glob. The ! operator is supported only in glob 5.x and below.

The way to skip folders in glob 6.x+ is to use their ignore option, which PurgeCSS does not currently expose.

To Reproduce Simply try to use the ! operator to negate a content glob; it will fail and PurgeCSS will remove rules that it SHOULD keep because it’s not scanning files appropriately.

Expected behavior PurgeCSS should allow users to skip certain folders, such as node_modules—especially because these folders can contain thousands of subfolders and having PurgeCSS scan all of them needlessly makes you look slow and bad.

Screenshots N/A

Environment (please complete the following information):

• OS: macOS 11.2.2
• Package purgeCSS
• Version 4.0.0

Additional Context There are other people asking for ways to exclude folders: https://github.com/FullHuman/purgecss/issues/551

[tordans]

FYI for those looking for a workaround until https://github.com/FullHuman/purgecss/pull/638 (thanks bdkjones) is usable in your codebase, you could do something like this:

This will remove all paths that include the /styleguide/ folder.

const contentGlobWithoutStyleguide = () => {
  // (1) Recreate the file list the same way PostCSS does it
  const glob = require("glob")
  return [
    './app/**/*.html.erb',
    './app/**/*.html.slim',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/javascript/**/*.jsx',
    './config/locales/**/*.yml',
    './config/locales/**/*.json',
  ].flatMap((pattern) => glob.sync(pattern, { nodir: true }))
    .filter((path) => !path.includes('/styleguides/')) // (2) Ignore Styleguide in PurgeCSS
}

environment.plugins.push(
  require('@fullhuman/postcss-purgecss')({
    content: contentGlobWithoutStyleguide(),
    safelist: …,
    defaultExtractor: …
  })
)

To test this, you can console.log the outpout of the defaultExtractor. For example like this:

postCssDebugOutputForDevelopmentEnv = true // default false
…
      defaultExtractor: content => {
        let match = content.match(/…/gi) || []
        if (postCssDebugOutputForDevelopmentEnv === true) {
          console.log(match)
        }
        return match
      }

[bdkjones]

PR submitted: https://github.com/FullHuman/purgecss/pull/638