From a7181f10a2861d6f061f0a04d8eed42a6f773f21 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Mon, 22 Jan 2024 15:13:26 -0500 Subject: [PATCH] fix: deprecate logical transform plugin --- components/accordion/index.css | 53 ++++----- components/actionbutton/index.css | 7 +- components/assetlist/index.css | 9 +- components/breadcrumb/index.css | 5 +- components/calendar/index.css | 9 +- .../calendar/stories/calendar.stories.js | 6 +- components/pagination/index.css | 11 +- components/slider/index.css | 10 +- components/splitbutton/index.css | 14 +++ components/table/index.css | 59 +++++----- components/treeview/index.css | 11 +- .../css/plugins/postcss-transform-logical.js | 111 ------------------ .../css/processors.js | 1 - .../css/plugins/postcss-transform-logical.js | 111 ------------------ tools/component-builder/css/processors.js | 1 - 15 files changed, 116 insertions(+), 302 deletions(-) delete mode 100644 tools/component-builder-simple/css/plugins/postcss-transform-logical.js delete mode 100644 tools/component-builder/css/plugins/postcss-transform-logical.js diff --git a/components/accordion/index.css b/components/accordion/index.css index ada3ce27f5..ab176d0d50 100644 --- a/components/accordion/index.css +++ b/components/accordion/index.css @@ -45,6 +45,7 @@ governing permissions and limitations under the License. --spectrum-accordion-component-edge-to-text: var( --spectrum-component-edge-to-text-75 ); + /* Text header */ --spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack); --spectrum-accordion-item-header-font-weight: var( @@ -55,13 +56,7 @@ governing permissions and limitations under the License. ); --spectrum-accordion-item-header-font-size: var(--spectrum-font-size-300); --spectrum-accordion-item-header-line-height: 1.25; - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-accordion-item-header-line-height: var( - --spectrum-cjk-line-height-100 - ); - } + /* Text body */ --spectrum-accordion-item-content-font: var( --spectrum-sans-font-family-stack @@ -76,13 +71,7 @@ governing permissions and limitations under the License. --spectrum-accordion-item-content-line-height: var( --spectrum-line-height-100 ); - &:lang(ja), - &:lang(zh), - &:lang(ko) { - --spectrum-accordion-item-content-line-height: var( - --spectrum-cjk-line-height-100 - ); - } + /* Colors */ --spectrum-accordion-background-color-default: rgba( var(--spectrum-gray-900-rgb), @@ -100,6 +89,7 @@ governing permissions and limitations under the License. var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus) ); + /* Label */ --spectrum-accordion-item-header-color-default: var( --spectrum-neutral-content-color-default @@ -120,12 +110,15 @@ governing permissions and limitations under the License. --spectrum-accordion-item-content-disabled-color: var( --spectrum-disabled-content-color ); + /* Body */ --spectrum-accordion-item-content-color: var(--spectrum-body-color); + /* Focus indicator */ --spectrum-accordion-focus-indicator-color: var( --spectrum-focus-indicator-color ); + /* Divider */ --spectrum-accordion-divider-color: var(--spectrum-gray-300); --spectrum-accordion-min-block-size: max( @@ -151,6 +144,22 @@ governing permissions and limitations under the License. ) ) ); + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } + + &:lang(ja), + &:lang(zh), + &:lang(ko) { + --spectrum-accordion-item-header-line-height: var( + --spectrum-cjk-line-height-100 + ); + --spectrum-accordion-item-content-line-height: var( + --spectrum-cjk-line-height-100 + ); + } } .spectrum-Accordion--compact { @@ -621,19 +630,9 @@ governing permissions and limitations under the License. .spectrum-Accordion-item { &.is-open { - > .spectrum-Accordion-itemHeading - > .spectrum-Accordion-itemIconContainer - > .spectrum-Accordion-itemIndicator { - /* stylelint-disable declaration-property-value-no-unknown */ - transform: logical rotate(90deg); - /* stylelint-enable declaration-property-value-no-unknown */ - } - - > .spectrum-Accordion-itemIconContainer - > .spectrum-Accordion-itemIndicator { - /* stylelint-disable declaration-property-value-no-unknown */ - transform: logical rotate(90deg); - /* stylelint-enable declaration-property-value-no-unknown */ + > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator, + > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator { + transform: var(--spectrum-logical-rotation,) rotate(90deg); } > .spectrum-Accordion-itemContent { diff --git a/components/actionbutton/index.css b/components/actionbutton/index.css index 80abdd5689..13cfee9db8 100644 --- a/components/actionbutton/index.css +++ b/components/actionbutton/index.css @@ -27,6 +27,11 @@ governing permissions and limitations under the License. --spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color); --spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap)); + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } + &.is-selected { --mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default)); --mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover)); @@ -253,7 +258,7 @@ a.spectrum-ActionButton { color: inherit; - transform: logical rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */ + transform: var(--spectrum-logical-rotation); } /* special cases for focus-ring */ diff --git a/components/assetlist/index.css b/components/assetlist/index.css index 66144def23..c68b44ddc0 100644 --- a/components/assetlist/index.css +++ b/components/assetlist/index.css @@ -34,6 +34,11 @@ governing permissions and limitations under the License. /* label */ --spectrum-assetlist-item-label-padding-inline-start: var(--spectrum-spacing-100); --spectrum-assetlist-label-color: var(--spectrum-neutral-content-color-default); + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } .spectrum-AssetList { @@ -152,8 +157,7 @@ governing permissions and limitations under the License. .spectrum-AssetList-itemChildIndicator { display: none; transition: transform ease var(--mod-assetlist-child-indicator-animation, var(--spectrum-assetlist-child-indicator-animation)); - - transform: logical rotate(0deg); + transform: var(--spectrum-logical-rotation); } .spectrum-AssetList-itemLabel { @@ -182,4 +186,3 @@ governing permissions and limitations under the License. } } } - diff --git a/components/breadcrumb/index.css b/components/breadcrumb/index.css index afa4387307..71f28ad1bd 100644 --- a/components/breadcrumb/index.css +++ b/components/breadcrumb/index.css @@ -153,12 +153,11 @@ governing permissions and limitations under the License. margin-block: var(--mod-breadcrumbs-icon-spacing-block, var(--spectrum-breadcrumbs-icon-spacing-block)); margin-inline: var(--mod-breadcrumbs-separator-spacing-inline, var(--spectrum-breadcrumbs-separator-spacing-inline)); - transform: logical scale(1) rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */ - opacity: 1; color: var(--highcontrast-breadcrumbs-separator-color, var(--mod-breadcrumbs-separator-color, var(--spectrum-breadcrumbs-separator-color))); - [dir="rtl"] & { + [dir="rtl"] &, + &:dir(rtl) { transform: scaleX(-1); } diff --git a/components/calendar/index.css b/components/calendar/index.css index dbf4c9adc7..e1ada09cb2 100644 --- a/components/calendar/index.css +++ b/components/calendar/index.css @@ -49,8 +49,11 @@ governing permissions and limitations under the License. --spectrum-calendar-day-text-color-key-focus: var(--spectrum-gray-900); --spectrum-calendar-button-icon-color: var(--spectrum-gray-700); - --spectrum-calendar-button-icon-color-disabled: var(--spectrum-disabled-content-color); + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } .spectrum-Calendar { @@ -86,7 +89,7 @@ governing permissions and limitations under the License. .spectrum-Calendar-prevMonth, .spectrum-Calendar-nextMonth { - transform: logical rotate(0deg); /* stylelint-disable-line declaration-property-value-no-unknown */ + transform: var(--spectrum-logical-rotation); &:not([disabled]) { color: var(--highcontrast-calendar-button-icon-color, var(--mod-calendar-button-icon-color, var(--spectrum-calendar-button-icon-color))); @@ -239,7 +242,7 @@ governing permissions and limitations under the License. inline-size: calc( var(--mod-calendar-day-width, var(--spectrum-calendar-day-width)) + - calc(var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) * 2) + calc(var(--mod-calendar-day-padding, var(--spectrum-calendar-day-padding)) * 2) ); &.is-range-start, diff --git a/components/calendar/stories/calendar.stories.js b/components/calendar/stories/calendar.stories.js index a95eadd900..8488fcd674 100644 --- a/components/calendar/stories/calendar.stories.js +++ b/components/calendar/stories/calendar.stories.js @@ -1,8 +1,8 @@ // Import the component markup template import { Template } from "./template"; -import isChromatic from "chromatic/isChromatic"; import ActionButtonStories from "@spectrum-css/actionbutton/stories/actionbutton.stories.js"; +import isChromatic from "chromatic/isChromatic"; const months = [...Array(12).keys()].map((key) => new Date(0, key).toLocaleString("en", { month: "long" }) @@ -113,10 +113,6 @@ Default.args = { year: 2023, }; -export const DefaultRTL = Template.bind({}); -DefaultRTL.args = {...Default.args}; -DefaultRTL.parameters = {textDirection: "rtl"} - export const RangeSelection = Template.bind({}); RangeSelection.args = { month: months[6], diff --git a/components/pagination/index.css b/components/pagination/index.css index 457b195b96..52f6928c9d 100644 --- a/components/pagination/index.css +++ b/components/pagination/index.css @@ -15,7 +15,12 @@ governing permissions and limitations under the License. --spectrum-pagination-page-button-inline-spacing: var(--spectrum-pagination-item-inline-spacing); --spectrum-pagination-counter-color: var(--spectrum-neutral-subdued-content-color-default); --spectrum-pagination-counter-font-size: var(--spectrum-font-size-100); - --spectrum-pagination-counter-line-height: var(-spectrum-line-height-100); + --spectrum-pagination-counter-line-height: var(--spectrum-line-height-100); + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } .spectrum-Pagination--explicit, @@ -49,9 +54,9 @@ governing permissions and limitations under the License. /* Correct the direction of the arrows when viewing right-to-left */ .spectrum-Pagination-prevButton .spectrum-Icon { - transform: logical rotate(180deg); + transform: var(--spectrum-logical-rotation,) rotate(180deg); } .spectrum-Pagination-nextButton .spectrum-Icon { - transform: logical rotate(0deg); + transform: var(--spectrum-logical-rotation); } diff --git a/components/slider/index.css b/components/slider/index.css index fb051d798e..3035ef8378 100644 --- a/components/slider/index.css +++ b/components/slider/index.css @@ -24,6 +24,11 @@ governing permissions and limitations under the License. /* TODO: placeholder value for sideLabel variant value width */ --spectrum-slider-value-inline-size: 18px; + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } @@ -286,8 +291,7 @@ governing permissions and limitations under the License. block-size: 100%; /* Flip the ramp automatically for RTL */ - /* stylelint-disable-next-line declaration-property-value-no-unknown */ - transform: logical rotate(0deg); + transform: var(--spectrum-logical-rotation); } } @@ -623,7 +627,7 @@ governing permissions and limitations under the License. .spectrum-Slider--range { .spectrum-Slider-track { &:not(:first-of-type):not(:last-of-type)::before { - background: var(--highcontrast-slider-track-fill-color, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); + background: var(--highcontrast-slider-track-fill-icolor, var(--mod-slider-track-fill-color, var(--spectrum-slider-track-fill-color))); } } } diff --git a/components/splitbutton/index.css b/components/splitbutton/index.css index 665d5af975..edf07dc333 100644 --- a/components/splitbutton/index.css +++ b/components/splitbutton/index.css @@ -21,6 +21,11 @@ governing permissions and limitations under the License. --spectrum-splitbutton-border-radius-edge: var( --spectrum-alias-border-radius-small ); + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } .spectrum-SplitButton-trigger { @@ -118,6 +123,15 @@ governing permissions and limitations under the License. z-index: 1; outline: none; } + + /* Correct the direction of the arrows when viewing right-to-left */ + &.spectrum-Pagination-prevButton .spectrum-Icon { + transform: var(--spectrum-logical-rotation,) rotate(180deg); + } + + &.spectrum-Pagination-nextButton .spectrum-Icon { + transform: var(--spectrum-logical-rotation); + } } .spectrum-SplitButton-action { diff --git a/components/table/index.css b/components/table/index.css index 61e819667c..05bdc7ec33 100644 --- a/components/table/index.css +++ b/components/table/index.css @@ -101,7 +101,7 @@ governing permissions and limitations under the License. --spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular); --spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300); - /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341 + /* Local custom properties used to assign row color to child cells, to help get around Firefox bug 921341 and for modifying emphasized/non-emphasized background colors from the root element. */ --spectrum-table-cell-background-color: var(--highcontrast-table-row-background-color, var(--mod-table-row-background-color, var(--spectrum-table-row-background-color))); --spectrum-table-selected-cell-background-color: var(--highcontrast-table-selected-row-background-color, var(--mod-table-selected-row-background-color-non-emphasized, var(--spectrum-table-selected-row-background-color-non-emphasized))); @@ -109,6 +109,11 @@ governing permissions and limitations under the License. /* Passthrough for nested component(s) */ --mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)); + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } /********* T-SHIRT SIZES (Regular Density) *********/ @@ -512,14 +517,14 @@ governing permissions and limitations under the License. } /* Outside border, row divider lines, and rounded corners: - The tbody tag doesn't allow setting a border or border-radius. To make them work, border styles are + The tbody tag doesn't allow setting a border or border-radius. To make them work, border styles are instead applied to the individual cells around the outside, while using border-collapse: separate. */ /* Row divider lines */ .spectrum-Table-cell { border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) - solid + solid var(--highcontrast-table-divider-color, var(--mod-table-divider-color, var(--spectrum-table-divider-color))); } @@ -528,26 +533,26 @@ governing permissions and limitations under the License. &:first-child .spectrum-Table-cell { border-block-start: var(--mod-table-border-width, var(--spectrum-table-border-width)) - solid + solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); } &:last-child .spectrum-Table-cell { border-block-end: var(--mod-table-border-width, var(--spectrum-table-border-width)) - solid + solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); } .spectrum-Table-cell:first-child { - border-inline-start: - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) - solid + border-inline-start: + var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) + solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); } .spectrum-Table-cell:last-child { - border-inline-end: + border-inline-end: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); @@ -592,7 +597,7 @@ governing permissions and limitations under the License. ); padding-block-end: var(--mod-table-row-bottom-to-text, var(--spectrum-table-row-bottom-to-text)); padding-inline: calc( - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - + var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) - var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) ); } @@ -659,7 +664,7 @@ governing permissions and limitations under the License. --highcontrast-table-row-text-color: var(--highcontrast-table-selected-row-text-color); --highcontrast-table-icon-color: var(--highcontrast-table-selected-row-text-color); --spectrum-table-cell-background-color: var(--spectrum-table-selected-cell-background-color); - + &:hover, &:focus-visible, &.is-focused { @@ -684,7 +689,7 @@ governing permissions and limitations under the License. /* Make sure negative offset outline is not covered by borders. */ --mod-table-border-color: var(--highcontrast-table-focus-indicator-color, transparent); - + .spectrum-Table-cell { border-top-color: var(--highcontrast-table-focus-indicator-color, var(--mod-table-drop-zone-outline-color, var(--spectrum-table-drop-zone-outline-color))); } @@ -746,12 +751,12 @@ governing permissions and limitations under the License. /* The calc subtraction is because the --spectrum-table-checkbox-to-text spacing value includes the inline start padding in the adjacent cell. */ padding-inline-end: calc( - var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) - + var(--mod-table-checkbox-to-text, var(--spectrum-table-checkbox-to-text)) - var(--mod-table-edge-to-content, var(--spectrum-table-edge-to-content)) ); /* Block spacing must be moved to calculated margin on the checkbox element. */ padding-block: 0; - + .spectrum-Table-checkbox { --mod-checkbox-spacing: 0px; min-block-size: initial; @@ -813,10 +818,10 @@ governing permissions and limitations under the License. border-block: var(--mod-table-border-width, var(--spectrum-table-border-width)) solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) - solid + border-inline: var(--mod-table-outer-border-inline-width, var(--spectrum-table-outer-border-inline-width)) + solid var(--highcontrast-table-border-color, var(--mod-table-border-color, var(--spectrum-table-border-color))); - + &.spectrum-Table--quiet { --mod-table-header-background-color--quiet: var(--mod-table-header-background-color-scrollable, var(--spectrum-background-layer-1-color, var(--spectrum-gray-100))); border-block-start: none; @@ -825,8 +830,8 @@ governing permissions and limitations under the License. /* Make sure shift-tab reverse keyboard navigation keeps the whole cell in focus. --mod-table-current-header-height should be dynamically updated with JS to match the table header height. */ scroll-padding-top: var(--mod-table-current-header-height, calc( - (var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + - var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + + (var(--mod-table-header-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size))) + + var(--mod-table-header-top-to-text, var(--spectrum-table-header-top-to-text)) + var(--mod-table-header-bottom-to-text, var(--spectrum-table-header-bottom-to-text)) + var(--mod-table-border-width, var(--spectrum-table-border-width)) )); @@ -849,7 +854,7 @@ governing permissions and limitations under the License. border-block-start: none; border-radius: 0; } - + &:last-child .spectrum-Table-cell { border-block-end: none; border-radius: 0; @@ -858,7 +863,7 @@ governing permissions and limitations under the License. .spectrum-Table-cell:first-child { border-inline-start: none; } - + .spectrum-Table-cell:last-child { border-inline-end: none; } @@ -896,8 +901,8 @@ governing permissions and limitations under the License. .spectrum-Table-disclosureIcon { margin-inline: var(--mod-table-collapsible-disclosure-inline-spacing, var(--spectrum-table-collapsible-disclosure-inline-spacing)); margin-block-start: max(0px, calc( - (var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)) - - var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size))) + (var(--mod-table-min-row-height, var(--spectrum-table-min-row-height)) - + var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size))) / 2 ) ); @@ -943,10 +948,10 @@ governing permissions and limitations under the License. border: 0; color: var(--spectrum-table-icon-color); - transform: logical rotate(0deg); + transform: var(--spectrum-logical-rotation); &[aria-expanded="true"]{ - transform: logical rotate(90deg); + transform: var(--spectrum-logical-rotation,) rotate(90deg); } &::after { @@ -1008,7 +1013,7 @@ governing permissions and limitations under the License. ) / 2 )); --table-thumbnail-cell-block-spacing: max( - var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)), + var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)), var(--table-thumbnail-inner-minimum-block-spacing) ); } @@ -1025,7 +1030,7 @@ governing permissions and limitations under the License. .spectrum-Thumbnail { flex-grow: 0; flex-shrink: 0; - margin-inline-end: var(--mod-table-thumbnail-to-text, var(--spectrum-table-thumbnail-to-text)); + margin-inline-end: var(--mod-table-thumbnail-to-text, var(--spectrum-table-thumbnail-to-text)); line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)); } diff --git a/components/treeview/index.css b/components/treeview/index.css index 022e5f1053..38b72be961 100644 --- a/components/treeview/index.css +++ b/components/treeview/index.css @@ -56,6 +56,11 @@ governing permissions and limitations under the License. --spectrum-treeview-item-min-block-size-thumbnail-offset: var(--spectrum-treeview-item-min-block-size-thumbnail-offset-medium, 0px); --spectrum-treeview-indicator-animation-duration: var(--spectrum-animation-duration-100); + + [dir="rtl"] &, + &:dir(rtl) { + --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0); + } } .spectrum-TreeView--sizeS { @@ -187,7 +192,7 @@ governing permissions and limitations under the License. &.is-open { > .spectrum-TreeView-itemLink > .spectrum-TreeView-itemIndicator { /* Rotate the chevron */ - transform: logical rotate(90deg); + transform: var(--spectrum-logical-rotation,) rotate(90deg); } > .spectrum-TreeView { @@ -337,9 +342,9 @@ governing permissions and limitations under the License. padding-block: var(--mod-treeview-indicator-padding-block, var(--spectrum-treeview-indicator-padding)); margin-inline-start: var(--mod-treeview-indicator-margin-inline-start, var(--spectrum-treeview-indicator-margin-inline-start)); - transform: logical rotate(0deg); transition: transform ease var(--mod-treeview-indicator-animation-duration, var(--spectrum-treeview-indicator-animation-duration)); pointer-events: all; + transform: var(--spectrum-logical-rotation); } /* Section headings */ @@ -408,4 +413,4 @@ governing permissions and limitations under the License. flex-shrink: 0; margin-inline-end: var(--mod-treeview-item-icon-gap, var(--spectrum-treeview-item-icon-gap)); } -} \ No newline at end of file +} diff --git a/tools/component-builder-simple/css/plugins/postcss-transform-logical.js b/tools/component-builder-simple/css/plugins/postcss-transform-logical.js deleted file mode 100644 index 411e73ee86..0000000000 --- a/tools/component-builder-simple/css/plugins/postcss-transform-logical.js +++ /dev/null @@ -1,111 +0,0 @@ -/*! -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. -*/ -const postcss = require("postcss"); -const { parse } = require("postcss-values-parser"); - -const selectorParser = require("postcss-selector-parser"); -const addRTL = (selectors) => { - selectors.each((selector) => { - let dirAttribute = selectorParser.attribute({ attribute: 'dir="rtl"' }); - selector.prepend(selectorParser.string({ value: " " })); - selector.prepend(dirAttribute); - }); -}; - -const addLTR = (selectors) => { - selectors.each((selector) => { - let dirAttribute = selectorParser.attribute({ attribute: 'dir="ltr"' }); - selector.prepend(selectorParser.string({ value: " " })); - selector.prepend(dirAttribute); - }); -}; - -const matrix = "matrix(-1, 0, 0, 1, 0, 0)"; - -module.exports = postcss.plugin("postcss-transform-logical", function (opts) { - opts = opts || {}; - - return function (root, result) { - root.walkRules((rule, ruleIndex) => { - rule.walkDecls((decl) => { - if (decl.prop === "transform") { - let value; - try { - value = parse(decl.value); - } catch (err) { - console.warn( - "postcss-transform-logical: could not parse %s", - decl.value - ); - } - - if (value && value.nodes[0].value === "logical") { - // Drop logical - value.nodes[0].remove(); - - let originalRotation = null; - let rotationNode = null; - value.walkFuncs((node, index, nodes) => { - if (node.name === "rotate") { - originalRotation = node.nodes[0].value; - rotationNode = node; - } else if (node.name === "matrix") { - throw new Error( - "postcss-transform-logical: logical flips cannot be performed on transforms that use matrix()" - ); - } - }); - - if (rotationNode !== null) { - // Ignore 0 deg initial rotations for LTR; this means we meant for it to be standard rotation for LTR - if (parseInt(originalRotation, 10) !== 0) { - let ltrSelector = selectorParser(addLTR).processSync( - rule.selector - ); - let ltrRule = postcss.parse( - `${ltrSelector} { transform: ${value}; }` - ); - root.insertBefore(rule, ltrRule); - - // Use the same rotation, but flip horizontal - let rtlSelector = selectorParser(addRTL).processSync( - rule.selector - ); - let rtlRule = postcss.parse( - `${rtlSelector} { transform: ${matrix} ${value}; }` - ); - root.insertBefore(rule, rtlRule); - } else { - // Drop the unnecessary rotation - rotationNode.remove(); - - // Add direction to all matching selectors - let newSelector = selectorParser(addRTL).processSync( - rule.selector - ); - - // Just flip horizontal - let rtlRule = postcss.parse( - `${newSelector} { transform: ${matrix} ${value}; }` - ); - root.insertBefore(rule, rtlRule); - } - - // Remove original declaration - decl.remove(); - } - } - } - }); - }); - }; -}); diff --git a/tools/component-builder-simple/css/processors.js b/tools/component-builder-simple/css/processors.js index d3599f378e..18121e247d 100644 --- a/tools/component-builder-simple/css/processors.js +++ b/tools/component-builder-simple/css/processors.js @@ -25,7 +25,6 @@ function getProcessors({ noFlatVariables = false, noSelectors = false, keepComme noFlatVariables, noSelectors, }), - require("./plugins/postcss-transform-logical")(), require("./plugins/postcss-custom-properties-passthrough")(), require("postcss-calc"), require("postcss-dropunusedvars")({ fix: false }), diff --git a/tools/component-builder/css/plugins/postcss-transform-logical.js b/tools/component-builder/css/plugins/postcss-transform-logical.js deleted file mode 100644 index 411e73ee86..0000000000 --- a/tools/component-builder/css/plugins/postcss-transform-logical.js +++ /dev/null @@ -1,111 +0,0 @@ -/*! -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. -*/ -const postcss = require("postcss"); -const { parse } = require("postcss-values-parser"); - -const selectorParser = require("postcss-selector-parser"); -const addRTL = (selectors) => { - selectors.each((selector) => { - let dirAttribute = selectorParser.attribute({ attribute: 'dir="rtl"' }); - selector.prepend(selectorParser.string({ value: " " })); - selector.prepend(dirAttribute); - }); -}; - -const addLTR = (selectors) => { - selectors.each((selector) => { - let dirAttribute = selectorParser.attribute({ attribute: 'dir="ltr"' }); - selector.prepend(selectorParser.string({ value: " " })); - selector.prepend(dirAttribute); - }); -}; - -const matrix = "matrix(-1, 0, 0, 1, 0, 0)"; - -module.exports = postcss.plugin("postcss-transform-logical", function (opts) { - opts = opts || {}; - - return function (root, result) { - root.walkRules((rule, ruleIndex) => { - rule.walkDecls((decl) => { - if (decl.prop === "transform") { - let value; - try { - value = parse(decl.value); - } catch (err) { - console.warn( - "postcss-transform-logical: could not parse %s", - decl.value - ); - } - - if (value && value.nodes[0].value === "logical") { - // Drop logical - value.nodes[0].remove(); - - let originalRotation = null; - let rotationNode = null; - value.walkFuncs((node, index, nodes) => { - if (node.name === "rotate") { - originalRotation = node.nodes[0].value; - rotationNode = node; - } else if (node.name === "matrix") { - throw new Error( - "postcss-transform-logical: logical flips cannot be performed on transforms that use matrix()" - ); - } - }); - - if (rotationNode !== null) { - // Ignore 0 deg initial rotations for LTR; this means we meant for it to be standard rotation for LTR - if (parseInt(originalRotation, 10) !== 0) { - let ltrSelector = selectorParser(addLTR).processSync( - rule.selector - ); - let ltrRule = postcss.parse( - `${ltrSelector} { transform: ${value}; }` - ); - root.insertBefore(rule, ltrRule); - - // Use the same rotation, but flip horizontal - let rtlSelector = selectorParser(addRTL).processSync( - rule.selector - ); - let rtlRule = postcss.parse( - `${rtlSelector} { transform: ${matrix} ${value}; }` - ); - root.insertBefore(rule, rtlRule); - } else { - // Drop the unnecessary rotation - rotationNode.remove(); - - // Add direction to all matching selectors - let newSelector = selectorParser(addRTL).processSync( - rule.selector - ); - - // Just flip horizontal - let rtlRule = postcss.parse( - `${newSelector} { transform: ${matrix} ${value}; }` - ); - root.insertBefore(rule, rtlRule); - } - - // Remove original declaration - decl.remove(); - } - } - } - }); - }); - }; -}); diff --git a/tools/component-builder/css/processors.js b/tools/component-builder/css/processors.js index c5952ff1ca..df053288e3 100644 --- a/tools/component-builder/css/processors.js +++ b/tools/component-builder/css/processors.js @@ -46,7 +46,6 @@ function getProcessors( require("postcss-extend"), diff ? require("./plugins/postcss-varsonly")() : null, require("postcss-logical")(), - require("./plugins/postcss-transform-logical")(), require("postcss-dir-pseudo-class")(), require("./plugins/postcss-custom-properties-passthrough")(), require("postcss-calc"),