Skip to content

Commit bd6c40e

Browse files
castastrophecastastrophe
authored
feat: migrate build packages to postcss v8 (#2460)
Impacted package details: - feat(storybook): updated to use postcss v8 in alignment with the build processes - fix(modal): remove & nesting when @extend is being leveraged - feat(page)!: replace & with :root - fix(popover): remove & nesting when @extend is being leveraged - fix(quickaction): remove & nesting when @extend is being leveraged - feat(splitbutton)!: increase specificity to override race condition with button - fix(tooltip): remove & nesting when @extend is being leveraged - feat(legacy-postcss-dropdupedvars)!: upgrade to postcss v8 - feat(legacy-postcss-dropunusedvars)!: upgrade to postcss v8 - feat(postcss-dropdupedvars)!: upgrade to postcss v8 - feat(postcss-droproot)!: upgrade to postcss v8 - feat(postcss-dropunusedvars)!: upgrade to postcss v8 - feat(postcss-combinator)!: upgrade to postcss v8 - feat(postcss-custom-properties-mapping): new stand-alone postcss plugin at postcss v8 - feat(postcss-custom-properties-passthrough): new stand-alone postcss plugin at postcss v8 - feat(postcss-notnested): new stand-alone postcss plugin at postcss v8 - feat(postcss-splitinator)!: upgrade to postcss v8 - feat(postcss-transformselectors)!: upgrade to postcss v8 - feat(postcss-varfallback)!: upgrade to postcss v8 - feat(postcss-varsonly): new stand-alone postcss plugin at postcss v8 - chore(stylelint-no-missing-var): bump ava version for testing suite - chore(stylelint-no-unknown-custom-properties): bump ava version for testing suite - chore(stylelint-no-unused-custom-properties): bump ava version for testing suite - chore(bundle-builder): remove outdated dependencies - feat(component-builder-simple)!: upgrade processing to use postcss v8; remove clean tasks - feat(component-builder)!: upgrade processing to use postcss v8; remove clean tasks
1 parent 45cba30 commit bd6c40e

File tree

76 files changed

+1465
-1963
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+1465
-1963
lines changed

‎.storybook/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"file-loader": "6.2.0",
4545
"lit": "^3.1.1",
4646
"lodash-es": "^4.17.21",
47-
"postcss": "^7.0.36",
47+
"postcss": "^8.4.33",
4848
"postcss-class-prefix": "^0.3.0",
4949
"postcss-loader": "^4.0.0",
5050
"postcss-prefix-selector": "^1.16.0",

‎components/modal/index.css

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -104,18 +104,18 @@ governing permissions and limitations under the License.
104104
var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) +
105105
var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))
106106
);
107+
}
107108

108-
&.is-open {
109-
@extend %spectrum-overlay--open;
109+
.spectrum-Modal.is-open {
110+
@extend %spectrum-overlay--open;
110111

111-
/* Entry animations */
112-
transition: transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
113-
var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
114-
opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
115-
var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay));
112+
/* Entry animations */
113+
transition: transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
114+
var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
115+
opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
116+
var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay));
116117

117-
transform: translateY(0);
118-
}
118+
transform: translateY(0);
119119
}
120120

121121
/* Responsive modals will fill the screen on small viewports */

‎components/page/index.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
1010
governing permissions and limitations under the License.
1111
*/
1212

13-
& {
13+
:root {
1414
background-color: var(--spectrum-gray-100);
1515

1616
/* Prevent tap highlights */

‎components/popover/index.css

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,6 @@ governing permissions and limitations under the License.
7777
background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
7878
filter: var(--mod-popover-filter, var(--spectrum-popover-filter));
7979

80-
/* default opens and animates upward */
81-
&.is-open {
82-
@extend %spectrum-overlay--open;
83-
}
84-
8580
/* has tip triangle */
8681
&.spectrum-Popover--withTip {
8782
.spectrum-Popover-tip {
@@ -97,6 +92,11 @@ governing permissions and limitations under the License.
9792
}
9893
}
9994

95+
/* default opens and animates upward */
96+
.spectrum-Popover.is-open {
97+
@extend %spectrum-overlay--open;
98+
}
99+
100100
/* prevent nested popovers from affecting each others drop shadow filters */
101101
.spectrum-Popover * {
102102
--mod-popover-filter: none;

‎components/quickaction/index.css

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ governing permissions and limitations under the License.
1313
@import "@spectrum-css/commons/overlay.css";
1414

1515
.spectrum-QuickActions {
16-
box-sizing: border-box;
17-
1816
@extend %spectrum-overlay;
1917

18+
box-sizing: border-box;
19+
2020
display: inline-flex;
2121
align-items: center;
2222
justify-content: center;
@@ -28,37 +28,31 @@ governing permissions and limitations under the License.
2828

2929
border-radius: var(--spectrum-quickactions-border-radius);
3030

31-
&.is-open {
32-
@extend %spectrum-overlay--open;
33-
}
31+
background-color: var(--spectrum-quickactions-background-color);
3432

3533
.spectrum-ActionButton + .spectrum-ActionButton {
3634
margin-inline-start: var(--spectrum-quickactions-button-gap-x);
3735
}
3836
}
3937

40-
.spectrum-QuickActions--textOnly {
41-
.spectrum-ActionButton + .spectrum-ActionButton {
42-
margin-inline-start: var(--spectrum-quickactions-text-button-gap-x);
43-
}
38+
.spectrum-QuickActions.is-open {
39+
@extend %spectrum-overlay--open;
4440
}
4541

46-
.spectrum-QuickActions--right {
47-
&.is-open {
48-
@extend %spectrum-overlay--left--open; /* should animate to the left when aligned right */
49-
}
42+
.spectrum-QuickActions-overlay {
43+
background-color: var(--spectrum-quickactions-overlay-color);
5044
}
5145

52-
.spectrum-QuickActions--left {
53-
&.is-open {
54-
@extend %spectrum-overlay--right--open; /* should animate to the right when aligned left */
46+
.spectrum-QuickActions--textOnly {
47+
.spectrum-ActionButton + .spectrum-ActionButton {
48+
margin-inline-start: var(--spectrum-quickactions-text-button-gap-x);
5549
}
5650
}
5751

58-
.spectrum-QuickActions-overlay {
59-
background-color: var(--spectrum-quickactions-overlay-color);
52+
.spectrum-QuickActions--right.is-open {
53+
@extend %spectrum-overlay--left--open; /* should animate to the left when aligned right */
6054
}
6155

62-
.spectrum-QuickActions {
63-
background-color: var(--spectrum-quickactions-background-color);
56+
.spectrum-QuickActions--left.is-open {
57+
@extend %spectrum-overlay--right--open; /* should animate to the right when aligned left */
6458
}

0 commit comments

Comments
 (0)