From 08149bc5994deb8cabbe6d51aa948a7662da539b Mon Sep 17 00:00:00 2001
From: "[ Cassondra ]" <castastrophe@users.noreply.github.com>
Date: Thu, 28 Mar 2024 19:32:53 -0400
Subject: [PATCH] build: cssnano optimizations

---
 .prettierrc                       |  10 +-
 components/commons/basebutton.css | 101 ++++--
 components/commons/index.css      |  12 -
 components/commons/overlay.css    |  63 ++--
 nx.json                           |   1 +
 package.json                      |   7 +-
 postcss.config.js                 |  19 +-
 tasks/component-builder.js        | 558 +++++++++++++++---------------
 yarn.lock                         | 303 +++++++++++++++-
 9 files changed, 727 insertions(+), 347 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 76186d7b19d..202b6470b07 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,12 @@
 {
 	"tabWidth": 2,
-	"useTabs": true
+	"useTabs": true,
+	"overrides": [
+    {
+      "files": "*.css",
+      "options": {
+        "printWidth": 500
+      }
+    }
+  ]
 }
diff --git a/components/commons/basebutton.css b/components/commons/basebutton.css
index 00ca18e6808..d84227839c9 100644
--- a/components/commons/basebutton.css
+++ b/components/commons/basebutton.css
@@ -1,15 +1,3 @@
-/*!
-Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
 %spectrum-BaseButton {
   cursor: pointer;
 
@@ -32,13 +20,18 @@ governing permissions and limitations under the License.
   margin: 0;
 
   /* @deprecation --mod-sans-font-family-stack has been renamed and will be removed in a future version. */
-  font-family: var(--mod-button-font-family, var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack)));
+  font-family: var(
+    --mod-button-font-family,
+    var(--mod-sans-font-family-stack, var(--spectrum-sans-font-family-stack))
+  );
 
   /* @deprecation --mod-line-height-100 has been renamed and will be removed in a future version. */
-  line-height: var(--mod-button-line-height, var(--mod-line-height-100, var(--spectrum-line-height-100)));
+  line-height: var(
+    --mod-button-line-height,
+    var(--mod-line-height-100, var(--spectrum-line-height-100))
+  );
   text-decoration: none;
 
-
   /* Remove the inheritance of text transform on button in Edge, Firefox, and IE. */
   text-transform: none;
 
@@ -49,10 +42,42 @@ governing permissions and limitations under the License.
   -webkit-appearance: button;
   border-style: solid;
 
-  transition: background var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-    border-color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-    color var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out,
-    box-shadow var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100))) ease-out;
+  transition: background
+      var(
+        --mod-button-animation-duration,
+        var(
+          --mod-animation-duration-100,
+          var(--spectrum-animation-duration-100)
+        )
+      )
+      ease-out,
+    border-color
+      var(
+        --mod-button-animation-duration,
+        var(
+          --mod-animation-duration-100,
+          var(--spectrum-animation-duration-100)
+        )
+      )
+      ease-out,
+    color
+      var(
+        --mod-button-animation-duration,
+        var(
+          --mod-animation-duration-100,
+          var(--spectrum-animation-duration-100)
+        )
+      )
+      ease-out,
+    box-shadow
+      var(
+        --mod-button-animation-duration,
+        var(
+          --mod-animation-duration-100,
+          var(--spectrum-animation-duration-100)
+        )
+      )
+      ease-out;
 
   -webkit-font-smoothing: antialiased;
 
@@ -100,19 +125,47 @@ governing permissions and limitations under the License.
     display: block;
 
     /* @deprecation --mod-focus-indicator-gap has been renamed and will be removed in a future version. */
-    margin: calc(var(--mod-button-focus-indicator-gap, var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))) * -1);
+    margin: calc(
+      var(
+          --mod-button-focus-indicator-gap,
+          var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap))
+        ) * -1
+    );
 
     /* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
-    transition: opacity var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out,
-                margin var(--mod-button-animation-duration, var(--mod-button-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)))) ease-out;
+    transition: opacity
+        var(
+          --mod-button-animation-duration,
+          var(
+            --mod-button-animation-duration,
+            var(
+              --mod-animation-duration-100,
+              var(--spectrum-animation-duration-100)
+            )
+          )
+        )
+        ease-out,
+      margin
+        var(
+          --mod-button-animation-duration,
+          var(
+            --mod-button-animation-duration,
+            var(
+              --mod-animation-duration-100,
+              var(--spectrum-animation-duration-100)
+            )
+          )
+        )
+        ease-out;
   }
 
   &:focus-visible::after {
-    margin: calc(var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2);
+    margin: calc(
+      var(--mod-focus-indicator-gap, var(--spectrum-focus-indicator-gap)) * -2
+    );
   }
 }
 
-
 %spectrum-AnchorButton {
   /* Make link text not selectable  */
   user-select: none;
diff --git a/components/commons/index.css b/components/commons/index.css
index 748267b8b49..36157ce6d14 100644
--- a/components/commons/index.css
+++ b/components/commons/index.css
@@ -1,14 +1,2 @@
-/*!
-Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
 @import "basebutton.css";
 @import "overlay.css";
diff --git a/components/commons/overlay.css b/components/commons/overlay.css
index f64648da4f1..fc3795f2fc5 100644
--- a/components/commons/overlay.css
+++ b/components/commons/overlay.css
@@ -1,15 +1,3 @@
-/*!
-Copyright 2023 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-
 /* TODO: replace legacy animation variables with core tokens when available */
 
 /** @note used in modal, popover, quickaction, tooltip, underlay */
@@ -17,9 +5,23 @@ governing permissions and limitations under the License.
   pointer-events: none;
   visibility: hidden;
   opacity: 0%;
-  transition: transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
-              opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
-              visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms));
+  transition: transform
+      var(
+        --mod-overlay-animation-duration,
+        var(--spectrum-animation-duration-100, 130ms)
+      )
+      ease-in-out,
+    opacity
+      var(
+        --mod-overlay-animation-duration,
+        var(--spectrum-animation-duration-100, 130ms)
+      )
+      ease-in-out,
+    visibility 0ms linear
+      var(
+        --mod-overlay-animation-duration,
+        var(--spectrum-animation-duration-100, 130ms)
+      );
 }
 
 /** @note used in modal, popover, quickaction, tooltip, underlay */
@@ -27,25 +29,46 @@ governing permissions and limitations under the License.
   pointer-events: auto;
   visibility: visible;
   opacity: 100%;
