build: cssnano optimizations

adobe · May 3, 2024 · eb91f7a · eb91f7a
1 parent e3edfe7
commit eb91f7a
Show file tree

Hide file tree

Showing 7 changed files with 573 additions and 25 deletions.
diff --git a/.changeset/swift-teachers-warn.md b/.changeset/swift-teachers-warn.md
@@ -0,0 +1,86 @@
+---
+"@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
+---
+
+Output for all component CSS files is now being run through a lightweight optimizer which significantly reduces unnecessary whitespace. These changes reduce file size but should not have any impact on the rendering of the component.
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
@@ -17,10 +17,9 @@
 		"build:preview": "nx build storybook",
 		"build:site": "nx build docs",
 		"builder": "nx run-many --target build --projects",
-		"cache:clean": "nx reset",
 		"changeset": "changeset",
-		"ci": "cross-env NODE_ENV=production yarn builder tag:component,ui-icons",
-		"ci:storybook": "cross-env NODE_ENV=production nx run storybook:build:ci",
+		"ci": "cross-env NODE_ENV=production yarn builder tag:component,ui-icons --skip-nx-cache",
+		"ci:storybook": "cross-env NODE_ENV=production nx run storybook:build:ci --skip-nx-cache",
 		"clean": "yarn cleaner tag:component",
 		"clean:docs": "rimraf dist",
 		"clean:preview": "nx clean storybook",
@@ -38,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 nx reset && yarn builder token,tag:component,ui-icons && changeset publish",
+		"release": "yarn ci && changeset publish",
 		"release:site": "cross-env NODE_ENV=production yarn build:site && gh-pages -d dist/ -f -e .",
 		"start": "cross-env NODE_ENV=development nx start storybook",
 		"test": "cross-env NODE_ENV=production nx test storybook",
@@ -72,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",
@@ -92,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);