feat: remove dir polyfill [CSS-222]

castastrophe · castastrophe · commit 6e05e55bc237 · 2025-07-11T15:00:20.000-04:00
diff --git a/.changeset/shiny-taxis-tease.md b/.changeset/shiny-taxis-tease.md
@@ -0,0 +1,26 @@
+---
+"@spectrum-css/actionbutton": major
+"@spectrum-css/colorslider": major
+"@spectrum-css/progressbar": major
+"@spectrum-css/breadcrumb": major
+"@spectrum-css/colorloupe": major
+"@spectrum-css/colorwheel": major
+"@spectrum-css/pagination": major
+"@spectrum-css/accordion": major
+"@spectrum-css/assetlist": major
+"@spectrum-css/colorarea": major
+"@spectrum-css/calendar": major
+"@spectrum-css/combobox": major
+"@spectrum-css/steplist": major
+"@spectrum-css/treeview": major
+"@spectrum-css/popover": major
+"@spectrum-css/tooltip": major
+"@spectrum-css/slider": major
+"@spectrum-css/switch": major
+"@spectrum-css/radio": major
+"@spectrum-css/table": major
+"@spectrum-css/menu": major
+"@spectrum-css/tabs": major
+---
+
+This update removes the `dir` attribute polyfill (served via a PostCSS transform to compiled assets) as the fallback is no longer necessary. The`dir` attribute support is available in all supported browsers and has been tested to correctly inherit inside web component shadow DOMs. This is a breaking change **only** to those relying on the `dir` attribute being present for styling, however, the `:dir` pseudo will correctly inherit values from their containers. To correctly determine the `dir` value of a node using JavaScript, you can use `getComputedStyle(node).direction`.
diff --git a/components/accordion/dist/metadata.json b/components/accordion/dist/metadata.json
@@ -33,8 +33,7 @@
     ".spectrum-Accordion:dir(rtl)",
     ".spectrum-Accordion:lang(ja)",
     ".spectrum-Accordion:lang(ko)",
