feat!: migrate build packages to postcss v8

Author: castastrophe

.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 */
 }