-  transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0ms));
+  transition-delay: var(
+    --mod-overlay-animation-duration-opened,
+    var(--spectrum-animation-duration-0, 0ms)
+  );
 }
 
 /** @note currently unused */
 %spectrum-overlay--bottom--open {
-  transform: translateY(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)));
+  transform: translateY(
+    var(
+      --mod-overlay-animation-distance,
+      var(--spectrum-overlay-animation-distance, 6px)
+    )
+  );
 }
 
 /** @note currently unused */
 %spectrum-overlay--top--open {
-  transform: translateY(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))));
+  transform: translateY(
+    calc(
+      -1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))
+    )
+  );
 }
 
 /** @note used in quickaction */
 %spectrum-overlay--right--open {
-  transform: translateX(var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px)));
+  transform: translateX(
+    var(
+      --mod-overlay-animation-distance,
+      var(--spectrum-overlay-animation-distance, 6px)
+    )
+  );
 }
 
 /** @note used in quickaction */
 %spectrum-overlay--left--open {
-  transform: translateX(calc(-1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))));
+  transform: translateX(
+    calc(
+      -1 * var(--mod-overlay-animation-distance, var(--spectrum-overlay-animation-distance, 6px))
+    )
+  );
 }
diff --git a/nx.json b/nx.json
index cd37eef4169..461a7cdcd43 100644
--- a/nx.json
+++ b/nx.json
@@ -104,6 +104,7 @@
 			"executor": "nx:run-commands",
 			"options": {
 				"commands": [
+					"prettier --write --no-error-on-unmatched-pattern {projectRoot}/*.css {projectRoot}/themes/*.css",
 					"stylelint --fix {projectRoot}/*.css {projectRoot}/themes/*.css",
 					"eslint --fix --no-error-on-unmatched-pattern {projectRoot}/stories/*.js"
 				]
diff --git a/package.json b/package.json
index dd31f44062e..20ce1b68c5c 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,9 @@
     "colors": "^1.4.0",
     "conventional-changelog-spectrum": "^1.0.2",
     "cross-env": "^7.0.3",
+    "css-declaration-sorter": "^7.2.0",
+    "cssnano": "^6.1.2",
+    "cssnano-preset-advanced": "^6.1.2",
     "diff": "^5.1.0",
     "diff2html": "^3.4.45",
     "eslint": "^8.57.0",
@@ -87,8 +90,6 @@
     "pajv": "^1.2.0",
     "postcss": "^8.4.35",
     "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.0.1",
@@ -123,7 +124,7 @@
     "package.json": [
       "prettier-package-json --write"
     ],
-    "dist/*.css": [
+    "*.css": [
       "prettier --no-config --no-error-on-unmatched-pattern --ignore-unknown --loglevel silent --write"
     ],
     "components/*/metadata/*.{yml,yaml}": [
diff --git a/postcss.config.js b/postcss.config.js
index b4aa80812d8..56839b76231 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -85,13 +85,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 +126,17 @@ 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,
+						cssDeclarationSorter: false, // @todo { order: "smacss" }
+					},
+				],
+			},
 			/* --------------------------------------------------- */
 			/* ------------------- REPORTING --------------------- */
 			stylelint: lint
