Skip to content

Commit 5f1751c

Browse files
castastrophecastastrophe
authored
feat: update postcss tooling (#3527)
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.
1 parent e676eb5 commit 5f1751c

File tree

21 files changed

+804
-912
lines changed

21 files changed

+804
-912
lines changed

‎.changeset/dirty-gorillas-warn.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"@spectrum-css/clearbutton": minor
3+
"@spectrum-css/assetlist": minor
4+
"@spectrum-css/slider": minor
5+
"@spectrum-css/dial": minor
6+
"@spectrum-css/menu": minor
7+
---
8+
9+
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.

‎.changeset/silent-pandas-film.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
"@spectrum-tools/stylelint-no-unknown-custom-properties": patch
3+
"@spectrum-tools/stylelint-no-unused-custom-properties": patch
4+
"@spectrum-tools/postcss-add-theming-layer": patch
5+
"@spectrum-tools/stylelint-theme-alignment": patch
6+
"@spectrum-tools/stylelint-no-missing-var": patch
7+
"@spectrum-css/bundle": patch
8+
"@spectrum-css/preview": patch
9+
---
10+
11+
Minor dependency updates to align with the larger project.

‎.storybook/main.js

+14-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import fs from "fs";
2-
import path from "path";
3-
import remarkGfm from "remark-gfm";
1+
import fs from "node:fs";
2+
import path from "node:path";
3+
import remarkGfm from 'remark-gfm';
44

55
// Get a list of all the folders in the components directory
66
const componentDir = path.resolve(__dirname, "../components");
@@ -104,7 +104,17 @@ export default {
104104
devSourcemap: configType === "DEVELOPMENT",
105105
},
106106
resolve: {
107-
alias: components.map(component => ({ find: `@spectrum-css/${component}`, replacement: path.resolve(__dirname, `../components/${component}`) })),
107+
alias: [
108+
...components.map(component => ({ find: `@spectrum-css/${component}`, replacement: path.resolve(__dirname, `../components/${component}`) })),
109+
{
110+
find: `@spectrum-css/tokens`,
111+
replacement: path.resolve(__dirname, `../tokens`),
112+
},
113+
{
114+
find: `@spectrum-css/ui-icons`,
115+
replacement: path.resolve(__dirname, `../ui-icons`),
116+
},
117+
],
108118
}
109119
});
110120
},

