build: cssnano optimizations

adobe · Mar 28, 2024 · 1362a5c · 1362a5c
1 parent a2593f7
commit 1362a5c
Show file tree

Hide file tree

Showing 9 changed files with 727 additions and 347 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/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
@@ -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
@@ -1,51 +1,74 @@
-/*!
-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 */
 %spectrum-overlay {
   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 */
 %spectrum-overlay--open {
   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
@@ -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
@@ -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
@@ -74,13 +74,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 --------------------- */
@@ -113,12 +115,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