diff --git a/tasks/component-builder.js b/tasks/component-builder.js
index 7379d2b248d..6c0276e4168 100644
--- a/tasks/component-builder.js
+++ b/tasks/component-builder.js
@@ -86,7 +86,7 @@ async function extractProperties(
 	content,
 	regex = /(--mod-(?:\w|-)+)(?!:|\w|-)/g
 ) {
-    if (!content) return new Set();
+	if (!content) return new Set();
 
 	// assign the matches to an array through the spread operator and map the results to the first capture group
 	return new Set([...content.matchAll(regex)].map((match) => match[1]) ?? []);
@@ -99,83 +99,83 @@ async function extractProperties(
  * @returns Promise<string|string[]|void>
  */
 async function extractModifiers(filepath, { cwd } = {}) {
-    if (!fs.existsSync(filepath)) return Promise.resolve();
-
-    const content = await fsp.readFile(filepath, { encoding: "utf-8" });
-
-    /* Remove duplicates using a Set and sort the results (default is alphabetical) */
-    const found = await extractProperties(content);
-    const spectrum = await extractProperties(content, /(--spectrum-(?:\w|-)+)(?!:|\w|-)/g);
-    const system = await extractProperties(content, /(--system-(?:\w|-)+)(?!:|\w|-)/g);
-    const highContrast = await extractProperties(content, /(--highcontrast-(?:\w|-)+)(?!:|\w|-)/g);
-
-    const selectors = new Set();
-    const root = postcss.parse(content);
-    root.walkRules(rule => {
-        if (rule.selector) selectors.add(rule.selector);
-    });
-
-    if (!fs.existsSync(path.join(cwd, "dist"))) {
-        fs.mkdirSync(path.join(cwd, "dist"));
-    }
-
-    const promises = [];
-    if (found.size > 0) {
-        // If the metadata folder doesn't exist, create it
-        if (!fs.existsSync(path.join(cwd, "metadata"))) {
-            fs.mkdirSync(path.join(cwd, "metadata"));
-        }
-
-        promises.push(
-            fsp.writeFile(
-                path.join(cwd, `metadata/mods.md`),
-                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}`)
-            .catch((err) => {
-                if (!err) return;
-                console.log(`${"✗".red}  ${"metadata/mods.md".yellow} not written`);
-                return Promise.reject(err);
-            })
-        );
-    }
-
-    promises.push(
-        fsp.writeFile(
-            path.join(cwd, `dist/metadata.json`),
-            prettier.format(
-                JSON.stringify({
-                    selectors: [...selectors].sort(),
-                    mods: [...found].sort(),
-                    spectrum: [...spectrum].sort(),
-                    system: [...system].sort(),
-                    a11y: [...highContrast].sort(),
-                }, null, 2),
-                { parser: "json" }
-            ),
-            { encoding: "utf-8" }
-        ).then(() => {
-            const stats = fs.statSync(path.join(cwd, `dist/metadata.json`));
-            return [
+	if (!fs.existsSync(filepath)) return Promise.resolve();
+
+	const content = await fsp.readFile(filepath, { encoding: "utf-8" });
+
+	/* Remove duplicates using a Set and sort the results (default is alphabetical) */
+	const found = await extractProperties(content);
+	const spectrum = await extractProperties(content, /(--spectrum-(?:\w|-)+)(?!:|\w|-)/g);
+	const system = await extractProperties(content, /(--system-(?:\w|-)+)(?!:|\w|-)/g);
+	const highContrast = await extractProperties(content, /(--highcontrast-(?:\w|-)+)(?!:|\w|-)/g);
+
+	const selectors = new Set();
+	const root = postcss.parse(content);
+	root.walkRules(rule => {
+		if (rule.selector) selectors.add(rule.selector);
+	});
+
+	if (!fs.existsSync(path.join(cwd, "dist"))) {
+		fs.mkdirSync(path.join(cwd, "dist"));
+	}
+
+	const promises = [];
+	if (found.size > 0) {
+		// If the metadata folder doesn't exist, create it
+		if (!fs.existsSync(path.join(cwd, "metadata"))) {
+			fs.mkdirSync(path.join(cwd, "metadata"));
+		}
+
+		promises.push(
+			fsp.writeFile(
+				path.join(cwd, "metadata/mods.md"),
+				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}`)
+				.catch((err) => {
+					if (!err) return;
+					console.log(`${"✗".red}  ${"metadata/mods.md".yellow} not written`);
+					return Promise.reject(err);
+				})
+		);
+	}
+
+	promises.push(
+		fsp.writeFile(
+			path.join(cwd, "dist/metadata.json"),
+			prettier.format(
+				JSON.stringify({
+					selectors: [...selectors].sort(),
+					mods: [...found].sort(),
+					spectrum: [...spectrum].sort(),
+					system: [...system].sort(),
+					a11y: [...highContrast].sort(),
+				}, null, 2),
+				{ parser: "json" }
+			),
+			{ encoding: "utf-8" }
+		).then(() => {
+			const stats = fs.statSync(path.join(cwd, "dist/metadata.json"));
+			return [
                 `${"✓".green}  ${"dist/metadata.json".padEnd(20, " ").yellow}  ${bytesToSize(stats.size).gray}`,
                 `🔍  ${`${found.size}`.underline} modifiable custom propert${found.size === 1 ? "y" : "ies"}`,
                 `🔍  ${`${selectors.size}`.underline} selector${found.size === 1 ? "" : "s"}`,
-            ];
-        }).catch((err) => {
-            if (!err) return;
-            console.log(`${"✗".red}  ${"dist/metadata.json".yellow} not written`);
-            return Promise.reject(err);
-        })
-    );
-
-    return Promise.all(promises);
+			];
+		}).catch((err) => {
+			if (!err) return;
+			console.log(`${"✗".red}  ${"dist/metadata.json".yellow} not written`);
+			return Promise.reject(err);
+		})
+	);
+
+	return Promise.all(promises);
 }
 
 /**
@@ -190,71 +190,68 @@ async function extractModifiers(filepath, { cwd } = {}) {
  * @returns {Promise<(string|void)[]>} Returns either the CSS content or void
  */
 async function processCSS(content, input, output, {
-    cwd,
-    clean = false,
-    ...postCSSOptions
+	cwd,
+	...postCSSOptions
 } = {}) {
-    if (!content) return Promise.reject(new Error(`This function requires content be provided`));
-
-    const { plugins, options } = await postcssrc(
-        {
-            cwd,
-            env: process.env.NODE_ENV ?? "development",
-            from: input,
-            to: output,
-            verbose: false,
-            ...postCSSOptions,
-        },
-        __dirname // This is the path to the directory where the postcss.config.js lives
-    );
-
-    const result = await postcss(plugins).process(content, options);
-
-    if (result.error) return Promise.reject(result.error);
-
-    if (!result.css) return Promise.reject(new Error(`No CSS was generated from the provided content for ${relativePrint(input, { cwd })}`));
-
-    if (!fs.existsSync(path.dirname(output))) {
-        await fsp.mkdir(path.dirname(output), { recursive: true }).catch((err) => {
-            if (!err) return;
-            // @todo pretty print these are relative paths
-            console.log(`${"✗".red}  problem making the ${relativePrint(path.dirname(output), { cwd }).yellow} directory`);
-            return Promise.reject(err);
-        });
-    }
-
-    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();
-        promises.push(
-            fsp.writeFile(output, formatted).then(() => {
-                const stats = fs.statSync(output);
-                return `${"✓".green}  ${relativePrint(output, { cwd }).padEnd(20, " ").yellow}  ${bytesToSize(stats.size).gray}`;
-            }).catch((err) => {
-                if (!err) return;
-                console.log(`${"✗".red}  ${relativePrint(output, { cwd }).yellow} not written`);
-                return Promise.reject(err);
-            })
-        );
-    }
-
-    if (result.map) {
-        promises.push(
-            fsp.writeFile(`${output}.map`, result.map.toString().trimStart()).then(() => {
-                const stats = fs.statSync(output);
-                return `${"✓".green}  ${relativePrint(`${output}.map`, { cwd }).padEnd(20, " ").yellow}  ${bytesToSize(stats.size).gray}`;
-            }).catch((err) => {
-                if (!err) return;
-                console.log(`${"✗".red}  ${relativePrint(`${output}.map`, { cwd }).yellow} not written`);
-                return Promise.reject(err);
-            })
-        );
-    }
-
-    return Promise.all(promises);
+	if (!content) return Promise.reject(new Error("This function requires content be provided"));
+
+	const { plugins, options } = await postcssrc(
+		{
+			cwd,
+			env: process.env.NODE_ENV ?? "development",
+			from: input,
+			to: output,
+			verbose: false,
+			...postCSSOptions,
+		},
+		__dirname // This is the path to the directory where the postcss.config.js lives
+	);
+
+	const result = await postcss(plugins).process(content, options);
+
+	if (result.error) return Promise.reject(result.error);
+
+	if (!result.css) return Promise.reject(new Error(`No CSS was generated from the provided content for ${relativePrint(input, { cwd })}`));
+
+	if (!fs.existsSync(path.dirname(output))) {
+		await fsp.mkdir(path.dirname(output), { recursive: true }).catch((err) => {
+			if (!err) return;
+			// @todo pretty print these are relative paths
+			console.log(`${"✗".red}  problem making the ${relativePrint(path.dirname(output), { cwd }).yellow} directory`);
+			return Promise.reject(err);
+		});
+	}
+
+	const promises = [];
+
+	if (result.css) {
+		const formatted = prettier.format(result.css, { parser: "css", printWidth: 500 });
+		promises.push(
+			fsp.writeFile(output, formatted).then(() => {
+				const stats = fs.statSync(output);
+				return `${"✓".green}  ${relativePrint(output, { cwd }).padEnd(20, " ").yellow}  ${bytesToSize(stats.size).gray}`;
+			}).catch((err) => {
+				if (!err) return;
+				console.log(`${"✗".red}  ${relativePrint(output, { cwd }).yellow} not written`);
+				return Promise.reject(err);
+			})
+		);
+	}
+
+	if (result.map) {
+		promises.push(
+			fsp.writeFile(`${output}.map`, result.map.toString().trimStart()).then(() => {
+				const stats = fs.statSync(output);
+				return `${"✓".green}  ${relativePrint(`${output}.map`, { cwd }).padEnd(20, " ").yellow}  ${bytesToSize(stats.size).gray}`;
+			}).catch((err) => {
+				if (!err) return;
+				console.log(`${"✗".red}  ${relativePrint(`${output}.map`, { cwd }).yellow} not written`);
+				return Promise.reject(err);
+			})
+		);
+	}
+
+	return Promise.all(promises);
 }
 
 /**
@@ -267,44 +264,44 @@ async function processCSS(content, input, output, {
  * @returns {Promise<{ content: string, input: string }[]>}
  */
 async function fetchContent(globs = [], {
-    cwd,
-    shouldCombine = false,
-    ...fastGlobOptions
+	cwd,
+	shouldCombine = false,
+	...fastGlobOptions
 } = {}) {
-    const files = await fg(globs, {
-        onlyFiles: true,
-        ...fastGlobOptions,
-        cwd,
-    });
-
-    if (!files.length) return Promise.resolve([]);
-
-    const fileData = await Promise.all(
-        files.map(async (file) => ({
-            input: path.join(cwd, file),
-            content: await fsp.readFile(path.join(cwd, file), "utf8")
-        }))
-    );
-
-    // Combine the content into 1 file; @todo do this in future using CSS imports
-    if (shouldCombine) {
-        let content = "";
-        fileData.forEach(dataset => {
-            if (dataset.content) content += '\n\n' + dataset.content;
-        });
-
-        return Promise.resolve([{
-            content,
-            input: fileData[0].input
-        }]);
-    }
-
-    return Promise.all(
-        files.map(async (file) => ({
-            content: await fsp.readFile(path.join(cwd, file), "utf8"),
-            input: file,
-        }))
-    );
+	const files = await fg(globs, {
+		onlyFiles: true,
+		...fastGlobOptions,
+		cwd,
+	});
+
+	if (!files.length) return Promise.resolve([]);
+
+	const fileData = await Promise.all(
+		files.map(async (file) => ({
+			input: path.join(cwd, file),
+			content: await fsp.readFile(path.join(cwd, file), "utf8")
+		}))
+	);
+
+	// Combine the content into 1 file; @todo do this in future using CSS imports
+	if (shouldCombine) {
+		let content = "";
+		fileData.forEach(dataset => {
+			if (dataset.content) content += "\n\n" + dataset.content;
+		});
+
+		return Promise.resolve([{
+			content,
+			input: fileData[0].input
+		}]);
+	}
+
+	return Promise.all(
+		files.map(async (file) => ({
+			content: await fsp.readFile(path.join(cwd, file), "utf8"),
+			input: file,
+		}))
+	);
 }
 
 /**
@@ -316,18 +313,18 @@ async function fetchContent(globs = [], {
  * @returns Promise<string|void>
  */
 async function copy(from, to, { cwd } = {}) {
-    if (!fs.existsSync(from)) return;
-
-    const content = await fsp.readFile(from, { encoding: "utf-8" });
-    if (!content) return;
-    /** @todo add support for injecting a deprecation notice as a comment after the copyright */
-    return fsp.writeFile(to, content, { encoding: "utf-8" })
-        .then(() => `${"✓".green}  ${relativePrint(to, { cwd }).padEnd(20, " ").yellow}  ${"-- deprecated --".gray}`)
-        .catch((err) => {
-            if (!err) return;
-            console.log(`${"✗".red}  ${relativePrint(from, { cwd }).gray} could not be copied to ${relativePrint(to, { cwd }).yellow}`);
-            return Promise.reject(err);
-        });
+	if (!fs.existsSync(from)) return;
+
+	const content = await fsp.readFile(from, { encoding: "utf-8" });
+	if (!content) return;
+	/** @todo add support for injecting a deprecation notice as a comment after the copyright */
+	return fsp.writeFile(to, content, { encoding: "utf-8" })
+		.then(() => `${"✓".green}  ${relativePrint(to, { cwd }).padEnd(20, " ").yellow}  ${"-- deprecated --".gray}`)
+		.catch((err) => {
+			if (!err) return;
+			console.log(`${"✗".red}  ${relativePrint(from, { cwd }).gray} could not be copied to ${relativePrint(to, { cwd }).yellow}`);
+			return Promise.reject(err);
+		});
 }
 
 /**
@@ -337,10 +334,10 @@ async function copy(from, to, { cwd } = {}) {
  * @returns Promise<void>
  */
 async function cleanFolder({ cwd = process.cwd() } = {}) {
-    // Nothing to do if there's no input file
-    if (!fs.existsSync(path.join(cwd, "dist"))) return Promise.resolve();
+	// Nothing to do if there's no input file
+	if (!fs.existsSync(path.join(cwd, "dist"))) return Promise.resolve();
 
-    return fsp.rm(path.join(cwd, "dist"), { recursive: true, force: true }).then(() => fsp.mkdir(path.join(cwd, "dist")));
+	return fsp.rm(path.join(cwd, "dist"), { recursive: true, force: true }).then(() => fsp.mkdir(path.join(cwd, "dist")));
 }
 
 /**
@@ -351,31 +348,31 @@ async function cleanFolder({ cwd = process.cwd() } = {}) {
  * @returns Promise<void>
  */
 async function build({ cwd = process.cwd(), clean = false } = {}) {
-    // Nothing to do if there's no input file
-    if (!fs.existsSync(path.join(cwd, "index.css"))) return;
-
-    const content = await fsp.readFile(path.join(cwd, "index.css"), "utf8");
-
-    return Promise.all([
-        // This was buildCSS
-        processCSS(content, path.join(cwd, "index.css"), path.join(cwd, "dist", "index.css"), { cwd, clean })
-            .then(async (reports) =>
-                Promise.all([
-                    // After building, extract the available modifiers
-                    extractModifiers(path.join(cwd, "dist/index.css"), { cwd }),
-                    // Copy index.css to index-vars.css for backwards compat, log as deprecated
-                    copy(path.join(cwd, "dist/index.css"), path.join(cwd, "dist/index-vars.css"), { cwd }),
-                ])
-                    // Return the console output to be logged
-                    .then(r => [r, ...reports])
-            ),
-        // This was buildCSSWithoutThemes
-        processCSS(content, path.join(cwd, "index.css"), path.join(cwd, "dist/index-base.css"), {
-            cwd,
-            clean,
-            lint: false,
-        }),
-    ]);
+	// Nothing to do if there's no input file
+	if (!fs.existsSync(path.join(cwd, "index.css"))) return;
+
+	const content = await fsp.readFile(path.join(cwd, "index.css"), "utf8");
+
+	return Promise.all([
+		// This was buildCSS
+		processCSS(content, path.join(cwd, "index.css"), path.join(cwd, "dist", "index.css"), { cwd, clean })
+			.then(async (reports) =>
+				Promise.all([
+					// After building, extract the available modifiers
+					extractModifiers(path.join(cwd, "dist/index.css"), { cwd }),
+					// Copy index.css to index-vars.css for backwards compat, log as deprecated
+					copy(path.join(cwd, "dist/index.css"), path.join(cwd, "dist/index-vars.css"), { cwd }),
+				])
+				// Return the console output to be logged
+					.then(r => [r, ...reports])
+			),
+		// This was buildCSSWithoutThemes
+		processCSS(content, path.join(cwd, "index.css"), path.join(cwd, "dist/index-base.css"), {
+			cwd,
+			clean,
+			lint: false,
+		}),
+	]);
 }
 
 /**
@@ -386,28 +383,28 @@ async function build({ cwd = process.cwd(), clean = false } = {}) {
  * @returns Promise<void>
  */
 async function buildThemes({ cwd = process.cwd(), clean = false } = {}) {
-    // This fetches the content of the files and returns an array of objects with the content and input paths
-    const contentData = await fetchContent(["themes/*.css"], { cwd, clean });
-
-    // Nothing to do if there's no content
-    if (!contentData || contentData.length === 0) return;
-
-    return Promise.all(
-        contentData.map(async ({ content, input }) => {
-            const promises = [
-                processCSS(content, path.join(cwd, input), path.join(cwd, "dist", input), { cwd, clean, lint: false })
-            ];
-
-            // Additional processing for the express output because it includes both it and spectrum's content
-            if (path.basename(input, ".css") === "express") {
-                promises.push(
-                    processCSS(content, path.join(cwd, input), path.join(cwd, "dist/index-theme.css"), { cwd, clean, lint: false })
-                );
-            }
-
-            return Promise.all(promises);
-        })
-    );
+	// This fetches the content of the files and returns an array of objects with the content and input paths
+	const contentData = await fetchContent(["themes/*.css"], { cwd, clean });
+
+	// Nothing to do if there's no content
+	if (!contentData || contentData.length === 0) return;
+
+	return Promise.all(
+		contentData.map(async ({ content, input }) => {
+			const promises = [
+				processCSS(content, path.join(cwd, input), path.join(cwd, "dist", input), { cwd, clean, lint: false })
+			];
+
+			// Additional processing for the express output because it includes both it and spectrum's content
+			if (path.basename(input, ".css") === "express") {
+				promises.push(
+					processCSS(content, path.join(cwd, input), path.join(cwd, "dist/index-theme.css"), { cwd, clean, lint: false })
+				);
+			}
+
+			return Promise.all(promises);
+		})
+	);
 }
 
 /**
@@ -419,61 +416,62 @@ async function buildThemes({ cwd = process.cwd(), clean = false } = {}) {
  * @returns Promise<void>
  */
 async function main({
-    componentName = process.env.NX_TASK_TARGET_PROJECT,
-    cwd,
-    clean,
+	componentName = process.env.NX_TASK_TARGET_PROJECT,
+	cwd,
+	clean,
 } = {}) {
-    if (!cwd && (componentName)) {
-        cwd = path.join(dirs.components, componentName);
-    }
+	if (!cwd && (componentName)) {
+		cwd = path.join(dirs.components, componentName);
+	}
 
-    if (!componentName) {
-        componentName = cwd ? getPackageFromPath(cwd) : process.env.NX_TASK_TARGET_PROJECT;
-    }
+	if (!componentName) {
+		componentName = cwd ? getPackageFromPath(cwd) : process.env.NX_TASK_TARGET_PROJECT;
+	}
 
-    if (typeof clean === "undefined") {
-        clean = process.env.NODE_ENV === "production";
-    }
+	if (typeof clean === "undefined") {
+		clean = process.env.NODE_ENV === "production";
+	}
 
-    const key = `[build] ${`@spectrum-css/${componentName}`.cyan}`;
-    console.time(key);
+	const key = `[build] ${`@spectrum-css/${componentName}`.cyan}`;
+	console.time(key);
 
-    return Promise.all([
-        ...(clean ? [cleanFolder({ cwd })] : []),
-        build({ cwd, clean }),
-        buildThemes({ cwd, clean }),
-    ]).then((report) => {
-        const logs = report.flat(Infinity).filter(Boolean);
+	return Promise.all([
+		...(clean ? [cleanFolder({ cwd })] : []),
+		build({ cwd, clean }),
+		buildThemes({ cwd, clean }),
+	]).then((report) => {
+		const logs = report.flat(Infinity).filter(Boolean);
 
-        console.log(`\n\n${key} 🔨`);
-        console.log(`${"".padStart(30, "-")}`);
+		console.log(`\n\n${key} 🔨`);
+		console.log(`${"".padStart(30, "-")}`);
 
-        if (logs && logs.length > 0) {
-            logs.sort((a,) => {
-                if (a.includes('✓')) return -1;
-                if (a.includes('🔍')) return 0;
-                return 1;
-            }).forEach(log => console.log(log));
-        } else console.log(`No assets created.`.gray)
+		if (logs && logs.length > 0) {
+			logs.sort((a,) => {
+				if (a.includes("✓")) return -1;
+				if (a.includes("🔍")) return 0;
+				return 1;
+			}).forEach(log => console.log(log));
+		}
+		else console.log("No assets created.".gray);
 
-        console.log(`${"".padStart(30, "-")}`);
-        console.timeEnd(key);
-        console.log("");
+		console.log(`${"".padStart(30, "-")}`);
+		console.timeEnd(key);
+		console.log("");
 
-    }).catch((err) => {
+	}).catch((err) => {
 
-        console.log(`\n\n${key} 🔨`);
-        console.log(`${"".padStart(30, "-")}`);
+		console.log(`\n\n${key} 🔨`);
+		console.log(`${"".padStart(30, "-")}`);
 
-        console.trace(err);
+		console.trace(err);
 
-        console.log(`${"".padStart(30, "-")}`);
-        console.timeEnd(key);
-        console.log("");
+		console.log(`${"".padStart(30, "-")}`);
+		console.timeEnd(key);
+		console.log("");
 
-        process.exit(1);
-    });
-};
+		process.exit(1);
+	});
+}
 
 exports.processCSS = processCSS;
 exports.fetchContent = fetchContent;
