feat: update postcss tooling (#3527)

castastrophe · web-flow · commit 5f1751c82a5f · 2025-03-20T00:52:26.000Z
By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the .js-focus-within and '[focus-within]` selectors for the focus-within polyfill. Changes appear in: clearbutton, assetlist, slider, dial, menu.
diff --git a/.changeset/dirty-gorillas-warn.md b/.changeset/dirty-gorillas-warn.md
@@ -0,0 +1,9 @@
+---
+"@spectrum-css/clearbutton": minor
+"@spectrum-css/assetlist": minor
+"@spectrum-css/slider": minor
+"@spectrum-css/dial": minor
+"@spectrum-css/menu": minor
+---
+
+By updating the postcss-preset-env to the latest breaking change version, output for this component no longer injects the `.js-focus-within` and '[focus-within]` selectors for the focus-within polyfill. As this feature is not used in the SWC consumption, risk to the end user for this removal is low.
diff --git a/.changeset/silent-pandas-film.md b/.changeset/silent-pandas-film.md
@@ -0,0 +1,11 @@
+---
+"@spectrum-tools/stylelint-no-unknown-custom-properties": patch
+"@spectrum-tools/stylelint-no-unused-custom-properties": patch
+"@spectrum-tools/postcss-add-theming-layer": patch
+"@spectrum-tools/stylelint-theme-alignment": patch
+"@spectrum-tools/stylelint-no-missing-var": patch
+"@spectrum-css/bundle": patch
+"@spectrum-css/preview": patch
+---
+
+Minor dependency updates to align with the larger project.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,6 +1,6 @@
-import fs from "fs";
-import path from "path";
-import remarkGfm from "remark-gfm";
+import fs from "node:fs";
+import path from "node:path";
+import remarkGfm from 'remark-gfm';
 
 // Get a list of all the folders in the components directory
 const componentDir = path.resolve(__dirname, "../components");
@@ -104,7 +104,17 @@ export default {
 				devSourcemap: configType === "DEVELOPMENT",
 			},
 			resolve: {
-				alias: components.map(component => ({ find: `@spectrum-css/${component}`, replacement: path.resolve(__dirname, `../components/${component}`) })),
+				alias: [
+					...components.map(component => ({ find: `@spectrum-css/${component}`, replacement: path.resolve(__dirname, `../components/${component}`) })),
+					{
+						find: `@spectrum-css/tokens`,
+						replacement: path.resolve(__dirname, `../tokens`),
+					},
+					{
+						find: `@spectrum-css/ui-icons`,
+						replacement: path.resolve(__dirname, `../ui-icons`),
+					},
+				],
 			}
 		});
 	},
diff --git a/.storybook/package.json b/.storybook/package.json
@@ -42,7 +42,7 @@
 		"@adobe/spectrum-css-workflow-icons": "^1.5.4",
 		"@spectrum-css/bundle": "1.0.0",
 		"@spectrum-css/tokens": "16.0.1",
