Move to Lightning CSS and upgrade to PostCSS 8 (#5093)

Author: devongovett

package.json

@@ -143,21 +143,12 @@
     "npm-cli-login": "^1.0.0",
     "nyc": "^10.2.0",
     "p-queue": "^6.2.1",
-    "parcel": "^2.9.1",
+    "parcel": "^2.9.2",
     "patch-package": "^6.2.0",
     "plop": "^2.4.0",
-    "postcss": "^7.0.0",
-    "postcss-calc": "^6.0.0",
-    "postcss-custom-properties": "6.3.1",
-    "postcss-dir-pseudo-class": "^5.0.0",
-    "postcss-focus-ring": "^1.0.0",
-    "postcss-functions": "^3.0.0",
-    "postcss-import": "^12.0.1",
-    "postcss-inherit": "^4.1.0",
-    "postcss-logical": "^4.0.0",
-    "postcss-modules": "^3.2.2",
-    "postcss-nested": "^4.1.2",
-    "postcss-svg": "^3.0.0",
+    "postcss": "^8.4.24",
+    "postcss-custom-properties": "^13.2.0",
+    "postcss-import": "^15.1.0",
     "prop-types": "^15.6.0",
     "raf": "^3.4.0",
     "react": "^18.0.0",
@@ -182,9 +173,20 @@
   },
   "resolutions": {
     "@babel/core": "7.12.10",
-    "postcss-calc": "6.0.2",
-    "postcss-modules": "^3.2.2",
+    "postcss": "8.4.24",
+    "postcss-custom-properties": "13.2.0",
+    "postcss-import": "15.1.0",
     "react-refresh": "0.9.0",
     "browserslist": "4.20.3"
+  },
+  "@parcel/transformer-css": {
+    "cssModules": true,
+    "drafts": {
+      "nesting": true
+    },
+    "pseudoClasses": {
+      "focusVisible": "focus-ring",
+      "hover": "is-hovered"
+    }
   }
 }

packages/@adobe/spectrum-css-temp/components/accordion/skin.css

@@ -31,7 +31,7 @@ governing permissions and limitations under the License.
     background-color: var(--spectrum-accordion-background-color-hover);
   }
 