diff --git a/yarn.lock b/yarn.lock
index 781bf8b0ee1..2725953d25b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5783,7 +5783,7 @@ autoprefixer@^10.4.17:
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
 
-autoprefixer@^10.4.18:
+autoprefixer@^10.4.18, autoprefixer@^10.4.19:
   version "10.4.19"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.19.tgz#ad25a856e82ee9d7898c59583c1afeb3fa65f89f"
   integrity sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==
@@ -7452,6 +7452,11 @@ css-blank-pseudo@^6.0.1:
   dependencies:
     postcss-selector-parser "^6.0.13"
 
+css-declaration-sorter@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-7.2.0.tgz#6dec1c9523bc4a643e088aab8f09e67a54961024"
+  integrity sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==
+
 css-functions-list@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.2.1.tgz#2eb205d8ce9f9ce74c5c1d7490b66b77c45ce3ea"
@@ -7543,11 +7548,73 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+cssnano-preset-advanced@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-advanced/-/cssnano-preset-advanced-6.1.2.tgz#82b090872b8f98c471f681d541c735acf8b94d3f"
+  integrity sha512-Nhao7eD8ph2DoHolEzQs5CfRpiEP0xa1HBdnFZ82kvqdmbwVBUr2r1QuQ4t1pi+D1ZpqpcO4T+wy/7RxzJ/WPQ==
+  dependencies:
+    autoprefixer "^10.4.19"
+    browserslist "^4.23.0"
+    cssnano-preset-default "^6.1.2"
+    postcss-discard-unused "^6.0.5"
+    postcss-merge-idents "^6.0.3"
+    postcss-reduce-idents "^6.0.3"
+    postcss-zindex "^6.0.2"
+
+cssnano-preset-default@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-6.1.2.tgz#adf4b89b975aa775f2750c89dbaf199bbd9da35e"
+  integrity sha512-1C0C+eNaeN8OcHQa193aRgYexyJtU8XwbdieEjClw+J9d94E41LwT6ivKH0WT+fYwYWB0Zp3I3IZ7tI/BbUbrg==
+  dependencies:
+    browserslist "^4.23.0"
+    css-declaration-sorter "^7.2.0"
+    cssnano-utils "^4.0.2"
+    postcss-calc "^9.0.1"
+    postcss-colormin "^6.1.0"
+    postcss-convert-values "^6.1.0"
+    postcss-discard-comments "^6.0.2"
+    postcss-discard-duplicates "^6.0.3"
+    postcss-discard-empty "^6.0.3"
+    postcss-discard-overridden "^6.0.2"
+    postcss-merge-longhand "^6.0.5"
+    postcss-merge-rules "^6.1.1"
+    postcss-minify-font-values "^6.1.0"
+    postcss-minify-gradients "^6.0.3"
+    postcss-minify-params "^6.1.0"
+    postcss-minify-selectors "^6.0.4"
+    postcss-normalize-charset "^6.0.2"
+    postcss-normalize-display-values "^6.0.2"
+    postcss-normalize-positions "^6.0.2"
+    postcss-normalize-repeat-style "^6.0.2"
+    postcss-normalize-string "^6.0.2"
+    postcss-normalize-timing-functions "^6.0.2"
+    postcss-normalize-unicode "^6.1.0"
+    postcss-normalize-url "^6.0.2"
+    postcss-normalize-whitespace "^6.0.2"
+    postcss-ordered-values "^6.0.2"
+    postcss-reduce-initial "^6.1.0"
+    postcss-reduce-transforms "^6.0.2"
+    postcss-svgo "^6.0.3"
+    postcss-unique-selectors "^6.0.4"
+
 cssnano-utils@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-4.0.1.tgz#fd18b42f95938bf55ab47967705355d6047bf1da"
   integrity sha512-6qQuYDqsGoiXssZ3zct6dcMxiqfT6epy7x4R0TQJadd4LWO3sPR6JH6ZByOvVLoZ6EdwPGgd7+DR1EmX3tiXQQ==
 
