Custom Responsive Suffixes

[TheAggressive]

Hello,

I'm not sure how I would go about adding support for PurgeCSS for custom responsive classes.

Currently my responsive classes are: class-name@xs - class-name@xxl when scss compiles the css the classes are much like tailwinds where tailwind adds sm:class-name and it's compiled to sm\:class-name mine are compiled as .class-name\@sm etc.

Purge seems to wipe out the @sm part.

I was looking at PurgeCSS documentation but I don't think I found what I was looking for to solve this issue.

My current webpack.mix.js config is

mix.sass("src/styles/app.scss", "styles").purgeCss({
  content: ["templates/**/*.twig"],
  whitelist: require("purgecss-with-wordpress").whitelist,
  whitelistPatterns: require("purgecss-with-wordpress").whitelistPatterns,
  variables: true,
});

Any help would be greatly appreciated!!

[TheAggressive]

I did some digging and I think I found my answer. I used the extend: to extend the defaultExtractor for the regex to include @ in the pattern.

mix.sass("src/styles/app.scss", "styles").purgeCss({
  content: ["templates/**/*.twig"],
  whitelist: require("purgecss-with-wordpress").whitelist,
  whitelistPatterns: require("purgecss-with-wordpress").whitelistPatterns,
  variables: true,
  extend: {
    defaultExtractor: (content) => content.match(/[@\w-/.:]+(?<!:)/g) || [],
  },
});