-  &:focus-ring {
+  &:focus-visible {
     &:after  {
       background-color: var(--spectrum-accordion-border-left-color-key-focus);
     }
@@ -52,15 +52,15 @@ governing permissions and limitations under the License.
   .spectrum-Accordion-itemHeader {
     &,
     &:hover,
-    &:focus-ring {
+    &:focus-visible {
       color: var(--spectrum-accordion-text-color-disabled);
       background-color: transparent;
     }
   }
 }
 @media (forced-colors: active) {
   .spectrum-Accordion-itemHeader {
-    &:focus-ring {
+    &:focus-visible {
       outline: 3px solid CanvasText;
     }
   }

packages/@adobe/spectrum-css-temp/components/actiongroup/index.css

@@ -149,15 +149,15 @@ governing permissions and limitations under the License.
         border-radius: 0;
 
         &:first-child {
+          border-radius: 0;
           border-start-start-radius: var(--spectrum-actionbutton-border-radius);
           border-start-end-radius: var(--spectrum-actionbutton-border-radius);
-          border-radius: 0;
         }
 
         &:last-child {
+          border-radius: 0;
           border-end-start-radius: var(--spectrum-actionbutton-border-radius);
           border-end-end-radius: var(--spectrum-actionbutton-border-radius);
-          border-radius: 0;
         }
       }
     }

packages/@adobe/spectrum-css-temp/components/assetlist/skin.css

@@ -16,7 +16,7 @@ governing permissions and limitations under the License.
   }
 
   &:focus {
-    &:focus-ring,
+    &:focus-visible,
     &.is-focused {
       background-color: var(--spectrum-miller-column-item-background-color-hover);
       &::before {

packages/@adobe/spectrum-css-temp/components/breadcrumb/index.css

@@ -106,15 +106,15 @@ governing permissions and limitations under the License.
     cursor: pointer;
 
     &:hover,
-    &:focus-ring {
+    &:focus-visible {
       text-decoration: underline;
     }
   }
 }
 
 
 .spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before,
-.spectrum-Breadcrumbs-itemLink:focus-ring:before {
+.spectrum-Breadcrumbs-itemLink:focus-visible:before {
   position: absolute;
   top: 0;
   inset-inline-start: 0;

packages/@adobe/spectrum-css-temp/components/breadcrumb/skin.css

@@ -35,7 +35,7 @@ governing permissions and limitations under the License.
       color: var(--spectrum-breadcrumb-text-color-hover);
     }
 
-    &:focus-ring {
+    &:focus-visible {
       color: var(--spectrum-breadcrumb-text-color-key-focus);
 
       &:before {
@@ -65,7 +65,7 @@ governing permissions and limitations under the License.
       }
     }
     .spectrum-Breadcrumbs-itemLink {
-      &:focus-ring {
+      &:focus-visible {
         color: var(--spectrum-breadcrumb-text-color-down);
         border-bottom: 0;
       }

packages/@adobe/spectrum-css-temp/components/button/index.css

@@ -24,7 +24,7 @@ governing permissions and limitations under the License.
   --spectrum-button-line-height: 1.3;
 }
 
-%spectrum-BaseButton {
+.spectrum-BaseButton {
   /* Contain halo */
   position: relative;
 
@@ -54,7 +54,7 @@ governing permissions and limitations under the License.
   /* Font smoothing for Firefox */
   -moz-osx-font-smoothing: grayscale;
 
-  button& {
+  &button {
     /* Correct the inability to style clickable types in iOS and Safari. */
     -webkit-appearance: button;
   }
@@ -69,7 +69,7 @@ governing permissions and limitations under the License.
 
   text-decoration: none;
 
-  @extend %i18nFontFamily;
+  composes: i18nFontFamily;
 
   line-height: var(--spectrum-button-line-height);
 
@@ -84,7 +84,7 @@ governing permissions and limitations under the License.
   &:focus {
     outline: none;
   }
-  &:focus-ring {
+  &:focus-visible {
     z-index: 3;
   }
 
@@ -115,12 +115,10 @@ governing permissions and limitations under the License.
                 fill var(--spectrum-global-animation-duration-100) ease-out;
     box-sizing: initial;
   }
-
 }
 
 .spectrum-Button {
-  @inherit: %spectrum-BaseButton;
-  @inherit: %spectrum-FocusRing;
+  composes: spectrum-BaseButton spectrum-FocusRing;
 
   border-style: solid;
   --spectrum-button-border-radius: var(--spectrum-button-primary-border-radius);
@@ -183,8 +181,7 @@ a.spectrum-ActionButton {
 }
 
 .spectrum-ActionButton {
-  @inherit: %spectrum-BaseButton;
-  @inherit: %spectrum-FocusRing;
+  composes: spectrum-BaseButton spectrum-FocusRing;
   position: relative;
 
   block-size: var(--spectrum-actionbutton-height);
@@ -274,8 +271,7 @@ a.spectrum-ActionButton {
 }
 
 .spectrum-LogicButton {
-  @inherit: %spectrum-BaseButton;
-  @inherit: %spectrum-FocusRing;
+  composes: spectrum-BaseButton spectrum-FocusRing;
 
   block-size: var(--spectrum-logicbutton-and-height);
   padding: var(--spectrum-logicbutton-and-padding-x);
@@ -289,8 +285,7 @@ a.spectrum-ActionButton {
 }
 
 .spectrum-FieldButton {
-  @inherit: %spectrum-BaseButton;
-  @inherit: %spectrum-FocusRing;
+  composes: spectrum-BaseButton spectrum-FocusRing;
 
   position: relative;
   block-size: var(--spectrum-dropdown-height);
@@ -335,7 +330,7 @@ a.spectrum-ActionButton {
 }
 
 .spectrum-FieldButton--quiet {
-  @inherit: %spectrum-FocusRing--quiet;
+  composes: spectrum-FocusRing--quiet;
 
   margin: var(--spectrum-fieldbutton-quiet-margin);
   padding: var(--spectrum-fieldbutton-quiet-padding);
@@ -345,15 +340,14 @@ a.spectrum-ActionButton {
   --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);
   &:disabled,
   &.is-disabled {
-    &:focus-ring {
+    &:focus-visible {
       box-shadow: none;
     }
   }
 }
 
 .spectrum-ClearButton {
-  @inherit: %spectrum-BaseButton;
-  @inherit: %spectrum-FocusRing;
+  composes: spectrum-BaseButton spectrum-FocusRing;
 
   inline-size: var(--spectrum-clearbutton-medium-width);
   block-size: var(--spectrum-clearbutton-medium-height);

packages/@adobe/spectrum-css-temp/components/button/skin.css

@@ -79,7 +79,7 @@ governing permissions and limitations under the License.
     }
   }
 
-  &:focus-ring {
+  &:focus-visible {
     background-color: var(--spectrum-clearbutton-medium-background-color-key-focus);
     color: var(--spectrum-clearbutton-medium-icon-color-key-focus);
 
@@ -133,7 +133,7 @@ governing permissions and limitations under the License.
       color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color-hover));
     }
 
-    &:focus-ring {
+    &:focus-visible {
       background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-key-focus));
       color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-button-text-color-key-focus));
     }
@@ -168,7 +168,7 @@ governing permissions and limitations under the License.
       color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-text-color-hover));
     }
 
-    &:focus-ring {
+    &:focus-visible {
       background-color: xvar(--spectrum-high-contrast-transparent, var(--spectrum-button-background-color-key-focus));
       border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-button-color-key-focus));
       color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-button-text-color-key-focus));
@@ -447,7 +447,7 @@ governing permissions and limitations under the License.
     }
   }
 
-  &:focus-ring {
+  &:focus-visible {
     background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-background-color-key-focus));
     border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-border-color-hover));
     color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-text-color-key-focus));