+cssnano-utils@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/cssnano-utils/-/cssnano-utils-4.0.2.tgz#56f61c126cd0f11f2eef1596239d730d9fceff3c"
+  integrity sha512-ZR1jHg+wZ8o4c3zqf1SIUSTIvm/9mU343FMR6Obe/unskbvpGhZOo1J6d/r8D1pzkRQYuwbcH3hToOuoA2G7oQ==
+
+cssnano@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-6.1.2.tgz#4bd19e505bd37ee7cf0dc902d3d869f6d79c66b8"
+  integrity sha512-rYk5UeX7VAM/u0lNqewCdasdtPK81CgX8wJFLEIXHbV2oldWRgJAsZrdhRXkV1NJzA2g850KiFm9mMU2HxNxMA==
+  dependencies:
+    cssnano-preset-default "^6.1.2"
+    lilconfig "^3.1.1"
+
 csso@^5.0.5:
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/csso/-/csso-5.0.5.tgz#f9b7fe6cc6ac0b7d90781bb16d5e9874303e2ca6"
@@ -11349,6 +11416,11 @@ lilconfig@3.0.0, lilconfig@^3.0.0:
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.0.0.tgz#f8067feb033b5b74dab4602a5f5029420be749bc"
   integrity sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==
 
+lilconfig@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-3.1.1.tgz#9d8a246fa753106cfc205fd2d77042faca56e5e3"
+  integrity sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==
+
 limiter@^1.0.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.5.tgz#8f92a25b3b16c6131293a0cc834b4a838a2aa7c2"
