Merge pull request #195 from GSA-TTS/154-unused-css

Explore adding Purgecss to remove unused selectors from CSS

config/purgecss-options.js

@@ -0,0 +1,31 @@
+const purgeCSSOptions = {
+    css: ["./_site/assets/styles/*.css"],
+    content: [
+        "./_site/**/*.{html,js,svg}",
+    ],
+    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
+    safelist: {
+        standard: [
+            /abbr/,
+            "kbd",
+            "samp",
+            "sub",
+            "optgroup",
+            "fieldset",
+            "summary",
+            "cite",
+            "dfn",
+            "pre",
+        ],
+        deep: [
+            /usa-in-page.+/
+        ]
+    },
+    dynamicAttributes: [
+        'contentEditable',
+        'title',
+        'type'
+    ]
+};
+
+module.exports = purgeCSSOptions;

package.json

@@ -14,7 +14,7 @@
     "dev:assets": "npm run assets:refresh && npm run assets:watch",
     "dev:debug": "DEBUG=* npx @11ty/eleventy --serve --watch",
     "dev:serve": "npx @11ty/eleventy --serve --watch",
-    "federalist": "npm run build",
+    "federalist": "npm run build && ELEVENTY_ENV=production npm run assets:autoprefix",
     "serve": "npx @11ty/eleventy --serve",
     "start": "npx @11ty/eleventy --serve",
     "test": "echo \"Error: no test specified\" && exit 1",

postcss.config.js

@@ -1,5 +1,10 @@
+const purgeCSSOptions = require("./config/purgecss-options");
+
 module.exports = {
-  plugins: [require('autoprefixer')({
-    map: process.env.ELEVENTY_ENV !== 'production'
-  })],
+    plugins: [
+        require('autoprefixer')({
+            map: process.env.ELEVENTY_ENV !== 'production'
+        }),
+        ...(process.env.ELEVENTY_ENV === 'production' ? [require("@fullhuman/postcss-purgecss")(purgeCSSOptions)] : [])
+    ],
 };