-    ".spectrum-Accordion:lang(zh)",
-    "[dir=\"rtl\"] .spectrum-Accordion"
+    ".spectrum-Accordion:lang(zh)"
   ],
   "modifiers": [
     "--mod-accordion-animation-duration",
diff --git a/components/actionbutton/dist/metadata.json b/components/actionbutton/dist/metadata.json
@@ -36,7 +36,6 @@
     ".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
     ".spectrum-ActionButton:hover",
     ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
-    "[dir=\"rtl\"] .spectrum-ActionButton",
     "a.spectrum-ActionButton"
   ],
   "modifiers": [
diff --git a/components/assetlist/dist/metadata.json b/components/assetlist/dist/metadata.json
@@ -24,8 +24,7 @@
     ".spectrum-AssetList-itemChildIndicator",
     ".spectrum-AssetList-itemLabel",
     ".spectrum-AssetList-itemSelector",
-    ".spectrum-AssetList:dir(rtl)",
-    "[dir=\"rtl\"] .spectrum-AssetList"
+    ".spectrum-AssetList:dir(rtl)"
   ],
   "modifiers": [
     "--mod-assetlist-border-color-key-focus",
diff --git a/components/breadcrumb/dist/metadata.json b/components/breadcrumb/dist/metadata.json
@@ -29,8 +29,7 @@
     ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:focus-visible",
     ".spectrum-Breadcrumbs-itemLink[tabindex=\"0\"]:hover",
     ".spectrum-Breadcrumbs-itemSeparator",
-    ".spectrum-Breadcrumbs-itemSeparator:dir(rtl)",
-    "[dir=\"rtl\"] .spectrum-Breadcrumbs-itemSeparator"
+    ".spectrum-Breadcrumbs-itemSeparator:dir(rtl)"
   ],
   "modifiers": [
     "--mod-breadcrumbs-action-button-color",
diff --git a/components/calendar/dist/metadata.json b/components/calendar/dist/metadata.json
@@ -54,8 +54,7 @@
     ".spectrum-Calendar-tableCell",
     ".spectrum-Calendar-tableCell:focus",
     ".spectrum-Calendar-title",
-    ".spectrum-Calendar:dir(rtl)",
-    "[dir=\"rtl\"] .spectrum-Calendar"
+    ".spectrum-Calendar:dir(rtl)"
   ],
   "modifiers": [
     "--mod-calendar-border-radius-reset",
diff --git a/components/colorarea/dist/metadata.json b/components/colorarea/dist/metadata.json
@@ -9,8 +9,7 @@
     ".spectrum-ColorArea.is-disabled",
     ".spectrum-ColorArea.is-disabled .spectrum-ColorArea-gradient",
     ".spectrum-ColorArea.is-focused",
-    ".spectrum-ColorHandle-color",
-    "[dir=\"rtl\"] .spectrum-ColorArea-handle"
+    ".spectrum-ColorHandle-color"
   ],
   "modifiers": [
     "--mod-colorarea-border-color",
diff --git a/components/colorloupe/dist/metadata.json b/components/colorloupe/dist/metadata.json
@@ -9,8 +9,7 @@
     ".spectrum-ColorLoupe-outer-border",
     ".spectrum-ColorLoupe.is-disabled",
     ".spectrum-ColorLoupe.is-open",
-    ".spectrum-ColorLoupe:dir(rtl)",
-    "[dir=\"rtl\"] .spectrum-ColorLoupe"
+    ".spectrum-ColorLoupe:dir(rtl)"
   ],
   "modifiers": [
     "--mod-colorloupe-animation-distance",
diff --git a/components/colorslider/dist/metadata.json b/components/colorslider/dist/metadata.json
@@ -13,8 +13,7 @@
     ".spectrum-ColorSlider.is-disabled",
     ".spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard",
     ".spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-gradient",
-    ".spectrum-ColorSlider.is-focused",
-    "[dir=\"rtl\"] .spectrum-ColorSlider-gradient"
+    ".spectrum-ColorSlider.is-focused"
   ],
   "modifiers": [
     "--mod-color-slider-background-color-disabled",
diff --git a/components/colorwheel/dist/metadata.json b/components/colorwheel/dist/metadata.json
@@ -17,8 +17,7 @@
     ".spectrum-ColorWheel.is-dragged",
     ".spectrum-ColorWheel.is-focused",
     ".spectrum-ColorWheel:after",
-    ".spectrum-ColorWheel:before",
-    "[dir=\"rtl\"] .spectrum-ColorWheel-ColorArea-handle"
+    ".spectrum-ColorWheel:before"
   ],
   "modifiers": [
     "--mod-colorwheel-block-size",
diff --git a/components/combobox/dist/metadata.json b/components/combobox/dist/metadata.json
@@ -89,8 +89,7 @@
     ".spectrum-Combobox:hover:has(:focus) .spectrum-Combobox-button:not(:disabled, .is-invalid, .spectrum-PickerButton--quiet)",
     ".spectrum-Textfield.is-disabled .spectrum-Textfield-validationIcon",
     ".spectrum-Textfield.is-loading .spectrum-Textfield-validationIcon",
-    ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon",
-    "[dir=\"rtl\"] .spectrum-Combobox-progress-circle"
+    ".spectrum-Textfield.is-readOnly .spectrum-Textfield-validationIcon"
   ],
   "modifiers": [
     "--mod-combobox-alert-icon-color",
diff --git a/components/menu/dist/metadata.json b/components/menu/dist/metadata.json
@@ -148,8 +148,7 @@
     ".spectrum-Menu.spectrum-Menu--sizeXL",
     ".spectrum-Menu:lang(ja)",
     ".spectrum-Menu:lang(ko)",
-    ".spectrum-Menu:lang(zh)",
-    "[dir=\"rtl\"] .spectrum-Menu .spectrum-Menu-chevron"
+    ".spectrum-Menu:lang(zh)"
   ],
   "modifiers": [
     "--mod-menu-back-heading-color",
diff --git a/components/pagination/dist/metadata.json b/components/pagination/dist/metadata.json
@@ -10,8 +10,7 @@
     ".spectrum-Pagination-prevButton",
     ".spectrum-Pagination-prevButton .spectrum-Icon",
     ".spectrum-Pagination-textfield",
-    ".spectrum-Pagination:dir(rtl)",
-    "[dir=\"rtl\"] .spectrum-Pagination"
+    ".spectrum-Pagination:dir(rtl)"
   ],
   "modifiers": [
     "--mod-pagination-counter-color",
diff --git a/components/popover/dist/metadata.json b/components/popover/dist/metadata.json
@@ -83,19 +83,7 @@
     ".spectrum-Popover--withTip.spectrum-Popover--top-start .spectrum-Popover-tip",
     ".spectrum-Popover.is-open",
     ".spectrum-Popover.spectrum-Popover--withTip",
-    ".spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle",
-    "[dir=\"rtl\"] .spectrum-Popover--end-bottom.is-open",
-    "[dir=\"rtl\"] .spectrum-Popover--end-top.is-open",
-    "[dir=\"rtl\"] .spectrum-Popover--end.is-open",
-    "[dir=\"rtl\"] .spectrum-Popover--start-bottom.is-open",
-    "[dir=\"rtl\"] .spectrum-Popover--start-top.is-open",
-    "[dir=\"rtl\"] .spectrum-Popover--start.is-open",
-    "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--end .spectrum-Popover-tip",
-    "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--end-bottom .spectrum-Popover-tip",
-    "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--end-top .spectrum-Popover-tip",
-    "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--start .spectrum-Popover-tip",
-    "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--start-bottom .spectrum-Popover-tip",
-    "[dir=\"rtl\"] .spectrum-Popover--withTip.spectrum-Popover--start-top .spectrum-Popover-tip"
+    ".spectrum-Popover.spectrum-Popover--withTip .spectrum-Popover-tip .spectrum-Popover-tip-triangle"
   ],
   "modifiers": [
     "--mod-overlay-animation-duration",
diff --git a/components/progressbar/dist/metadata.json b/components/progressbar/dist/metadata.json
@@ -29,8 +29,7 @@
     ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-label",
     ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-percentage",
     ".spectrum-ProgressBar--staticWhite .spectrum-ProgressBar-track",
-    ".spectrum-ProgressBar-track",
-    "[dir=\"rtl\"] .spectrum-ProgressBar--indeterminate .spectrum-ProgressBar-fill"
+    ".spectrum-ProgressBar-track"
   ],
   "modifiers": [
     "--mod-progressbar-animation-duration-indeterminate",
diff --git a/components/radio/dist/metadata.json b/components/radio/dist/metadata.json
@@ -48,8 +48,7 @@
     ".spectrum-Radio:lang(ja)",
     ".spectrum-Radio:lang(ko)",
     ".spectrum-Radio:lang(zh)",
-    ".spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button",
-    "[dir=\"rtl\"] .spectrum-Radio .spectrum-Radio-button:after"
+    ".spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button"
   ],
   "modifiers": [
     "--mod-radio-animation-duration",
diff --git a/components/slider/dist/metadata.json b/components/slider/dist/metadata.json
@@ -89,9 +89,7 @@
     ".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(.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"
+    ".spectrum-Slider:not(.spectrum-Slider--sideLabel) .spectrum-Slider-labelContainer + .spectrum-Slider-controls:has(.spectrum-Slider-ramp)"
   ],
   "modifiers": [
     "--mod-animation-duration-100",
diff --git a/components/steplist/dist/metadata.json b/components/steplist/dist/metadata.json
@@ -40,10 +40,7 @@
     ".spectrum-Steplist-label:dir(rtl)",
     ".spectrum-Steplist-marker",
     ".spectrum-Steplist-markerContainer",
-    ".spectrum-Steplist-segment",
-    "[dir=\"rtl\"] .spectrum-Steplist-item:last-child .spectrum-Steplist-label",
-    "[dir=\"rtl\"] .spectrum-Steplist-item:only-child .spectrum-Steplist-label",
-    "[dir=\"rtl\"] .spectrum-Steplist-label"
+    ".spectrum-Steplist-segment"
   ],
   "modifiers": [
     "--mod-steplist-complete-label-text-color",
diff --git a/components/switch/dist/metadata.json b/components/switch/dist/metadata.json
@@ -63,10 +63,7 @@
     ".spectrum-Switch:hover .spectrum-Switch-input[disabled]:checked + .spectrum-Switch-switch:before",
     ".spectrum-Switch:hover .spectrum-Switch-switch",
     ".spectrum-Switch:hover .spectrum-Switch-switch:before",
-    ".spectrum-Switch:hover ~ .spectrum-Switch-label",
-    "[dir=\"rtl\"] .spectrum-Switch--active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before",
-    "[dir=\"rtl\"] .spectrum-Switch-input:checked + .spectrum-Switch-switch:before",
-    "[dir=\"rtl\"] .spectrum-Switch:active .spectrum-Switch-input:not(:disabled):checked + .spectrum-Switch-switch:before"
+    ".spectrum-Switch:hover ~ .spectrum-Switch-label"
   ],
   "modifiers": [
     "--mod-switch-animation-duration-switch",
diff --git a/components/table/dist/metadata.json b/components/table/dist/metadata.json
@@ -161,8 +161,7 @@
     ".spectrum-Table:lang(ja)",
     ".spectrum-Table:lang(ko)",
     ".spectrum-Table:lang(zh)",
-    ".spectrum-Table:not(.spectrum-Table-scroller)",
-    "[dir=\"rtl\"] .spectrum-Table"
+    ".spectrum-Table:not(.spectrum-Table-scroller)"
   ],
   "modifiers": [
     "--mod-table-avatar-size",
diff --git a/components/tabs/dist/metadata.json b/components/tabs/dist/metadata.json
@@ -50,9 +50,7 @@
     ".spectrum-Tabs.spectrum-Tabs--sizeL",
     ".spectrum-Tabs.spectrum-Tabs--sizeS",
     ".spectrum-Tabs.spectrum-Tabs--sizeXL",
-    ".spectrum-Tabs.spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item:before",
-    "[dir=\"rtl\"] .spectrum-Tabs--vertical",
-    "[dir=\"rtl\"] .spectrum-Tabs--vertical-right"
+    ".spectrum-Tabs.spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item:before"
   ],
   "modifiers": [
     "--mod-tabs-animation-duration",
diff --git a/components/tooltip/dist/metadata.json b/components/tooltip/dist/metadata.json
@@ -247,59 +247,7 @@
     ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-end",
     ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-left",
     ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-right",
-    ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start",
-    "[dir=\"rtl\"] .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--end .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--end-bottom.is-open",
-    "[dir=\"rtl\"] .spectrum-Tooltip--end-top .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--end-top.is-open",
-    "[dir=\"rtl\"] .spectrum-Tooltip--end.is-open",
-    "[dir=\"rtl\"] .spectrum-Tooltip--left .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--left-top .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--right .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--right-top .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--start .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--start-bottom.is-open",
-    "[dir=\"rtl\"] .spectrum-Tooltip--start-top .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--start-top.is-open",
-    "[dir=\"rtl\"] .spectrum-Tooltip--start.is-open",
-    "[dir=\"rtl\"] .spectrum-Tooltip--top-end .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .spectrum-Tooltip--top-start .spectrum-Tooltip-tip",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--end",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--end-bottom",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--end-top",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--start",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--start-bottom",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover .spectrum-Tooltip--start-top",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom",
-    "[dir=\"rtl\"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top"
+    ".u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start"
   ],
   "modifiers": [
     "--mod-overlay-animation-duration",
diff --git a/components/treeview/dist/metadata.json b/components/treeview/dist/metadata.json
@@ -48,8 +48,7 @@
     ".spectrum-TreeView.spectrum-TreeView--detached",
     ".spectrum-TreeView.spectrum-TreeView--quiet",
     ".spectrum-TreeView.spectrum-TreeView--thumbnail",
-    ".spectrum-TreeView:dir(rtl)",
-    "[dir=\"rtl\"] .spectrum-TreeView"
+    ".spectrum-TreeView:dir(rtl)"
   ],
   "modifiers": [
     "--mod-treeview-font-size",
diff --git a/package.json b/package.json
@@ -29,7 +29,7 @@
 		"cleaner": "nx run-many --target clean --projects",
 		"compare": "cross-env NODE_ENV=production yarn bundle && yarn component:compare",
 		"component:build": "node --no-warnings ./tasks/component-builder.js",
-		"component:compare": "node --no-warnings ./tasks/component-compare.js",
+		"component:compare": "node --no-warnings ./tasks/component-compare.js --tag next",
 		"component:report": "node --no-warnings ./tasks/component-reporter.js",
 		"dev": "cross-env NODE_ENV=development nx run storybook:build:docs",
 		"docs:report": "yarn report",
diff --git a/postcss.config.js b/postcss.config.js
@@ -95,7 +95,6 @@ module.exports = ({
 				stage: 2,
 				env,
 				features: {
-					"dir-pseudo-class": { preserve: true },
 					"nesting-rules": {
 						preserve: true,
 						edition: "2021",
diff --git a/tasks/component-compare.js b/tasks/component-compare.js
