astro-purgecss purges sm:hidden

[NikolaRHristov]

And other Tailwind media query specific classes. This could be due to the extractor. Tailwind uses it's own.

[NikolaRHristov]

Try this one:

require("purgecss")({
	content: ["./dist/**/*.html"],
	defaultExtractor: (content) =>
		[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(
			([_match, group, ..._rest]) => group
		),
}),

[the-dijkstra]

hey @NikolaRHristov thanks for filing this issue,

Couldn't this be resolved by using the same regex on the safelist config option ?

Example:

export default defineConfig({
  // Add purgecss support to Astro
  integrations: [
    purgecss({
      safelist: [/[\w\d-/:%.]+/gm],
    })
  ]
});

[the-dijkstra]

After some lockup I found that tailwind used to use this extractor function:

export function tailwindExtractor(content) {
  // Capture as liberally as possible, including things like `h-(screen-1.5)`
  const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
  const broadMatchesWithoutTrailingSlash = broadMatches.map((match) => _.trimEnd(match, '\\'))

  // Capture classes within other delimiters like .block(class="w-1/2") in Pug
  const innerMatches = content.match(/[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g) || []

  return broadMatches.concat(broadMatchesWithoutTrailingSlash).concat(innerMatches)
}

https://github.com/tailwindlabs/tailwindcss/blob/b19e291f6f329da8b1a61d4323bee6d04b99f31b/src/lib/purgeUnusedStyles.js#L25-L34

[NikolaRHristov]

Yeah, that's way broader. I've tried this one that's why I've pasted it #37 (comment)

[the-dijkstra]

Thanks man I will take a look into this asap. feel free to file a PR.

I was thinking about adding an extra flag to the config options tailwind

export default defineConfig({
  // Add purgecss support to Astro
  integrations: [
    purgecss({
      tailwind: true,
    })
  ]
});

And based on that flag we decide if to pass the tailwind extractor or use the default extractor :

defaultExtractor: options.tailwind ? tailwindAwareExtractor : defaultExtractor;