@@ -505,7 +505,7 @@ governing permissions and limitations under the License.
       }
     }
 
-    &:focus-ring {
+    &:focus-visible {
       background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-background-color-selected-key-focus));
       border-color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-border-color-selected-key-focus));
       color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-text-color-selected-key-focus));
@@ -549,7 +549,7 @@ governing permissions and limitations under the License.
       fill: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-icon-color-selected));
     }
 
-    &:focus-ring {
+    &:focus-visible {
       background-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-emphasized-background-color-selected-key-focus));
       border-color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-border-color-selected-hover));
       color: xvar(--spectrum-high-contrast-highlight-text, var(--spectrum-actionbutton-emphasized-text-color-selected-key-focus));
@@ -603,7 +603,7 @@ governing permissions and limitations under the License.
     color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-quiet-text-color-hover));
   }
 
-  &:focus-ring {
+  &:focus-visible {
     background-color: xvar(--spectrum-high-contrast-button-face, var(--spectrum-actionbutton-quiet-background-color-key-focus));
     border-color: xvar(--spectrum-high-contrast-highlight, var(--spectrum-actionbutton-quiet-border-color-hover));
     color: xvar(--spectrum-high-contrast-button-text, var(--spectrum-actionbutton-quiet-text-color-key-focus));
@@ -705,7 +705,7 @@ governing permissions and limitations under the License.
     }
   }
 
-  &:focus-ring {
+  &:focus-visible {
     background-color: var(--spectrum-actionbutton-static-background-color-focus);
     border-color: var(--spectrum-actionbutton-static-border-color-focus);
     box-shadow: none;
@@ -763,7 +763,7 @@ governing permissions and limitations under the License.
       fill: var(--spectrum-actionbutton-static-color-selected);
     }
 
-    &:focus-ring {
+    &:focus-visible {
       background-color: var(--spectrum-actionbutton-static-background-color-selected-focus);
       border-color: var(--spectrum-actionbutton-static-background-color-selected-focus);
       color: var(--spectrum-actionbutton-static-color-selected);
@@ -886,7 +886,7 @@ governing permissions and limitations under the License.
     }
   }
 
-  &:focus-ring,
+  &:focus-visible,
   &.is-focused {
     background-color: var(--spectrum-fieldbutton-background-color-key-focus);
     border-color: var(--spectrum-fieldbutton-border-color-key-focus);
@@ -913,7 +913,7 @@ governing permissions and limitations under the License.
       border-color: var(--spectrum-fieldbutton-border-color-error-down);
     }
 
-    &:focus-ring,
+    &:focus-visible,
     &.is-focused {
       border-color: var(--spectrum-fieldbutton-border-color-error-key-focus);
     }
@@ -940,7 +940,7 @@ governing permissions and limitations under the License.
     color: var(--spectrum-fieldbutton-text-color-hover);
   }
 
-  &:focus-ring,
+  &:focus-visible,
   &.is-focused {
     background-color: var(--spectrum-fieldbutton-quiet-background-color-key-focus);
 
@@ -954,7 +954,7 @@ governing permissions and limitations under the License.
     background-color: var(--spectrum-fieldbutton-quiet-background-color-down);
     border-color: var(--spectrum-fieldbutton-quiet-border-color-down);
 
-    &:focus-ring,
+    &:focus-visible,
     &.is-focused {
       background-color: var(--spectrum-fieldbutton-quiet-background-color-key-focus);
     }

packages/@adobe/spectrum-css-temp/components/card/index.css

@@ -154,14 +154,14 @@ user-provided
 
 .spectrum-Card-image {
   grid-area: preview;
-  & img {
+  img {
     -webkit-user-drag: none;
     user-drag: none;
   }
 }
 .spectrum-Card-illustration {
   grid-area: preview;
-  & svg {
+  svg {
     -webkit-user-drag: none;
     user-drag: none;
   }