‎.storybook/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"@adobe/spectrum-css-workflow-icons": "^1.5.4",
4343
"@spectrum-css/bundle": "1.0.0",
4444
"@spectrum-css/tokens": "16.0.1",
45-
"@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.2.0",
45+
"@spectrum-css/tokens-legacy": "npm:@spectrum-css/tokens@^15.0.0",
4646
"@spectrum-css/ui-icons": "1.1.2"
4747
},
4848
"devDependencies": {
@@ -70,7 +70,7 @@
7070
"lodash-es": "^4.17.21",
7171
"npm-registry-fetch": "^18.0.2",
7272
"postcss": "^8.5.3",
73-
"prettier": "^3.4.2",
73+
"prettier": "^3.5.3",
7474
"react": "^18.3.1",
7575
"react-dom": "^18.3.1",
7676
"react-syntax-highlighter": "^15.6.1",

‎.storybook/postcss.config.js

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/*!
2+
* Copyright 2024 Adobe. All rights reserved.
3+
*
4+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License. You may obtain a copy
6+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
7+
*
8+
* Unless required by applicable law or agreed to in writing, software distributed under
9+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
10+
* OF ANY KIND, either express or implied. See the License for the specific language
11+
* governing permissions and limitations under the License.
12+
*/
13+
14+
module.exports = (options) => require("../postcss.config.js")({
15+
...options,
16+
resolveImports: false,
17+
env: "production",
18+
map: false,
19+
lint: false,
20+
additionalPlugins: {
21+
"@csstools/postcss-bundler": {},
22+
},
23+
});

‎components/assetlist/dist/metadata.json

-8
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,12 @@
11
{
22
"sourceFile": "index.css",
33
"selectors": [
4-
".js-focus-within .spectrum-AssetList-item.is-focused[focus-within]",
5-
".js-focus-within .spectrum-AssetList-item.is-focused[focus-within]:before",
6-
".js-focus-within .spectrum-AssetList-item[focus-within]:focus-visible",
7-
".js-focus-within .spectrum-AssetList-item[focus-within]:focus-visible:before",
84
".spectrum-AssetList",
95
".spectrum-AssetList-item",
106
".spectrum-AssetList-item .spectrum-AssetList-itemThumbnail",
117
".spectrum-AssetList-item.is-branch .spectrum-AssetList-itemChildIndicator",
128
".spectrum-AssetList-item.is-focused:focus-within",
139
".spectrum-AssetList-item.is-focused:focus-within:before",
14-
".spectrum-AssetList-item.is-focused[focus-within].js-focus-within",
15-
".spectrum-AssetList-item.is-focused[focus-within].js-focus-within:before",
1610
".spectrum-AssetList-item.is-navigated",
1711
".spectrum-AssetList-item.is-navigated:focus",
1812
".spectrum-AssetList-item.is-navigated:hover",
@@ -30,8 +24,6 @@
3024
".spectrum-AssetList-itemChildIndicator",
3125
".spectrum-AssetList-itemLabel",
3226
".spectrum-AssetList-itemSelector",
33-
".spectrum-AssetList-item[focus-within]:focus-visible.js-focus-within",
34-
".spectrum-AssetList-item[focus-within]:focus-visible.js-focus-within:before",
3527
".spectrum-AssetList:dir(rtl)",
3628
"[dir=\"rtl\"] .spectrum-AssetList"
3729
],

‎components/clearbutton/dist/metadata.json

+1-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
{
22
"sourceFile": "index.css",
33
"selectors": [
4-
".js-focus-within .spectrum-ClearButton:not(:disabled)[focus-within]",
5-
".js-focus-within .spectrum-ClearButton:not(:disabled)[focus-within] .spectrum-ClearButton-fill",
64
".spectrum-ClearButton",
75
".spectrum-ClearButton > .spectrum-Icon",
86
".spectrum-ClearButton--overBackground:focus-visible",
@@ -24,9 +22,7 @@
2422
".spectrum-ClearButton:not(:disabled):focus-within",
2523
".spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill",
2624
".spectrum-ClearButton:not(:disabled):hover",
27-
".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill",
28-
".spectrum-ClearButton:not(:disabled)[focus-within].js-focus-within",
29-
".spectrum-ClearButton:not(:disabled)[focus-within].js-focus-within .spectrum-ClearButton-fill"
25+
".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill"
3026
],
3127
"modifiers": [
3228
"--mod-clear-button-background-color",

‎components/dial/dist/metadata.json

-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
{
22
"sourceFile": "index.css",
33
"selectors": [
4-
".js-focus-within .spectrum-Dial-handle[focus-within]",
5-
".js-focus-within .spectrum-Dial-handle[focus-within]:after",
64
".spectrum-Dial",
75
".spectrum-Dial-controls",
86
".spectrum-Dial-controls:after",
@@ -20,8 +18,6 @@
2018
".spectrum-Dial-handle:focus-within:after",
2119
".spectrum-Dial-handle:hover",
2220
".spectrum-Dial-handle:hover:after",
23-
".spectrum-Dial-handle[focus-within].js-focus-within",
24-
".spectrum-Dial-handle[focus-within].js-focus-within:after",
2521
".spectrum-Dial-input",
2622
".spectrum-Dial-input:focus",
2723
".spectrum-Dial-label",

‎components/menu/dist/metadata.json

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"sourceFile": "index.css",
33
"selectors": [
4-
".js-focus-within .spectrum-Menu .spectrum-Menu-item--collapsible.is-open[focus-within]",
54
".spectrum-Menu",
65
".spectrum-Menu .spectrum-Menu-backIcon",
76
".spectrum-Menu .spectrum-Menu-checkmark",
@@ -129,7 +128,6 @@
129128
".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected",
130129
".spectrum-Menu.is-selectableMultiple .spectrum-Menu-item",
131130
".spectrum-Menu.is-selectableMultiple .spectrum-Menu-itemCheckbox",
132-
".spectrum-Menu.js-focus-within .spectrum-Menu-item--collapsible.is-open[focus-within]",
133131
".spectrum-Menu.spectrum-Menu--sizeL",
134132
".spectrum-Menu.spectrum-Menu--sizeS",
135133
".spectrum-Menu.spectrum-Menu--sizeXL",

‎components/slider/dist/metadata.json

-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"sourceFile": "index.css",
33
"selectors": [
4-
".js-focus-within .spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls[focus-within]",
54
".spectrum-Slider",
65
".spectrum-Slider .spectrum-Slider-handle.is-focused:before",
76
".spectrum-Slider--filled .spectrum-Slider-track:first-child:before",
@@ -94,7 +93,6 @@
9493
".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:active",
9594
".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:focus-within",
9695
".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range) .spectrum-Slider-controls:hover",
97-
".spectrum-Slider:not(.is-disabled, .spectrum-Slider--filled, .spectrum-Slider--range).js-focus-within .spectrum-Slider-controls[focus-within]",
9896
".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)",
9997
"[dir=\"rtl\"] .spectrum-Slider",
10098
"[dir=\"rtl\"] .spectrum-Slider .spectrum-Slider-handle:before"

‎nx.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
},
103103
"compare": {
104104
"cache": true,
105-
"dependsOn": ["build"],
105+
"dependsOn": [{ "projects": "bundle", "target": "build" }],
106106
"executor": "nx:run-commands",
107107
"inputs": [
108108
"{workspaceRoot}/tasks/compare-compiled-output.js",

‎package.json

+10-9
Original file line numberDiff line numberDiff line change
@@ -70,16 +70,17 @@
7070
"@changesets/cli": "^2.27.11",
7171
"@commitlint/cli": "^19.6.1",
7272
"@commitlint/config-conventional": "^19.6.0",
73+
"@csstools/postcss-bundler": "^2.0.6",
7374
"@nx/devkit": "^19.8.2",
7475
"@spectrum-tools/postcss-add-theming-layer": "1.0.1",
7576
"@spectrum-tools/postcss-property-rollup": "0.0.1",
7677
"@spectrum-tools/postcss-rgb-mapping": "1.0.0",
7778
"@yarnpkg/types": "^4.0.0",
7879
"at-rule-packer": "^0.4.2",
79-
"autoprefixer": "^10.4.19",
80+
"autoprefixer": "^10.4.21",
8081
"colors": "^1.4.0",
8182
"cross-env": "^7.0.3",
82-
"cssnano": "^7.0.3",
83+
"cssnano": "^7.0.6",
8384
"cssnano-preset-advanced": "^7.0.6",
8485
"diff": "^7.0.0",
8586
"diff2html": "^3.4.51",
@@ -104,22 +105,22 @@
104105
"postcss-extend": "^1.0.5",
105106
"postcss-hover-media-feature": "^1.0.2",
106107
"postcss-import": "^16.1.0",
107-
"postcss-licensing": "^2.0.0",
108-
"postcss-load-config": "^5.1.0",
108+
"postcss-licensing": "^3.0.0",
109+
"postcss-load-config": "^6.0.1",
109110
"postcss-modules": "^6.0.1",
110-
"postcss-preset-env": "^9.5.13",
111+
"postcss-preset-env": "^10.1.5",
111112
"postcss-pseudo-classes": "^0.4.0",
112113
"postcss-reporter": "^7.1.0",
113114
"postcss-selector-replace": "^1.0.2",
114115
"postcss-sorting": "^9.1.0",
115116
"postcss-values-parser": "^6.0.2",
116-
"prettier": "^3.4.2",
117+
"prettier": "^3.5.3",
117118
"rimraf": "^6.0.1",
118119
"semver": "^7.7.1",
119-
"stylelint": "^16.9.0",
120+
"stylelint": "^16.15.0",
120121
"stylelint-config-standard": "^36.0.1",
121-
"stylelint-header": "^2.0.1",
122-
"stylelint-high-performance-animation": "^1.10.0",
122+
"stylelint-header": "^2.1.0",
123+
"stylelint-high-performance-animation": "^1.11.0",
123124
"stylelint-order": "^6.0.4",
124125
"stylelint-selector-bem-pattern": "^4.0.1",
125126
"stylelint-use-logical": "^2.1.2",

‎plugins/postcss-add-theming-layer/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"*.md"
2424
],
2525
"dependencies": {
26-
"postcss-selector-parser": "^6.1.1",
26+
"postcss-selector-parser": "^6.1.2",
2727
"postcss-values-parser": "^6.0.2"
2828
},
2929
"peerDependencies": {

‎plugins/stylelint-no-missing-var/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
"devDependencies": {
3636
"ava": "^6.2.0",
3737
"c8": "^10.1.3",
38-
"stylelint": "^16.9.0"
38+
"stylelint": "^16.15.0"
3939
},
4040
"keywords": [
4141
"css",

‎plugins/stylelint-no-unknown-custom-properties/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
"devDependencies": {
3939
"ava": "^6.2.0",
4040
"c8": "^10.1.3",
41-
"stylelint": "^16.9.0"
41+
"stylelint": "^16.15.0"
4242
},
4343
"keywords": [
4444
"css",

‎plugins/stylelint-no-unused-custom-properties/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"devDependencies": {
3838
"ava": "^6.2.0",
3939
"c8": "^10.1.3",
40-
"stylelint": "^16.9.0"
40+
"stylelint": "^16.15.0"
4141
},
4242
"keywords": [
4343
"css",

‎plugins/stylelint-theme-alignment/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"stylelint": ">=16"
3333
},
3434
"devDependencies": {
35-
"stylelint": "^16.9.0"
35+
"stylelint": "^16.15.0"
3636
},
3737
"keywords": [
3838
"css",

‎postcss.config.js

+5-11
Original file line numberDiff line numberDiff line change
@@ -113,18 +113,12 @@ module.exports = ({
113113
stage: 2,
114114
env,
115115
features: {
116-
"custom-properties": true,
117-
"logical-properties-and-values": false,
118-
clamp: true,
119-
"color-functional-notation": true,
120116
"dir-pseudo-class": { preserve: true },
121-
"nesting-rules": { noIsPseudoSelector: true },
122-
// https://github.com/jsxtools/focus-within
123-
"focus-within-pseudo-class": true,
124-
"font-format-keywords": true,
125-
"opacity-percentage": true,
126-
// https://github.com/csstools/postcss-plugins/tree/main/plugins/css-prefers-color-scheme
127-
"prefers-color-scheme-query": true,
117+
"nesting-rules": {
118+
preserve: true,
119+
edition: "2021",
120+
noIsPseudoSelector: true,
121+
},
128122
},
129123
},
130124
/* --------------------------------------------------- */

‎stylelint.config.js

+1-5
Original file line numberDiff line numberDiff line change
@@ -198,11 +198,7 @@ module.exports = {
198198
rules: {
199199
"custom-property-pattern": null,
200200
"color-function-notation": null,
201-
"selector-class-pattern": [
202-
"^(spectrum|is-|u-|sb-)[A-Za-z0-9-]*", {
203-
resolveNestedSelectors: true
204-
}
205-
],
201+
"selector-class-pattern": null,
206202
"font-family-no-missing-generic-family-keyword": null,
207203
},
208204
},

‎tools/bundle/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -117,7 +117,7 @@
117117
"@spectrum-css/well": "7.1.0",
118118
"colors": "^1.4.0",
119119
"postcss": "^8.5.3",
120-
"postcss-licensing": "^2.0.0"
120+
"postcss-licensing": "^3.0.0"
121121
},
122122
"keywords": [
123123
"design-system",

0 commit comments

Comments
 (0)