@@ -13800,6 +13872,14 @@ postcss-bem-linter@^4.0.1:
     minimatch "^3.1.2"
     postcss-resolve-nested-selector "^0.1.1"
 
+postcss-calc@^9.0.1:
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-9.0.1.tgz#a744fd592438a93d6de0f1434c572670361eb6c6"
+  integrity sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==
+  dependencies:
+    postcss-selector-parser "^6.0.11"
+    postcss-value-parser "^4.2.0"
+
 postcss-clamp@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-clamp/-/postcss-clamp-4.1.0.tgz#7263e95abadd8c2ba1bd911b0b5a5c9c93e02363"
@@ -13852,6 +13932,16 @@ postcss-color-rebeccapurple@^9.0.3:
     "@csstools/utilities" "^1.0.0"
     postcss-value-parser "^4.2.0"
 
+postcss-colormin@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-6.1.0.tgz#076e8d3fb291fbff7b10e6b063be9da42ff6488d"
+  integrity sha512-x9yX7DOxeMAR+BgGVnNSAxmAj98NX/YxEMNFP+SDCEeNLb2r3i6Hh1ksMsnW8Ub5SLCpbescQqn9YEbE9554Sw==
+  dependencies:
+    browserslist "^4.23.0"
+    caniuse-api "^3.0.0"
+    colord "^2.9.3"
+    postcss-value-parser "^4.2.0"
+
 postcss-combine-duplicated-selectors@^10.0.3:
   version "10.0.3"
   resolved "https://registry.yarnpkg.com/postcss-combine-duplicated-selectors/-/postcss-combine-duplicated-selectors-10.0.3.tgz#71e8b6783e99cd560cf08ba7b896ad0db318c11c"
@@ -13859,6 +13949,14 @@ postcss-combine-duplicated-selectors@^10.0.3:
   dependencies:
     postcss-selector-parser "^6.0.4"
 
+postcss-convert-values@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-6.1.0.tgz#3498387f8efedb817cbc63901d45bd1ceaa40f48"
+  integrity sha512-zx8IwP/ts9WvUM6NkVSkiU902QZL1bwPhaVaLynPtCsOTqp+ZKbNi+s6XJg3rfqpKGA/oc7Oxk5t8pOQJcwl/w==
+  dependencies:
+    browserslist "^4.23.0"
+    postcss-value-parser "^4.2.0"
+
 postcss-custom-media@^10.0.4:
   version "10.0.4"
   resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-10.0.4.tgz#f40fcf05f3ee95e7a34bbdcb4dff99da41f0238f"
@@ -13902,11 +14000,28 @@ postcss-discard-comments@^6.0.2:
   resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-6.0.2.tgz#e768dcfdc33e0216380623652b0a4f69f4678b6c"
   integrity sha512-65w/uIqhSBBfQmYnG92FO1mWZjJ4GL5b8atm5Yw2UgrwD7HiNiSSNwJor1eCFGzUgYnN/iIknhNRVqjrrpuglw==
 
+postcss-discard-duplicates@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-6.0.3.tgz#d121e893c38dc58a67277f75bb58ba43fce4c3eb"
+  integrity sha512-+JA0DCvc5XvFAxwx6f/e68gQu/7Z9ud584VLmcgto28eB8FqSFZwtrLwB5Kcp70eIoWP/HXqz4wpo8rD8gpsTw==
+
 postcss-discard-empty@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-6.0.3.tgz#ee39c327219bb70473a066f772621f81435a79d9"
   integrity sha512-znyno9cHKQsK6PtxL5D19Fj9uwSzC2mB74cpT66fhgOadEUPyXFkbgwm5tvc3bt3NAy8ltE5MrghxovZRVnOjQ==
 
