astro-purgecss 4.1.0 → 4.2.0

package/README.md

@@ -79,6 +79,14 @@ export default defineConfig({
       blocklist: ['usedClass', /^nav-/],
       content: [
         process.cwd() + '/src/**/*.{astro,vue}' // Watching astro and vue sources (for SSR, read the note below)
+      ],
+      extractors: [
+        {
+          // Example using a taiwindcss compatible class extractor
+          extractor: (content) =>
+            content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [],
+          extensions: ['astro', 'html']
+        }
       ]
     })
   ]
@@ -103,6 +111,11 @@ export type PurgeCSSOptions = {
   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
   content?: Array<string | RawContent>;
+  extractors?: // provides custom functions to extract CSS classes in specific ways (eg. when using tailwind.css)
+  Array<{
+    extractor: (content: string) => string[]; // matched css classes
+    extensions: string[]; // file extensions for which this extractor is to be used
+  }>;
 };
 ```
 
@@ -116,7 +129,38 @@ We have also setup an example repository available here: [example-purgecss](../.
 
 - If you are using [inline styles](https://docs.astro.build/en/guides/styling/#scoped-styles), this plugin won't be able to purge those css rules, due to astro's way of handling scoped css rules.
 
-- 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)
+- If you are using Astro view transitions, use the following options so that purgecss keeps the corresponding animations:
+
+```diff
+export default defineConfig({
+  integrations: [
+    purgecss({
++      keyframes: false
++      , safelist: {
++        greedy: [/*astro*/]
++      }
+    }),
+  ],
+});
+```
+
+- 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). You may also need a custom class extractor compatible with arbitrary and container based `tailwind.css` classes. For example:
+
+```js
+export default defineConfig({
+  integrations: [
+    purgecss({
+      extractors: [
+        {
+          extractor: (content) =>
+            content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [],
+          extensions: ['astro', 'html']
+        }
+      ]
+    })
+  ]
+});
+```
 
 ## Changelog
 

package/dist/index.mjs

@@ -1,15 +1,9 @@
-import { PurgeCSS } from "purgecss";
-import { writeFile } from "node:fs/promises";
+import { createHash } from "crypto";
+import { rename, writeFile } from "node:fs/promises";
+import path from "node:path";
 import { fileURLToPath } from "node:url";
-function handleWindowsPath(outputPath) {
-  if (process.platform !== "win32")
-    return outputPath;
-  if (outputPath.endsWith("\\")) {
-    outputPath = outputPath.substring(0, outputPath.length - 1);
-  }
-  outputPath = outputPath.replaceAll("\\", "/");
-  return outputPath;
-}
+import { PurgeCSS } from "purgecss";
+import { handleWindowsPath, replaceStringInDirectory } from "./utils";
 function src_default(options = {}) {
   return {
     name: "astro-purgecss",
@@ -27,7 +21,18 @@ function src_default(options = {}) {
           ]
         });
         await Promise.all(
-          purged.filter(({ file }) => file == null ? void 0 : file.endsWith(".css")).map(async ({ css, file }) => await writeFile(file, css))
+          purged.filter(({ file }) => file == null ? void 0 : file.endsWith(".css")).map(async ({ css, file }) => {
+            if (!file) return;
+            await writeFile(file, css);
+            const hash = await createHash("sha256").update(css).digest("hex").substring(0, 7);
+            const newPath = file.slice(0, -12) + hash + ".css";
+            await rename(file, newPath);
+            await replaceStringInDirectory(
+              outDir + "../",
+              path.basename(file),
+              path.basename(newPath)
+            );
+          })
         );
       }
     }

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function handleWindowsPath(outputPath: string): string;
+export declare function replaceStringInFile(filePath: string, searchValue: string, replaceValue: string): Promise<void>;
+export declare function replaceStringInDirectory(directory: string, searchValue: string, replaceValue: string): Promise<void>;

package/dist/utils.mjs

@@ -0,0 +1,42 @@
+import { readdir, readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+function handleWindowsPath(outputPath) {
+  if (process.platform !== "win32") return outputPath;
+  if (outputPath.endsWith("\\")) {
+    outputPath = outputPath.substring(0, outputPath.length - 1);
+  }
+  outputPath = outputPath.replaceAll("\\", "/");
+  return outputPath;
+}
+async function replaceStringInFile(filePath, searchValue, replaceValue) {
+  try {
+    const fileContent = await readFile(filePath, "utf8");
+    if (fileContent.includes(searchValue)) {
+      const re = new RegExp(searchValue, "g");
+      const newContent = fileContent.replace(re, replaceValue);
+      await writeFile(filePath, newContent, "utf8");
+    }
+  } catch (err) {
+    console.error(`Error processing file ${filePath}: ${err}`);
+  }
+}
+async function replaceStringInDirectory(directory, searchValue, replaceValue) {
+  try {
+    const files = await readdir(directory, { withFileTypes: true });
+    for (const file of files) {
+      const fullPath = path.join(directory, file.name);
+      if (file.isDirectory()) {
+        await replaceStringInDirectory(fullPath, searchValue, replaceValue);
+      } else if (file.isFile()) {
+        await replaceStringInFile(fullPath, searchValue, replaceValue);
+      }
+    }
+  } catch (err) {
+    console.error(`Error processing directory ${directory}: ${err}`);
+  }
+}
+export {
+  handleWindowsPath,
+  replaceStringInDirectory,
+  replaceStringInFile
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-purgecss",
   "description": "Remove unused CSS rules from your final Astro bundle",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "type": "module",
   "types": "dist/index.d.ts",
   "author": "codiume",
@@ -37,10 +37,10 @@
   },
   "peerDependencies": {
     "astro": "^4.0.0",
-    "purgecss": "^5.0.0"
+    "purgecss": "^6.0.0"
   },
   "scripts": {
-    "build": "astro-build --src src/index.ts",
+    "build": "astro-build --src src/index.ts src/utils.ts",
     "typecheck": "tsc --declaration --emitDeclarationOnly"
   }
 }