build: cssnano optimizations

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

Hide file tree

Showing 5 changed files with 482 additions and 18 deletions.
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