configure purgecss

README.md

@@ -7,7 +7,7 @@ It includes:
 - A [Style Dictionary](https://v4.styledictionary.com/) configuration for defining design tokens.
 - A sensible project layout and organized SCSS files for themes, components, layouts, and base styles.
 - SCSS mixins and functions for accessing design tokens.
-- [Esbuild](https://esbuild.github.io/) configuration with [dart-sass](https://sass-lang.com/dart-sass/) and [PostCSS](https://postcss.org/).
+- [Esbuild](https://esbuild.github.io/) configuration with [dart-sass](https://sass-lang.com/dart-sass/), [PostCSS](https://postcss.org/), [autoprefixer](https://github.com/postcss/autoprefixer), and [PurgeCSS](https://purgecss.com/).
 - A [Stylelint](https://stylelint.io/) configuration.
 - [pnpm](https://pnpm.io/) as package manager.
 
@@ -20,8 +20,32 @@ the repository into your project and adapt it to your needs.
 git clone [email protected]:woylie/barker.git
 cd barker
 rm -rf .github .git
+pnpm install
 ```
 
+## Configuration
+
+- `build.js`: Contains the build configuration for Esbuild, as well as the
+  PostCSS configuration and PurgeCSS configuration (disabled by default).
+- `style-dictionary.js`: Contains the configuration for Style Dictionary. You
+  can modify the output formats for the design tokens here. Note that the SCSS
+  files depend on the `scss` output format.
+
+## Commands
+
+| Description                                         | Command                   |
+| --------------------------------------------------- | ------------------------- |
+| Development build (tokens, CSS, JS, etc.)           | `pnpm build:dev`          |
+| Production build (tokens, CSS, JS, etc.)            | `pnpm build:prod`         |
+| Watch mode (does not watch Style Dictionary tokens) | `pnpm build:dev:watch`    |
+| Build Style Dictionary tokens                       | `pnpm build:tokens`       |
+| Run linters                                         | `pnpm lint`               |
+| Fix linter issues                                   | `pnpm lint:fix`           |
+| Run Prettier                                        | `pnpm lint:prettier`      |
+| Fix Prettier issues                                 | `pnpm lint:prettier:fix`  |
+| Run Stylelint                                       | `pnpm lint:stylelint`     |
+| Fix Stylelint issues                                | `pnpm lint:stylelint:fix` |
+
 ## Folder Structure
 
     .
@@ -79,21 +103,6 @@ corresponding `_index.scss` files.
     │   └── ...
     └── ...
 
-## Commands
-
-| Description                                         | Command                   |
-| --------------------------------------------------- | ------------------------- |
-| Development build (tokens, CSS, JS, etc.)           | `pnpm build:dev`          |
-| Production build (tokens, CSS, JS, etc.)            | `pnpm build:prod`         |
-| Watch mode (does not watch Style Dictionary tokens) | `pnpm build:dev:watch`    |
-| Build Style Dictionary tokens                       | `pnpm build:tokens`       |
-| Run linters                                         | `pnpm lint`               |
-| Fix linter issues                                   | `pnpm lint:fix`           |
-| Run Prettier                                        | `pnpm lint:prettier`      |
-| Fix Prettier issues                                 | `pnpm lint:prettier:fix`  |
-| Run Stylelint                                       | `pnpm lint:stylelint`     |
-| Fix Stylelint issues                                | `pnpm lint:stylelint:fix` |
-
 ## Resources
 
 - The design token structure is based on [Design Tokens Format](https://design-tokens.github.io/community-group/format/) where possible.

build.js

@@ -3,15 +3,28 @@ import * as esbuild from "esbuild";
 import postcss from "postcss";
 import autoprefixer from "autoprefixer";
 import { sassPlugin } from "esbuild-sass-plugin";
+import purgecss from "@fullhuman/postcss-purgecss";
 
 const args = process.argv.slice(2);
 const watch = args.includes("--watch");
 const production = args.includes("--production");
 
+// To enable PurgeCSS, set content folders here and uncomment purgeCssPlugin
+// below.
+const purgeCssPlugin = purgecss({
+  content: ["./**/*.html"],
+});
+
+const postCssPlugins = [
+  autoprefixer,
+  // To enable PurgeCSS, set content folders above and uncomment line below.
+  // purgeCssPlugin
+];
+
 const plugins = [
   sassPlugin({
     async transform(source, resolveDir) {
-      const { css } = await postcss([autoprefixer]).process(source, {
+      const { css } = await postcss(postCssPlugins).process(source, {
         from: undefined,
       });
       return css;

package.json

@@ -19,6 +19,7 @@
     "lint:stylelint:fix": "stylelint src/css --fix"
   },
   "devDependencies": {
+    "@fullhuman/postcss-purgecss": "^6.0.0",
     "autoprefixer": "^10.4.19",
     "css-loader": "^7.1.2",
     "esbuild": "^0.21.5",