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

.storybook/package.json

@@ -44,7 +44,7 @@
  "file-loader": "6.2.0",
  "lit": "^3.1.1",
  "lodash-es": "^4.17.21",
- "postcss": "^7.0.36",
+ "postcss": "^8.4.33",
  "postcss-class-prefix": "^0.3.0",
  "postcss-loader": "^4.0.0",
  "postcss-prefix-selector": "^1.16.0",

components/modal/index.css

@@ -104,18 +104,18 @@ governing permissions and limitations under the License.
  var(--mod-modal-confirm-exit-animation-delay, var(--spectrum-modal-confirm-exit-animation-delay)) +
  var(--mod-modal-confirm-exit-animation-duration, var(--spectrum-modal-confirm-exit-animation-duration))
  );
+}
 
- &.is-open {
-  @extend %spectrum-overlay--open;
+.spectrum-Modal.is-open {
+ @extend %spectrum-overlay--open;
 
-  /* Entry animations */
-  transition: transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
-  var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
-  opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
-  var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay));
+ /* Entry animations */
+ transition: transform var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
+ var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay)),
+ opacity var(--mod-modal-confirm-entry-animation-duration, var(--spectrum-modal-confirm-entry-animation-duration)) var(--spectrum-animation-ease-out)
+ var(--mod-modal-confirm-entry-animation-delay, var(--spectrum-modal-confirm-entry-animation-delay));
 
- transform: translateY(0);
- }
+ transform: translateY(0);
 }
 
 /* Responsive modals will fill the screen on small viewports */

components/page/index.css

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-& {
+:root {
  background-color: var(--spectrum-gray-100);
 
  /* Prevent tap highlights */

components/popover/index.css

@@ -77,11 +77,6 @@ governing permissions and limitations under the License.
  background-color: var(--mod-popover-background-color, var(--spectrum-popover-background-color));
  filter: var(--mod-popover-filter, var(--spectrum-popover-filter));
 
- /* default opens and animates upward */
- &.is-open {
- @extend %spectrum-overlay--open;
- }
-
  /* has tip triangle */
  &.spectrum-Popover--withTip {
  .spectrum-Popover-tip {
@@ -97,6 +92,11 @@ governing permissions and limitations under the License.
  }
 }
 
+/* default opens and animates upward */
+.spectrum-Popover.is-open {
+ @extend %spectrum-overlay--open;
+}
+
 /* prevent nested popovers from affecting each others drop shadow filters */
 .spectrum-Popover * {
  --mod-popover-filter: none;

components/quickaction/index.css

@@ -13,10 +13,10 @@ governing permissions and limitations under the License.
 @import "@spectrum-css/commons/overlay.css";
 
 .spectrum-QuickActions {
- box-sizing: border-box;
-
  @extend %spectrum-overlay;
 
+ box-sizing: border-box;
+
  display: inline-flex;
  align-items: center;
  justify-content: center;
@@ -28,37 +28,31 @@ governing permissions and limitations under the License.
 
  border-radius: var(--spectrum-quickactions-border-radius);
 
- &.is-open {
- @extend %spectrum-overlay--open;
- }
+ background-color: var(--spectrum-quickactions-background-color);
 
  .spectrum-ActionButton + .spectrum-ActionButton {
  margin-inline-start: var(--spectrum-quickactions-button-gap-x);
  }
 }
 
-.spectrum-QuickActions--textOnly {
- .spectrum-ActionButton + .spectrum-ActionButton {
- margin-inline-start: var(--spectrum-quickactions-text-button-gap-x);
- }
+.spectrum-QuickActions.is-open {
+ @extend %spectrum-overlay--open;
 }
 
-.spectrum-QuickActions--right {
- &.is-open {
- @extend %spectrum-overlay--left--open; /* should animate to the left when aligned right */
- }
+.spectrum-QuickActions-overlay {
+ background-color: var(--spectrum-quickactions-overlay-color);
 }
 
-.spectrum-QuickActions--left {
- &.is-open {
- @extend %spectrum-overlay--right--open; /* should animate to the right when aligned left */
+.spectrum-QuickActions--textOnly {
+ .spectrum-ActionButton + .spectrum-ActionButton {
+ margin-inline-start: var(--spectrum-quickactions-text-button-gap-x);
  }
 }
 
-.spectrum-QuickActions-overlay {
- background-color: var(--spectrum-quickactions-overlay-color);
+.spectrum-QuickActions--right.is-open {
+ @extend %spectrum-overlay--left--open; /* should animate to the left when aligned right */
 }
 
-.spectrum-QuickActions {
- background-color: var(--spectrum-quickactions-background-color);
+.spectrum-QuickActions--left.is-open {
+ @extend %spectrum-overlay--right--open; /* should animate to the right when aligned left */
 }