+postcss-discard-overridden@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-6.0.2.tgz#4e9f9c62ecd2df46e8fdb44dc17e189776572e2d"
+  integrity sha512-j87xzI4LUggC5zND7KdjsI25APtyMuynXZSujByMaav2roV6OZX+8AaCUcZSWqckZpjAjRyFDdpqybgjFO0HJQ==
+
+postcss-discard-unused@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-6.0.5.tgz#c1b0e8c032c6054c3fbd22aaddba5b248136f338"
+  integrity sha512-wHalBlRHkaNnNwfC8z+ppX57VhvS+HWgjW508esjdaEYr3Mx7Gnn2xA4R/CKf5+Z9S5qsqC+Uzh4ueENWwCVUA==
+  dependencies:
+    postcss-selector-parser "^6.0.16"
+
 postcss-double-position-gradients@^5.0.5:
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-5.0.5.tgz#4baa4d3ec35ef59ddb8b7ee44fd8855cd7faeb40"
@@ -14019,6 +14134,22 @@ postcss-logical@^7.0.1:
   dependencies:
     postcss-value-parser "^4.2.0"
 
+postcss-merge-idents@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-6.0.3.tgz#7b9c31c7bc823c94bec50f297f04e3c2b838ea65"
+  integrity sha512-1oIoAsODUs6IHQZkLQGO15uGEbK3EAl5wi9SS8hs45VgsxQfMnxvt+L+zIr7ifZFIH14cfAeVe2uCTa+SPRa3g==
+  dependencies:
+    cssnano-utils "^4.0.2"
+    postcss-value-parser "^4.2.0"
+
+postcss-merge-longhand@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-6.0.5.tgz#ba8a8d473617c34a36abbea8dda2b215750a065a"
+  integrity sha512-5LOiordeTfi64QhICp07nzzuTDjNSO8g5Ksdibt44d+uvIIAE1oZdRn8y/W5ZtYgRH/lnLDlvi9F8btZcVzu3w==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+    stylehacks "^6.1.1"
+
 postcss-merge-rules@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-6.0.3.tgz#08fcf714faaad75b1980ecd961b080ae2f8ddeb3"
@@ -14029,6 +14160,48 @@ postcss-merge-rules@^6.0.3:
     cssnano-utils "^4.0.1"
     postcss-selector-parser "^6.0.15"
 
+postcss-merge-rules@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-6.1.1.tgz#7aa539dceddab56019469c0edd7d22b64c3dea9d"
+  integrity sha512-KOdWF0gju31AQPZiD+2Ar9Qjowz1LTChSjFFbS+e2sFgc4uHOp3ZvVX4sNeTlk0w2O31ecFGgrFzhO0RSWbWwQ==
+  dependencies:
+    browserslist "^4.23.0"
+    caniuse-api "^3.0.0"
+    cssnano-utils "^4.0.2"
+    postcss-selector-parser "^6.0.16"
+
+postcss-minify-font-values@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-6.1.0.tgz#a0e574c02ee3f299be2846369211f3b957ea4c59"
+  integrity sha512-gklfI/n+9rTh8nYaSJXlCo3nOKqMNkxuGpTn/Qm0gstL3ywTr9/WRKznE+oy6fvfolH6dF+QM4nCo8yPLdvGJg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-minify-gradients@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-6.0.3.tgz#ca3eb55a7bdb48a1e187a55c6377be918743dbd6"
+  integrity sha512-4KXAHrYlzF0Rr7uc4VrfwDJ2ajrtNEpNEuLxFgwkhFZ56/7gaE4Nr49nLsQDZyUe+ds+kEhf+YAUolJiYXF8+Q==
+  dependencies:
+    colord "^2.9.3"
+    cssnano-utils "^4.0.2"
+    postcss-value-parser "^4.2.0"
+
+postcss-minify-params@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-6.1.0.tgz#54551dec77b9a45a29c3cb5953bf7325a399ba08"
+  integrity sha512-bmSKnDtyyE8ujHQK0RQJDIKhQ20Jq1LYiez54WiaOoBtcSuflfK3Nm596LvbtlFcpipMjgClQGyGr7GAs+H1uA==
+  dependencies:
+    browserslist "^4.23.0"
+    cssnano-utils "^4.0.2"
+    postcss-value-parser "^4.2.0"
+
+postcss-minify-selectors@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-6.0.4.tgz#197f7d72e6dd19eed47916d575d69dc38b396aff"
+  integrity sha512-L8dZSwNLgK7pjTto9PzWRoMbnLq5vsZSTu8+j1P/2GB8qdtGQfn+K1uSvFgYvgh83cbyxT5m43ZZhUMTJDSClQ==
+  dependencies:
+    postcss-selector-parser "^6.0.16"
+
 postcss-modules-extract-imports@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
@@ -14066,11 +14239,81 @@ postcss-nesting@^12.1.0:
     "@csstools/selector-specificity" "^3.0.2"
     postcss-selector-parser "^6.0.13"
 
+postcss-normalize-charset@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-6.0.2.tgz#1ec25c435057a8001dac942942a95ffe66f721e1"
+  integrity sha512-a8N9czmdnrjPHa3DeFlwqst5eaL5W8jYu3EBbTTkI5FHkfMhFZh1EGbku6jhHhIzTA6tquI2P42NtZ59M/H/kQ==
+
+postcss-normalize-display-values@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-6.0.2.tgz#54f02764fed0b288d5363cbb140d6950dbbdd535"
+  integrity sha512-8H04Mxsb82ON/aAkPeq8kcBbAtI5Q2a64X/mnRRfPXBq7XeogoQvReqxEfc0B4WPq1KimjezNC8flUtC3Qz6jg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-positions@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-6.0.2.tgz#e982d284ec878b9b819796266f640852dbbb723a"
+  integrity sha512-/JFzI441OAB9O7VnLA+RtSNZvQ0NCFZDOtp6QPFo1iIyawyXg0YI3CYM9HBy1WvwCRHnPep/BvI1+dGPKoXx/Q==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-repeat-style@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-6.0.2.tgz#f8006942fd0617c73f049dd8b6201c3a3040ecf3"
+  integrity sha512-YdCgsfHkJ2jEXwR4RR3Tm/iOxSfdRt7jplS6XRh9Js9PyCR/aka/FCb6TuHT2U8gQubbm/mPmF6L7FY9d79VwQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-string@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-6.0.2.tgz#e3cc6ad5c95581acd1fc8774b309dd7c06e5e363"
+  integrity sha512-vQZIivlxlfqqMp4L9PZsFE4YUkWniziKjQWUtsxUiVsSSPelQydwS8Wwcuw0+83ZjPWNTl02oxlIvXsmmG+CiQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-timing-functions@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-6.0.2.tgz#40cb8726cef999de984527cbd9d1db1f3e9062c0"
+  integrity sha512-a+YrtMox4TBtId/AEwbA03VcJgtyW4dGBizPl7e88cTFULYsprgHWTbfyjSLyHeBcK/Q9JhXkt2ZXiwaVHoMzA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-unicode@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-6.1.0.tgz#aaf8bbd34c306e230777e80f7f12a4b7d27ce06e"
+  integrity sha512-QVC5TQHsVj33otj8/JD869Ndr5Xcc/+fwRh4HAsFsAeygQQXm+0PySrKbr/8tkDKzW+EVT3QkqZMfFrGiossDg==
+  dependencies:
+    browserslist "^4.23.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-url@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-6.0.2.tgz#292792386be51a8de9a454cb7b5c58ae22db0f79"
+  integrity sha512-kVNcWhCeKAzZ8B4pv/DnrU1wNh458zBNp8dh4y5hhxih5RZQ12QWMuQrDgPRw3LRl8mN9vOVfHl7uhvHYMoXsQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-normalize-whitespace@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-6.0.2.tgz#fbb009e6ebd312f8b2efb225c2fcc7cf32b400cd"
+  integrity sha512-sXZ2Nj1icbJOKmdjXVT9pnyHQKiSAyuNQHSgRCUgThn2388Y9cGVDR+E9J9iAYbSbLHI+UUwLVl1Wzco/zgv0Q==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
 postcss-opacity-percentage@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-opacity-percentage/-/postcss-opacity-percentage-2.0.0.tgz#c0a56060cd4586e3f954dbde1efffc2deed53002"
   integrity sha512-lyDrCOtntq5Y1JZpBFzIWm2wG9kbEdujpNt4NLannF+J9c8CgFIzPa80YQfdza+Y+yFfzbYj/rfoOsYsooUWTQ==
 
