Allow passing PurgeCSS options through config (#33)

* Allow passing config options * docs(changeset): allow passing purgecss options through config
codiume · Sep 10, 2022 · f10cd88 · f10cd88
1 parent 014b8dc
commit f10cd88
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 8 deletions.
diff --git a/.changeset/nice-ligers-approve.md b/.changeset/nice-ligers-approve.md
@@ -0,0 +1,5 @@
+---
+'astro-purgecss': minor
+---
+
+allow passing purgecss options through config
diff --git a/apps/playground/astro.config.mjs b/apps/playground/astro.config.mjs
@@ -4,5 +4,12 @@ import cssPurge from 'astro-purgecss';
 // https://astro.build/config
 export default defineConfig({
   // Add purgeCss support to Astro
-  integrations: [cssPurge()]
+  integrations: [
+    cssPurge({
+      fontFace: true,
+      keyframes: true,
+      safelist: ['random', 'yep', 'button', /^nav-/],
+      blocklist: ['usedClass', /^nav-/]
+    })
+  ]
 });
diff --git a/packages/astro-purgecss/README.md b/packages/astro-purgecss/README.md
@@ -56,20 +56,57 @@ export default {
 
 When you install this integration, things will be auto-wired for you. and all your generated css files should be purged from unused classes automagically.
 
-## What does this integration do, exactly?
+## 📖 Configuration
 
-This integration hooks into your astro build cycle, more precisely `astro:build:done`, it reads all your generated `HTML` and `CSS` files, and analyzes them using [Purgecss][purgecss] to remove any unsued CSS rules.
+[PurgeCSS][purgecss] has a list of options that allow you to customize its behavior. And this Astro integration allow you to pass those options easily in your `astro.config.mjs` file:
 
-## Change log
+```js
+export default defineConfig({
+  // Add purgeCss support to Astro
+  integrations: [
+    cssPurge({
+      fontFace: true,
+      keyframes: true,
+      safelist: ['random', 'yep', 'button', /^nav-/],
+      blocklist: ['usedClass', /^nav-/]
+    })
+  ]
+});
+```
+
+### Available Options
+
+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;
+};
+```
+
+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.
+
+## Changelog
 
-Please see the [changelog](CHANGELOG.md) for more information on what has changed recently.
+Please see the [Changelog](CHANGELOG.md) for more information on what has changed recently.
 
 ## Acknowledgements
 
 - [Purgecss][purgecss]
 
 [npm]: https://npmjs.com/package/astro-purgecss
 [purgecss]: https://purgecss.com
+[purgecss-options]: https://purgecss.com/configuration.html#options
 
 <!-- Readme Badges -->
 

diff --git a/packages/astro-purgecss/src/index.ts b/packages/astro-purgecss/src/index.ts
@@ -1,15 +1,26 @@
 import type { AstroIntegration } from 'astro';
-import { PurgeCSS } from 'purgecss';
+import { PurgeCSS, StringRegExpArray, UserDefinedSafelist } from 'purgecss';
 import { writeFile } from 'node:fs/promises';
 import { fileURLToPath } from 'node:url';
 
-export default function (): AstroIntegration {
+export type PurgeCSSOptions = {
+  fontFace?: boolean;
+  keyframes?: boolean;
+  rejected?: boolean;
+  rejectedCss?: boolean;
+  variables?: boolean;
+  safelist?: UserDefinedSafelist;
+  blocklist?: StringRegExpArray;
+};
+
+export default function (options: PurgeCSSOptions = {}): AstroIntegration {
   return {
     name: 'astro-purgecss',
     hooks: {
       'astro:build:done': async ({ dir }) => {
         const outDir = fileURLToPath(dir);
         const purged = await new PurgeCSS().purge({
+          ...options,
           content: [`${outDir}/**/*.html`],
           css: [`${outDir}/**/*.css`]
         });

diff --git a/packages/astro-seo-meta/package.json b/packages/astro-seo-meta/package.json
@@ -3,7 +3,7 @@
   "description": "Astro seo provides a <Seo> component to update meta tags",
   "version": "1.0.1",
   "scripts": {
-    "build": "astro-build --src src/index.ts src/components/*.astro",
+    "build": "astro-build --src src/index.ts src/**/*.astro",
     "postbuild": "npm run typecheck:emit",
     "typecheck": "tsc --noEmit",
     "typecheck:emit": "tsc --declaration --emitDeclarationOnly --outDir dist"