build: cssnano optimizations (#2616)

adobe · May 3, 2024 · 7f45ea9 · 7f45ea9
1 parent a5cd36c
commit 7f45ea9
Show file tree

Hide file tree

Showing 7 changed files with 573 additions and 22 deletions.
diff --git a/.changeset/swift-teachers-warn.md b/.changeset/swift-teachers-warn.md
@@ -0,0 +1,88 @@
+---
+"@spectrum-css/accordion": minor
+"@spectrum-css/actionbar": minor
+"@spectrum-css/actionbutton": minor
+"@spectrum-css/actiongroup": minor
+"@spectrum-css/actionmenu": minor
+"@spectrum-css/alertbanner": minor
+"@spectrum-css/alertdialog": minor
+"@spectrum-css/asset": minor
+"@spectrum-css/assetcard": minor
+"@spectrum-css/assetlist": minor
+"@spectrum-css/avatar": minor
+"@spectrum-css/badge": minor
+"@spectrum-css/breadcrumb": minor
+"@spectrum-css/button": minor
+"@spectrum-css/buttongroup": minor
+"@spectrum-css/calendar": minor
+"@spectrum-css/card": minor
+"@spectrum-css/checkbox": minor
+"@spectrum-css/clearbutton": minor
+"@spectrum-css/closebutton": minor
+"@spectrum-css/coachindicator": minor
+"@spectrum-css/coachmark": minor
+"@spectrum-css/colorarea": minor
+"@spectrum-css/colorhandle": minor
+"@spectrum-css/colorloupe": minor
+"@spectrum-css/colorslider": minor
+"@spectrum-css/colorwheel": minor
+"@spectrum-css/combobox": minor
+"@spectrum-css/contextualhelp": minor
+"@spectrum-css/datepicker": minor
+"@spectrum-css/dial": minor
+"@spectrum-css/dialog": minor
+"@spectrum-css/divider": minor
+"@spectrum-css/dropindicator": minor
+"@spectrum-css/dropzone": minor
+"@spectrum-css/fieldgroup": minor
+"@spectrum-css/fieldlabel": minor
+"@spectrum-css/floatingactionbutton": minor
+"@spectrum-css/helptext": minor
+"@spectrum-css/icon": minor
+"@spectrum-css/illustratedmessage": minor
+"@spectrum-css/infieldbutton": minor
+"@spectrum-css/inlinealert": minor
+"@spectrum-css/link": minor
+"@spectrum-css/logicbutton": minor
+"@spectrum-css/menu": minor
+"@spectrum-css/miller": minor
+"@spectrum-css/modal": minor
+"@spectrum-css/opacitycheckerboard": minor
+"@spectrum-css/page": minor
+"@spectrum-css/pagination": minor
+"@spectrum-css/picker": minor
+"@spectrum-css/pickerbutton": minor
+"@spectrum-css/popover": minor
+"@spectrum-css/progressbar": minor
+"@spectrum-css/progresscircle": minor
+"@spectrum-css/radio": minor
+"@spectrum-css/rating": minor
+"@spectrum-css/search": minor
+"@spectrum-css/sidenav": minor
+"@spectrum-css/site": minor
+"@spectrum-css/slider": minor
+"@spectrum-css/splitview": minor
+"@spectrum-css/statuslight": minor
+"@spectrum-css/steplist": minor
+"@spectrum-css/stepper": minor
+"@spectrum-css/swatch": minor
+"@spectrum-css/swatchgroup": minor
+"@spectrum-css/switch": minor
+"@spectrum-css/table": minor
+"@spectrum-css/tabs": minor
+"@spectrum-css/tag": minor
+"@spectrum-css/taggroup": minor
+"@spectrum-css/textfield": minor
+"@spectrum-css/thumbnail": minor
+"@spectrum-css/toast": minor
+"@spectrum-css/tooltip": minor
+"@spectrum-css/tray": minor
+"@spectrum-css/treeview": minor
+"@spectrum-css/typography": minor
+"@spectrum-css/underlay": minor
+"@spectrum-css/well": minor
+---
+
+## Build optmizations to support minification
+
+Output for all component CSS files is now being run through a lightweight optimizer (cssnano) which significantly reduces unnecessary whitespace. These changes reduce file size but should not have any impact on the rendering of the component. By removing unnecessary whitespace from var functions, we are making it easier to effectively minify our provided CSS assets.
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,12 @@
 {
 	"tabWidth": 2,
-	"useTabs": true
+	"useTabs": true,
+	"overrides": [
+    {
+      "files": "*.css",
+      "options": {
+        "printWidth": 500
+      }
+    }
+  ]
 }
diff --git a/lint-staged.config.js b/lint-staged.config.js
@@ -1,5 +1,6 @@
 module.exports = {
 	"components/*/*.css": [
+		"prettier --no-error-on-unmatched-pattern --ignore-unknown --loglevel silent --write",
 		"stylelint --fix --cache --allow-empty-input --quiet"
 	],
 	"*.json": [

diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
 		"refresh:config": "bash ./tasks/chromatic-config-creation.sh || exit 0",
 		"refresh:directory": "bash ./tasks/clean-up-after-migration.sh || exit 0",
 		"refresh:env": "bash ./tasks/copy-env-from-root.sh || exit 0",
-		"release": "cross-env NODE_ENV=production yarn builder token,tag:component,ui-icons --skip-nx-cache && changeset publish",
+		"release": "yarn ci && changeset publish",
 		"release:site": "cross-env NODE_ENV=production yarn build:site --skip-nx-cache && gh-pages -d dist/ -f -e .",
 		"start": "cross-env NODE_ENV=development nx start storybook",
 		"test": "cross-env NODE_ENV=production nx test storybook",
@@ -71,6 +71,8 @@
 		"autoprefixer": "^10.4.19",
 		"colors": "^1.4.0",
 		"cross-env": "^7.0.3",
+		"cssnano": "^7.0.1",
+		"cssnano-preset-advanced": "^7.0.1",
 		"diff": "^5.2.0",
 		"diff2html": "^3.4.48",
 		"eslint": "^8.57.0",
@@ -91,16 +93,14 @@
 		"pajv": "^1.2.0",
 		"postcss": "^8.4.38",
 		"postcss-combininator": "^2.0.0",
-		"postcss-discard-comments": "^6.0.2",
-		"postcss-discard-empty": "^6.0.3",
 		"postcss-extend": "^1.0.5",
 		"postcss-hover-media-feature": "^1.0.2",
 		"postcss-import": "^16.1.0",
 		"postcss-load-config": "^5.1.0",
 		"postcss-preset-env": "^9.5.9",
 		"postcss-reporter": "^7.1.0",
 		"postcss-splitinator": "^2.0.0",
-		"prettier": "^2.8.8",
+		"prettier": "^3.2.5",
 		"rimraf": "^5.0.5",
 		"stylelint": "^15.11.0",
 		"stylelint-config-clean-order": "^5.4.2",

diff --git a/postcss.config.js b/postcss.config.js
@@ -20,7 +20,6 @@ module.exports = ({
 		noFlatVariables: false,
 	},
 	combine = false,
-	keepComments = false,
 	lint = true,
 	verbose = true,
 	additionalPlugins = {},
@@ -85,13 +84,15 @@ module.exports = ({
 			/* --------------------------------------------------- */
 			/* ------------------- SASS-LIKE UTILITIES ----------- */
 			"postcss-extend": {},
+			"postcss-hover-media-feature": {},
+			/* --------------------------------------------------- */
+			/* ------------------- VARIABLE PARSING -------------- */
 			"postcss-splitinator": {
 				processIdentifier: (identifier) =>
 					identifier === "express" ? "spectrum--express" : identifier,
 				...splitinatorOptions,
 			},
 			"postcss-combininator": combine ? {} : false,
-			"postcss-hover-media-feature": {},
 			...additionalPlugins,
 			/* --------------------------------------------------- */
 			/* ------------------- POLYFILLS --------------------- */
@@ -124,12 +125,21 @@ module.exports = ({
 				},
 			},
 			/* --------------------------------------------------- */
-			/* ------------------- CLEAN-UP TASKS ---------------- */
-			"postcss-discard-empty": {},
+			/* ------------------- ORGANIZE/DEDUPE --------------- */
 			"at-rule-packer": {},
-			"postcss-discard-comments": !keepComments
-				? { removeAllButFirst: true }
-				: false,
+			cssnano: {
+				preset: [
+					"cssnano-preset-advanced",
+					{
+						colormin: false,
+						discardComments: {
+							removeAllButFirst: true,
+						},
+						// @todo yarn add -DW css-declaration-sorter
+						cssDeclarationSorter: false, // @todo { order: "smacss" }
+					},
+				],
+			},
 			/* --------------------------------------------------- */
 			/* ------------------- REPORTING --------------------- */
 			stylelint: lint

diff --git a/tasks/component-builder.js b/tasks/component-builder.js
@@ -129,13 +129,13 @@ async function extractModifiers(filepath, { cwd } = {}) {
         promises.push(
             fsp.writeFile(
                 path.join(cwd, `metadata/mods.md`),
-                prettier.format(
+                (await prettier.format(
                     [
                         "| Modifiable custom properties |\n| --- |",
                         ...[...found].sort().map((result) => `| \`${result}\` |`),
                     ].join("\n"),
                     { parser: "markdown" }
-                ),
+                )),
                 { encoding: "utf-8" }
             )
             .then(() => `${"✓".green}  ${"metadata/mods.md".padEnd(20, " ").yellow}  ${'-- deprecated --'.gray}`)
@@ -150,7 +150,7 @@ async function extractModifiers(filepath, { cwd } = {}) {
     promises.push(
         fsp.writeFile(
             path.join(cwd, `dist/metadata.json`),
-            prettier.format(
+            (await prettier.format(
                 JSON.stringify({
                     selectors: [...selectors].sort(),
                     mods: [...found].sort(),
@@ -159,7 +159,7 @@ async function extractModifiers(filepath, { cwd } = {}) {
                     a11y: [...highContrast].sort(),
                 }, null, 2),
                 { parser: "json" }
-            ),
+            )),
             { encoding: "utf-8" }
         ).then(() => {
             const stats = fs.statSync(path.join(cwd, `dist/metadata.json`));
@@ -226,9 +226,7 @@ async function processCSS(content, input, output, {
     const promises = [];
 
     if (result.css) {
-        // @todo update build to use prettier formatted results
-        // const formatted = prettier.format(result.css.trimStart(), { parser: "css", printWidth: 180 });
-        const formatted = result.css.trimStart();
+        const formatted = await prettier.format(result.css.trimStart(), { parser: "css", printWidth: 500 });
         promises.push(
             fsp.writeFile(output, formatted).then(() => {
                 const stats = fs.statSync(output);