+postcss-ordered-values@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-6.0.2.tgz#366bb663919707093451ab70c3f99c05672aaae5"
+  integrity sha512-VRZSOB+JU32RsEAQrO94QPkClGPKJEL/Z9PCBImXMhIeK5KAYo6slP/hBYlLgrCjFxyqvn5VC81tycFEDBLG1Q==
+  dependencies:
+    cssnano-utils "^4.0.2"
+    postcss-value-parser "^4.2.0"
+
 postcss-overflow-shorthand@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-5.0.1.tgz#c0a124edad4f7ad88109275a60510e1fb07ab833"
@@ -14168,6 +14411,28 @@ postcss-pseudo-classes@^0.4.0:
   resolved "https://registry.yarnpkg.com/postcss-pseudo-classes/-/postcss-pseudo-classes-0.4.0.tgz#e3ecfff1c30db7ecda9dd063bc80499b305393f5"
   integrity sha512-k1MTMzMdBg3eW05QV/W3rZyuzOFJ3HU3AMbMamillv5G/5NuepHdMl6jO+6GHnjxH12/sNmBqdOI+zYIP86kZg==
 
+postcss-reduce-idents@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-6.0.3.tgz#b0d9c84316d2a547714ebab523ec7d13704cd486"
+  integrity sha512-G3yCqZDpsNPoQgbDUy3T0E6hqOQ5xigUtBQyrmq3tn2GxlyiL0yyl7H+T8ulQR6kOcHJ9t7/9H4/R2tv8tJbMA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-reduce-initial@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-6.1.0.tgz#4401297d8e35cb6e92c8e9586963e267105586ba"
+  integrity sha512-RarLgBK/CrL1qZags04oKbVbrrVK2wcxhvta3GCxrZO4zveibqbRPmm2VI8sSgCXwoUHEliRSbOfpR0b/VIoiw==
+  dependencies:
+    browserslist "^4.23.0"
+    caniuse-api "^3.0.0"
+
+postcss-reduce-transforms@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-6.0.2.tgz#6fa2c586bdc091a7373caeee4be75a0f3e12965d"
+  integrity sha512-sB+Ya++3Xj1WaT9+5LOOdirAxP7dJZms3GRcYheSPi1PiTMigsxHAdkrbItHxwYHr4kt1zL7mmcHstgMYT+aiA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
 postcss-replace-overflow-wrap@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz#d2df6bed10b477bf9c52fab28c568b4b29ca4319"
@@ -14226,6 +14491,14 @@ postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.13, postcss-select
     cssesc "^3.0.0"
     util-deprecate "^1.0.2"
 
+postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.0.16:
+  version "6.0.16"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz#3b88b9f5c5abd989ef4e2fc9ec8eedd34b20fb04"
+  integrity sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.15:
   version "6.0.15"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz#11cc2b21eebc0b99ea374ffb9887174855a01535"
@@ -14239,11 +14512,31 @@ postcss-sorting@^8.0.2:
   resolved "https://registry.yarnpkg.com/postcss-sorting/-/postcss-sorting-8.0.2.tgz#6393385ece272baf74bee9820fb1b58098e4eeca"
   integrity sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==
 
+postcss-svgo@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-6.0.3.tgz#1d6e180d6df1fa8a3b30b729aaa9161e94f04eaa"
+  integrity sha512-dlrahRmxP22bX6iKEjOM+c8/1p+81asjKT+V5lrgOH944ryx/OHpclnIbGsKVd3uWOXFLYJwCVf0eEkJGvO96g==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+    svgo "^3.2.0"
+
+postcss-unique-selectors@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-6.0.4.tgz#983ab308896b4bf3f2baaf2336e14e52c11a2088"
+  integrity sha512-K38OCaIrO8+PzpArzkLKB42dSARtC2tmG6PvD4b1o1Q2E9Os8jzfWFfSy/rixsHwohtsDdFtAWGjFVFUdwYaMg==
+  dependencies:
+    postcss-selector-parser "^6.0.16"
+
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss-zindex@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-6.0.2.tgz#e498304b83a8b165755f53db40e2ea65a99b56e1"
+  integrity sha512-5BxW9l1evPB/4ZIc+2GobEBoKC+h8gPGCMi+jxsYvd2x0mjq7wazk6DrP71pStqxE9Foxh5TVnonbWpFZzXaYg==
+
 postcss@^5.0.4:
   version "5.2.18"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
@@ -16214,6 +16507,14 @@ style-search@^0.1.0:
   resolved "https://registry.yarnpkg.com/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902"
   integrity sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==
 
+stylehacks@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-6.1.1.tgz#543f91c10d17d00a440430362d419f79c25545a6"
+  integrity sha512-gSTTEQ670cJNoaeIp9KX6lZmm8LJ3jPB5yJmX8Zq/wQxOsAFXV3qjWzHas3YYk1qesuVIyYWWUpZ0vSE/dTSGg==
+  dependencies:
+    browserslist "^4.23.0"
+    postcss-selector-parser "^6.0.16"
+
 stylelint-config-clean-order@^5.4.1:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/stylelint-config-clean-order/-/stylelint-config-clean-order-5.4.1.tgz#3f676d561ededc11056aaa2ce21cd9f943341c9c"