-		"@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.2.0",
+		"@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.0.0",
 		"@spectrum-css/ui-icons": "1.1.2"
 	},
 	"devDependencies": {
@@ -70,7 +70,7 @@
 		"lodash-es": "^4.17.21",
 		"npm-registry-fetch": "^18.0.2",
 		"postcss": "^8.5.3",
-		"prettier": "^3.4.2",
+		"prettier": "^3.5.3",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
 		"react-syntax-highlighter": "^15.6.1",
diff --git a/.storybook/postcss.config.js b/.storybook/postcss.config.js
@@ -0,0 +1,23 @@
+/*!
+ * Copyright 2024 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.
+ */
+
+module.exports = (options) => require("../postcss.config.js")({
+	...options,
+	resolveImports: false,
+	env: "production",
+	map: false,
+	lint: false,
+	additionalPlugins: {
+		"@csstools/postcss-bundler": {},
+	},
+});
diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json
@@ -1,18 +1,12 @@
 {
   "sourceFile": "index.css",
   "selectors": [
-    ".js-focus-within .spectrum-AssetList-item.is-focused[focus-within]",
-    ".js-focus-within .spectrum-AssetList-item.is-focused[focus-within]:before",
-    ".js-focus-within .spectrum-AssetList-item[focus-within]:focus-visible",
-    ".js-focus-within .spectrum-AssetList-item[focus-within]:focus-visible:before",
     ".spectrum-AssetList",
     ".spectrum-AssetList-item",
     ".spectrum-AssetList-item .spectrum-AssetList-itemThumbnail",
     ".spectrum-AssetList-item.is-branch .spectrum-AssetList-itemChildIndicator",
     ".spectrum-AssetList-item.is-focused:focus-within",
     ".spectrum-AssetList-item.is-focused:focus-within:before",
-    ".spectrum-AssetList-item.is-focused[focus-within].js-focus-within",
-    ".spectrum-AssetList-item.is-focused[focus-within].js-focus-within:before",
     ".spectrum-AssetList-item.is-navigated",
     ".spectrum-AssetList-item.is-navigated:focus",
     ".spectrum-AssetList-item.is-navigated:hover",
@@ -30,8 +24,6 @@
     ".spectrum-AssetList-itemChildIndicator",
     ".spectrum-AssetList-itemLabel",
     ".spectrum-AssetList-itemSelector",
-    ".spectrum-AssetList-item[focus-within]:focus-visible.js-focus-within",
-    ".spectrum-AssetList-item[focus-within]:focus-visible.js-focus-within:before",
     ".spectrum-AssetList:dir(rtl)",
     "[dir=\"rtl\"] .spectrum-AssetList"
   ],
diff --git a/components/clearbutton/dist/metadata.json b/components/clearbutton/dist/metadata.json
@@ -1,8 +1,6 @@
 {
   "sourceFile": "index.css",
   "selectors": [
-    ".js-focus-within .spectrum-ClearButton:not(:disabled)[focus-within]",
-    ".js-focus-within .spectrum-ClearButton:not(:disabled)[focus-within] .spectrum-ClearButton-fill",
     ".spectrum-ClearButton",
     ".spectrum-ClearButton > .spectrum-Icon",
     ".spectrum-ClearButton--overBackground:focus-visible",
@@ -24,9 +22,7 @@
     ".spectrum-ClearButton:not(:disabled):focus-within",
     ".spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill",
     ".spectrum-ClearButton:not(:disabled):hover",
-    ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill",
-    ".spectrum-ClearButton:not(:disabled)[focus-within].js-focus-within",
-    ".spectrum-ClearButton:not(:disabled)[focus-within].js-focus-within .spectrum-ClearButton-fill"
+    ".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill"
   ],
   "modifiers": [
     "--mod-clear-button-background-color",
diff --git a/components/dial/dist/metadata.json b/components/dial/dist/metadata.json
@@ -1,8 +1,6 @@
 {
   "sourceFile": "index.css",
   "selectors": [
-    ".js-focus-within .spectrum-Dial-handle[focus-within]",
-    ".js-focus-within .spectrum-Dial-handle[focus-within]:after",
     ".spectrum-Dial",
     ".spectrum-Dial-controls",
     ".spectrum-Dial-controls:after",
@@ -20,8 +18,6 @@
     ".spectrum-Dial-handle:focus-within:after",
     ".spectrum-Dial-handle:hover",
     ".spectrum-Dial-handle:hover:after",
-    ".spectrum-Dial-handle[focus-within].js-focus-within",
-    ".spectrum-Dial-handle[focus-within].js-focus-within:after",
     ".spectrum-Dial-input",
     ".spectrum-Dial-input:focus",
     ".spectrum-Dial-label",
diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json
@@ -1,7 +1,6 @@
 {
   "sourceFile": "index.css",
   "selectors": [
-    ".js-focus-within .spectrum-Menu .spectrum-Menu-item--collapsible.is-open[focus-within]",
     ".spectrum-Menu",
     ".spectrum-Menu .spectrum-Menu-backIcon",
     ".spectrum-Menu .spectrum-Menu-checkmark",
@@ -129,7 +128,6 @@
     ".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected",
     ".spectrum-Menu.is-selectableMultiple .spectrum-Menu-item",
     ".spectrum-Menu.is-selectableMultiple .spectrum-Menu-itemCheckbox",
-    ".spectrum-Menu.js-focus-within .spectrum-Menu-item--collapsible.is-open[focus-within]",
     ".spectrum-Menu.spectrum-Menu--sizeL",
     ".spectrum-Menu.spectrum-Menu--sizeS",
     ".spectrum-Menu.spectrum-Menu--sizeXL",
diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json
@@ -1,7 +1,6 @@
 {
   "sourceFile": "index.css",
   "selectors": [
-    ".js-focus-within .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls[focus-within]",
     ".spectrum-Slider",
     ".spectrum-Slider .spectrum-Slider-handle.is-focused:before",
     ".spectrum-Slider--filled .spectrum-Slider-track:first-child:before",
@@ -94,7 +93,6 @@
     ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active",
     ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within",
     ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover",
-    ".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range).js-focus-within .spectrum-Slider-controls[focus-within]",
     ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)",
     "[dir=\"rtl\"] .spectrum-Slider",
     "[dir=\"rtl\"] .spectrum-Slider .spectrum-Slider-handle:before"
diff --git a/nx.json b/nx.json
@@ -102,7 +102,7 @@
 		},
 		"compare": {
 			"cache": true,
-			"dependsOn": ["build"],
+			"dependsOn": [{ "projects": "bundle", "target": "build" }],
 			"executor": "nx:run-commands",
 			"inputs": [
 				"{workspaceRoot}/tasks/compare-compiled-output.js",
diff --git a/package.json b/package.json
@@ -70,16 +70,17 @@
 		"@changesets/cli": "^2.27.11",
 		"@commitlint/cli": "^19.6.1",
 		"@commitlint/config-conventional": "^19.6.0",
+		"@csstools/postcss-bundler": "^2.0.6",
 		"@nx/devkit": "^19.8.2",
 		"@spectrum-tools/postcss-add-theming-layer": "1.0.1",
 		"@spectrum-tools/postcss-property-rollup": "0.0.1",
 		"@spectrum-tools/postcss-rgb-mapping": "1.0.0",
 		"@yarnpkg/types": "^4.0.0",
 		"at-rule-packer": "^0.4.2",
-		"autoprefixer": "^10.4.19",
+		"autoprefixer": "^10.4.21",
 		"colors": "^1.4.0",
 		"cross-env": "^7.0.3",
-		"cssnano": "^7.0.3",
+		"cssnano": "^7.0.6",
 		"cssnano-preset-advanced": "^7.0.6",
 		"diff": "^7.0.0",
 		"diff2html": "^3.4.51",
@@ -104,22 +105,22 @@
 		"postcss-extend": "^1.0.5",
 		"postcss-hover-media-feature": "^1.0.2",
 		"postcss-import": "^16.1.0",
-		"postcss-licensing": "^2.0.0",
-		"postcss-load-config": "^5.1.0",
+		"postcss-licensing": "^3.0.0",
+		"postcss-load-config": "^6.0.1",
 		"postcss-modules": "^6.0.1",
-		"postcss-preset-env": "^9.5.13",
+		"postcss-preset-env": "^10.1.5",
 		"postcss-pseudo-classes": "^0.4.0",
 		"postcss-reporter": "^7.1.0",
 		"postcss-selector-replace": "^1.0.2",
 		"postcss-sorting": "^9.1.0",
 		"postcss-values-parser": "^6.0.2",
-		"prettier": "^3.4.2",
+		"prettier": "^3.5.3",
 		"rimraf": "^6.0.1",
 		"semver": "^7.7.1",
-		"stylelint": "^16.9.0",
+		"stylelint": "^16.15.0",
 		"stylelint-config-standard": "^36.0.1",
-		"stylelint-header": "^2.0.1",
-		"stylelint-high-performance-animation": "^1.10.0",
+		"stylelint-header": "^2.1.0",
+		"stylelint-high-performance-animation": "^1.11.0",
 		"stylelint-order": "^6.0.4",
 		"stylelint-selector-bem-pattern": "^4.0.1",
 		"stylelint-use-logical": "^2.1.2",
diff --git a/plugins/postcss-add-theming-layer/package.json b/plugins/postcss-add-theming-layer/package.json
@@ -23,7 +23,7 @@
     "*.md"
   ],
   "dependencies": {
-    "postcss-selector-parser": "^6.1.1",
+    "postcss-selector-parser": "^6.1.2",
     "postcss-values-parser": "^6.0.2"
   },
   "peerDependencies": {
diff --git a/plugins/stylelint-no-missing-var/package.json b/plugins/stylelint-no-missing-var/package.json
@@ -35,7 +35,7 @@
   "devDependencies": {
     "ava": "^6.2.0",
     "c8": "^10.1.3",
-    "stylelint": "^16.9.0"
+    "stylelint": "^16.15.0"
   },
   "keywords": [
     "css",
diff --git a/plugins/stylelint-no-unknown-custom-properties/package.json b/plugins/stylelint-no-unknown-custom-properties/package.json
@@ -38,7 +38,7 @@
   "devDependencies": {
     "ava": "^6.2.0",
     "c8": "^10.1.3",
-    "stylelint": "^16.9.0"
+    "stylelint": "^16.15.0"
   },
   "keywords": [
     "css",
diff --git a/plugins/stylelint-no-unused-custom-properties/package.json b/plugins/stylelint-no-unused-custom-properties/package.json
@@ -37,7 +37,7 @@
   "devDependencies": {
     "ava": "^6.2.0",
     "c8": "^10.1.3",
-    "stylelint": "^16.9.0"
+    "stylelint": "^16.15.0"
   },
   "keywords": [
     "css",
diff --git a/plugins/stylelint-theme-alignment/package.json b/plugins/stylelint-theme-alignment/package.json
@@ -32,7 +32,7 @@
     "stylelint": ">=16"
   },
   "devDependencies": {
-    "stylelint": "^16.9.0"
+    "stylelint": "^16.15.0"
   },
   "keywords": [
     "css",
diff --git a/postcss.config.js b/postcss.config.js
@@ -113,18 +113,12 @@ module.exports = ({
 				stage: 2,
 				env,
 				features: {
-					"custom-properties": true,
-					"logical-properties-and-values": false,
-					clamp: true,
-					"color-functional-notation": true,
 					"dir-pseudo-class": { preserve: true },
-					"nesting-rules": { noIsPseudoSelector: true },
-					// https://github.com/jsxtools/focus-within
-					"focus-within-pseudo-class": true,
-					"font-format-keywords": true,
-					"opacity-percentage": true,
-					// https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme
-					"prefers-color-scheme-query": true,
+					"nesting-rules": {
+						preserve: true,
+						edition: "2021",
+						noIsPseudoSelector: true,
+					},
 				},
 			},
 			/* --------------------------------------------------- */
diff --git a/stylelint.config.js b/stylelint.config.js
@@ -198,11 +198,7 @@ module.exports = {
 			rules: {
 				"custom-property-pattern": null,
 				"color-function-notation": null,
-				"selector-class-pattern": [
-					"^(spectrum|is-|u-|sb-)[A-Za-z0-9-]*", {
-						resolveNestedSelectors: true
-					}
-				],
+				"selector-class-pattern": null,
 				"font-family-no-missing-generic-family-keyword": null,
 			},
 		},
diff --git a/tools/bundle/package.json b/tools/bundle/package.json
@@ -117,7 +117,7 @@
 		"@spectrum-css/well": "7.1.0",
 		"colors": "^1.4.0",
 		"postcss": "^8.5.3",
-		"postcss-licensing": "^2.0.0"
+		"postcss-licensing": "^3.0.0"
 	},
 	"keywords": [
 		"design-system",
diff --git a/yarn.lock b/yarn.lock
