Fix unwanted tailwind purge (#38)

* Add tailwind aware extractor * Update readme * Fix extractor * Update readme * docs(changeset): support tailwind reponsive classes in purgecss extractor
codiume · Sep 12, 2022 · 9689265 · 9689265
1 parent 9bfc23b
commit 9689265
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 80 deletions.
diff --git a/.changeset/thin-lobsters-breathe.md b/.changeset/thin-lobsters-breathe.md
@@ -0,0 +1,5 @@
+---
+'astro-purgecss': patch
+---
+
+support tailwind reponsive classes in purgecss extractor
diff --git a/apps/playground/astro.config.mjs b/apps/playground/astro.config.mjs
@@ -1,11 +1,11 @@
 import { defineConfig } from 'astro/config';
-import cssPurge from 'astro-purgecss';
+import purgecss from 'astro-purgecss';
 
 // https://astro.build/config
 export default defineConfig({
-  // Add purgeCss support to Astro
+  // Add purgecss support to Astro
   integrations: [
-    cssPurge({
+    purgecss({
       fontFace: true,
       keyframes: true,
       safelist: ['random', 'yep', 'button', /^nav-/],

diff --git a/apps/playground/src/pages/about.astro b/apps/playground/src/pages/about.astro
@@ -12,6 +12,12 @@
   <body>
     <section class="main">
       <p>This is an about page</p>
+      <p class="sm:hidden">
+        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero esse
+        accusantium, dignissimos corporis ipsam, atque facere expedita aliquid
+        repellat, unde alias voluptatem officia ullam. Perferendis ipsam facilis
+        officiis beatae nam.
+      </p>
     </section>
     <style>
       /* DO_NOT_REMOVE: The following css rules are unsed,
@@ -33,6 +39,9 @@
       p {
         color: red; /* used */
       }
+      .sm\:hidden {
+        color: red; /* should not be removed */
+      }
     </style>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/astro-purgecss/README.md b/packages/astro-purgecss/README.md
@@ -62,9 +62,8 @@ When you install this integration, things will be auto-wired for you. and all yo
 
 ```js
 export default defineConfig({
-  // Add purgeCss support to Astro
   integrations: [
-    cssPurge({
+    purgecss({
       fontFace: true,
       keyframes: true,
       safelist: ['random', 'yep', 'button', /^nav-/],
@@ -80,21 +79,23 @@ Here is a list of options, that are allowed to be passed in the config:
 
 ```ts
 export type PurgeCSSOptions = {
-  fontFace?: boolean;
-  keyframes?: boolean;
-  rejected?: boolean;
-  rejectedCss?: boolean;
-  variables?: boolean;
-  safelist?: UserDefinedSafelist;
-  blocklist?: StringRegExpArray;
+  fontFace?: boolean; // removes any unused @font-face if set to true
+  keyframes?: boolean; // removes unused keyframes by setting if set to true
+  rejected?: boolean; // scan through the removed list to see if there's anything wrong
+  rejectedCss?: boolean; // keeps the discarded CSS
+  variables?: boolean; // removes any unused CSS variables if set to true
+  safelist?: UserDefinedSafelist; // indicates which selectors are safe to leave in the final CSS
+  blocklist?: StringRegExpArray; // blocks the CSS selectors from appearing in the final output CSS
 };
 ```
 
 To learn more about the available options, please refer to [PurgeCSS][purgecss-options] official docs.
 
 ### Caveats
 
-Certain options (ex: `css`, `content`), are not allowed to be passed in your `astro.config.mjs` config file, to not interfere with the internals of this integration.
+- Certain options (ex: `css`, `content`), are not allowed to be passed in your `astro.config.mjs` config file, to not interfere with the internals of this integration.
+
+- If you are using `tailwind.css`, please read about purge limitations in this guide [writing-purgeable-html](https://v2.tailwindcss.com/docs/optimizing-for-production#writing-purgeable-html)
 
 ## Changelog