Upgrade parcel to v2.8.0 (#3729)

Author: devongovett

.parcelrc

@@ -1,7 +1,6 @@
 {
   "extends": "@parcel/config-default",
   "resolvers": ["@parcel/resolver-glob", "parcel-resolver-docs", "..."],
-  "bundler": "@parcel/bundler-experimental",
   "transformers": {
     "apiCheck:*.{js,ts,tsx,json}": ["parcel-transformer-docs"],
     "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"],

.parcelrc-storybook

@@ -1,7 +1,6 @@
 {
   "extends": "@parcel/config-default",
   "resolvers": ["@parcel/resolver-glob", "parcel-resolver-storybook", "..."],
-  "bundler": "@parcel/bundler-experimental",
   "transformers": {
     "packages/*/*/intl/*.json": ["parcel-transformer-intl"],
     "*.{js,mjs,jsm,jsx,es6,cjs,ts,tsx}": [

package.json

@@ -65,17 +65,15 @@
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@babel/register": "^7.12.10",
-    "@babel/runtime": "^7.12.5",
     "@octokit/rest": "*",
-    "@parcel/bundler-experimental": "^2.2.1",
-    "@parcel/optimizer-css": "^2.2.1",
-    "@parcel/optimizer-data-url": "^2.2.1",
-    "@parcel/packager-ts": "^2.2.1",
-    "@parcel/resolver-glob": "^2.2.1",
-    "@parcel/transformer-inline": "^2.2.1",
-    "@parcel/transformer-inline-string": "^2.2.1",
-    "@parcel/transformer-svg-react": "^2.2.1",
-    "@parcel/transformer-typescript-types": "^2.2.1",
+    "@parcel/optimizer-css": "^2.8.0",
+    "@parcel/optimizer-data-url": "^2.8.0",
+    "@parcel/packager-ts": "^2.8.0",
+    "@parcel/resolver-glob": "^2.8.0",
+    "@parcel/transformer-inline": "^2.8.0",
+    "@parcel/transformer-inline-string": "^2.8.0",
+    "@parcel/transformer-svg-react": "^2.8.0",
+    "@parcel/transformer-typescript-types": "^2.8.0",
     "@spectrum-css/component-builder": "^1.0.0",
     "@spectrum-css/vars": "^2.3.0",
     "@storybook/addon-a11y": "^6.5.12",
@@ -139,7 +137,7 @@
     "npm-cli-login": "^1.0.0",
     "nyc": "^10.2.0",
     "p-queue": "^6.2.1",
-    "parcel": "^2.2.1",
+    "parcel": "^2.8.0",
     "patch-package": "^6.2.0",
     "plop": "^2.4.0",
     "postcss": "^7.0.0",
@@ -164,7 +162,7 @@
     "recursive-readdir": "^2.2.2",
     "regenerator-runtime": "0.13.3",
     "rimraf": "^2.6.3",
-    "sharp": "^0.29.3",
+    "sharp": "^0.31.2",
     "sinon": "^7.3.1",
     "storybook-dark-mode": "^1.1.1-canary.120.3843.0",
     "tempy": "^0.5.0",
@@ -177,9 +175,6 @@
   },
   "resolutions": {
     "@babel/core": "7.12.10",
-    "@babel/runtime": "7.12.5",
-    "@parcel/optimizer-data-url": "2.2.1",
-    "@parcel/transformer-inline-string": "2.2.1",
     "postcss-calc": "6.0.2",
     "jsdom": "16.7.0",
     "postcss-modules": "^3.2.2",

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

@@ -117,7 +117,7 @@
   justify-items: start;
 }
 
-.spectrum-ColorSlider-contextualHelp {
+.spectrum-ColorSlider-contextualHelp.spectrum-ColorSlider-contextualHelp {
   grid-area: contextualHelp;
   margin-inline-start: var(--spectrum-global-dimension-size-50);
   margin-top: var(--spectrum-global-dimension-size-25);

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

@@ -24,7 +24,8 @@ governing permissions and limitations under the License.
   }
 
   &.is-invalid {
-    .spectrum-Dropdown-invalidIcon {
+    /* override all states (e.g. active) */
+    .spectrum-Dropdown-invalidIcon.spectrum-Dropdown-invalidIcon {
       fill: var(--spectrum-dropdown-validation-icon-color-error);
     }
 

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

@@ -65,7 +65,13 @@ governing permissions and limitations under the License.
 .spectrum-Field {
   --spectrum-field-default-width: var(--spectrum-component-single-line-width);
 
-  &.spectrum-Field--positionTop {
+  .spectrum-Field-contextualHelp {
+    grid-area: contextualHelp;
+    margin-inline-start: var(--spectrum-global-dimension-size-50);
+    margin-top: var(--spectrum-global-dimension-size-25);
+  }
+
+  &:where(.spectrum-Field--positionTop) {
     display: inline-grid;
     grid-template-areas: "label contextualHelp ."
                          "field field field"
@@ -92,7 +98,7 @@ governing permissions and limitations under the License.
 
   /* The side label variant of Field is inline, and fills as much space as needed
    * by default. If an explicit width is set, then the field flexes to fill available space. */
-  &.spectrum-Field--positionSide {
+  &:where(.spectrum-Field--positionSide) {
     display: inline-flex;
     align-items: flex-start;
 
@@ -132,12 +138,6 @@ governing permissions and limitations under the License.
       padding-inline-end: 0;
     }
   }
-
-  .spectrum-Field-contextualHelp {
-    grid-area: contextualHelp;
-    margin-inline-start: var(--spectrum-global-dimension-size-50);
-    margin-top: var(--spectrum-global-dimension-size-25);
-  }
 }
 
 /* topdoc
@@ -147,7 +147,7 @@ governing permissions and limitations under the License.
 .spectrum-Form {
   /* With labelPosition=side, we override field layout to use a CSS table
    * so that all the labels and fields line up automatically. */
-  &.spectrum-Form--positionSide {
+  &:where(.spectrum-Form--positionSide) {
     display: table;
     border-collapse: separate;
     border-spacing: var(--spectrum-tableform-border-spacing);
@@ -195,7 +195,7 @@ governing permissions and limitations under the License.
   }
 
   /* With labelPosition=top, we use a normal flex stack */
-  &.spectrum-Form--positionTop {
+  &:where(.spectrum-Form--positionTop) {
     display: flex;
     flex-direction: column;
     margin: 0;
@@ -215,7 +215,7 @@ governing permissions and limitations under the License.
 
   &.spectrum-Field--positionSide {
     align-items: first baseline;
-    
+
     .spectrum-Field-contextualHelp {
       position: relative;
       top: var(--spectrum-global-dimension-size-40);

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

@@ -378,7 +378,7 @@ governing permissions and limitations under the License.
   grid-area: value;
 }
 
-.spectrum-Slider-contextualHelp {
+.spectrum-Slider-contextualHelp.spectrum-Slider-contextualHelp {
   grid-area: contextualHelp;
   margin-inline-start: var(--spectrum-global-dimension-size-50);
   margin-top: calc(-1 * var(--spectrum-global-dimension-size-25));

packages/@adobe/spectrum-css-temp/vars/express.css

@@ -1,4 +1,4 @@
-.express {
+.express.express {
   --spectrum-accent-color-100: var(--spectrum-indigo-100);
   --spectrum-accent-color-200: var(--spectrum-indigo-200);
   --spectrum-accent-color-300: var(--spectrum-indigo-300);
@@ -155,10 +155,10 @@
   --spectrum-tooltip-background-color: var(--spectrum-neutral-background-color-default);
 }
 
-.medium {
+.express.medium {
   --spectrum-switch-track-width: 28px;
 }
 
-.large {
+.express.large {
   --spectrum-switch-track-width: 36px;
 }

packages/@internationalized/date/package.json

@@ -22,7 +22,7 @@
     "url": "https://github.com/adobe/react-spectrum/tree/main/packages/@internationalized/date"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2"
+    "@swc/helpers": "^0.4.14"
   },
   "publishConfig": {
     "access": "public"

packages/@internationalized/message/package.json

@@ -22,7 +22,7 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
+    "@swc/helpers": "^0.4.14",
     "intl-messageformat": "^10.1.0"
   },
   "publishConfig": {