Add purgeCSS for .u-padding and .u-margin classes | Disable purge on development

assets.json

@@ -1,3 +1,3 @@
 {
-    "version": 1686903176638
+    "version": 1688996422407
 }

assets/styles/main.scss

@@ -73,5 +73,5 @@
 // @import "utilities/align";
 // @import "utilities/helpers";
 // @import "utilities/states";
-// @import "utilities/spacing";
+@import "utilities/spacing";
 // @import "utilities/print";

build/tasks/styles.js

@@ -60,10 +60,12 @@ export const productionPostCSSOptions  = Object.assign({}, defaultPostCSSOptions
 export const developmentStylesArgs = [
     developmentSassOptions,
     developmentPostCSSOptions,
+    false
 ];
 export const productionStylesArgs  = [
     productionSassOptions,
     productionPostCSSOptions,
+    true
 ];
 
 /**
@@ -80,7 +82,7 @@ export const productionStylesArgs  = [
  *     If `false`, PostCSS processing will be ignored.
  * @return {Promise}
  */
-export default async function compileStyles(sassOptions = null, postcssOptions = null) {
+export default async function compileStyles(sassOptions = null, postcssOptions = null, purge = true) {
     if (sassOptions == null) {
         sassOptions = productionSassOptions;
     } else if (
@@ -160,7 +162,7 @@ export default async function compileStyles(sassOptions = null, postcssOptions =
             try {
                 await writeFile(outfile, result.css).then(() => {
                     // Purge CSS once file exists.
-                    if (outfile) {
+                    if (outfile && purge) {
                         purgeUnusedCSS(outfile, `${label || `${filestem}.css`}`);
                     }
                 });
@@ -226,11 +228,14 @@ async function purgeUnusedCSS(outfile, label) {
     const purgeCSSResults = await (new PurgeCSS()).purge({
         content: purgeCSSContentFiles,
         css: [ outfile ],
-        rejected: true,
-        defaultExtractor: (content) => content.match(/[a-z0-9_\-\\\/\@]+/gi) || [],
+        defaultExtractor: content => content.match(/[a-z0-9_\-\\\/\@]+/gi) || [],
+        fontFaces: true,
+        keyframes: true,
         safelist: {
-            standard: [ /^((?!\bu-gc-).)*$/ ]
-        }
+            // Keep all except .u-gc-* | .u-margin-* | .u-padding-*
+            standard: [ /^(((?!\bu-gc-).)*$ | (((?!\bu-margin-).)*$) | (((?!\bu-padding-).)*$))/ ]
+        },
+        variables: true,
     })
 
     for (let result of purgeCSSResults) {

www/index.html

@@ -57,7 +57,7 @@
             </header>
 
             <main data-module-example data-scroll-section>
-                <div class="o-container">
+                <div class="o-container | u-padding-top-sm">
                     <h1 class="c-heading -h1">Hello</h1>
                 </div>
             </main>