[DO NOT MERGE] Seeing if we can get perf test output with the current changes.

.github/workflows/test.yml

@@ -167,7 +167,9 @@ jobs:
 
     comment-performance:
         name: Comment performance results
-        needs: [compare-chrome, compare-firefox]
+        # needs: [compare-chrome, compare-firefox]
+        # comparing in firefox will fail while leverageing Import Attributes
+        needs: [compare-chrome]
 
         # We can't currently run benchmarks on PRs from forked repos, because the
         # tachometer action reports results by posting a comment, and we can't post

.gitignore

@@ -25,6 +25,7 @@ lib
 # build artifacts
 custom-elements.json
 
+*.min.css
 packages/*/src/**/*.css.js
 packages/*/custom-elements.json
 packages/**/*.js

.stylelintignore

@@ -4,4 +4,5 @@ task
 !*.css
 projects/example-project/dist
 tools/styles
-spectrum-*.css
+spectrum-*.css
+*.min.css

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
     "files.exclude": {
         "**/*.css.ts": { "when": "$(basename)" },
+        "**/*.min.css": { "when": "$(basename).css" },
         "packages/*/src/spectrum-vars.json": true,
         "packages/**/*.js.map": true,
         "packages/**/*.js": { "when": "$(basename).ts" },

package.json

@@ -68,7 +68,7 @@
         "storybook:quick": "run-p build:watch storybook:run",
         "storybook:run": "web-dev-server --config wds-storybook.config.js",
         "test": "yarn test:focus unit",
-        "test:bench": "yarn build:tests && node test/benchmark/cli.js",
+        "test:bench": "node test/benchmark/cli.js",
         "test:changed": "node ./tasks/test-changes.js",
         "test:ci": "yarn test:start",
         "test:create": "wireit",
@@ -161,7 +161,8 @@
         "genversion": "^3.1.1",
         "gh-pages": "^6.0.0",
         "gunzip-maybe": "^1.4.2",
-        "husky": "^8.0.3",
+        "husky": "^9.0.10",
+        "koa-compress": "^5.1.1",
         "latest-version": "^9.0.0",
         "lerna": "^6.6.2",
         "lightningcss": "^1.24.0",
@@ -194,6 +195,9 @@
         "wireit": "^0.14.3",
         "yargs": "^17.2.1"
     },
+    "resolutions": {
+        "@babel/types": "7.23.6"
+    },
     "wireit": {
         "build:css:watch": {
             "command": "node ./tasks/watch-css.js",
@@ -205,13 +209,20 @@
                 "process-spectrum"
             ],
             "files": [
+                "packages/*/exports.json",
+                "packages/*/src/spectrum-config.js",
                 "packages/**/*.css",
+                "tools/*/exports.json",
+                "tools/*/src/spectrum-config.js",
                 "tools/**/*.css",
-                "tasks/build-css.js"
+                "tasks/build-css.js",
+                "tasks/css-tools.js"
             ],
             "output": [
                 "packages/**/*.css.ts",
-                "tools/**/*.css.ts"
+                "packages/**/*.min.css",
+                "tools/**/*.css.ts",
+                "tools/**/*.min.css"
             ],
             "clean": "if-file-deleted"
         },
@@ -388,7 +399,8 @@
                 "!tools/styles/scale-*.css",
                 "!tools/styles/theme-*.css",
                 "!tools/styles/express/scale-*.css",
-                "!tools/styles/express/theme-*.css"
+                "!tools/styles/express/theme-*.css",
+                "!tools/styles/all-*.css"
             ],
             "clean": false
         },

packages/accordion/src/Accordion.ts

@@ -26,7 +26,8 @@ import { FocusGroupController } from '@spectrum-web-components/reactive-controll
 
 import { AccordionItem } from './AccordionItem.js';
 
-import styles from './accordion.css.js';
+// import stylesDefault from './spectrum-accordion.min.css' with { type: 'css' };
+import stylesOveride from './accordion.min.css' with { type: 'css' };
 
 /**
  * @element sp-accordion
@@ -36,7 +37,7 @@ export class Accordion extends SizedMixin(SpectrumElement, {
     noDefaultSize: true,
 }) {
     public static override get styles(): CSSResultArray {
-        return [styles];
+        return [stylesOveride];
     }
 
     /**

packages/accordion/src/AccordionItem.ts

@@ -21,9 +21,10 @@ import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import { when } from '@spectrum-web-components/base/src/directives.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js';
-import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js';
+import chevronIconStyles from '@spectrum-web-components/icon/src/spectrum-icon-chevron.min.css' with { type: 'css' };
 
-import styles from './accordion-item.css.js';
+// import stylesDefault from './spectrum-accordion-item.min.css' with { type: 'css' };
+import stylesOveride from './accordion-item.min.css' with { type: 'css' };
 
 const chevronIcon: Record<string, () => TemplateResult> = {
     s: () => html`
@@ -69,7 +70,7 @@ export class AccordionItem extends SizedMixin(Focusable, {
     noDefaultSize: true,
 }) {
     public static override get styles(): CSSResultArray {
-        return [styles, chevronIconStyles];
+        return [stylesOveride, chevronIconStyles];
     }
 
     @property({ type: Boolean, reflect: true })

packages/action-bar/src/ActionBar.ts

@@ -21,9 +21,12 @@ import '@spectrum-web-components/popover/sp-popover.js';
 import '@spectrum-web-components/action-group/sp-action-group.js';
 import '@spectrum-web-components/button/sp-close-button.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
-import actionBarStyles from './action-bar.css.js';
 import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
+
+import stylesDefault from './spectrum-action-bar.min.css' with { type: 'css' };
+import stylesOveride from './action-bar.min.css' with { type: 'css' };
+
 export const actionBarVariants = ['sticky', 'fixed'];
 
 /**
@@ -32,7 +35,7 @@ export const actionBarVariants = ['sticky', 'fixed'];
  */
 export class ActionBar extends FocusVisiblePolyfillMixin(SpectrumElement) {
     public static override get styles(): CSSResultArray {
-        return [actionBarStyles];
+        return [stylesDefault, stylesOveride];
     }
 
     /**

packages/action-button/src/ActionButton.ts

@@ -20,10 +20,12 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { ButtonBase } from '@spectrum-web-components/button';
-import buttonStyles from './action-button.css.js';
-import cornerTriangleStyles from '@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.css.js';
 import '@spectrum-web-components/icons-ui/icons/sp-icon-corner-triangle300.js';
 
+import cornerTriangleStyles from '@spectrum-web-components/icon/src/spectrum-icon-corner-triangle.min.css' with { type: 'css' };
+import stylesDefault from './spectrum-action-button.min.css' with { type: 'css' };
+import stylesOveride from './action-button.min.css' with { type: 'css' };
+
 const holdAffordanceClass = {
     xs: 'spectrum-UIIcon-CornerTriangle75',
     s: 'spectrum-UIIcon-CornerTriangle75',
@@ -54,7 +56,12 @@ export class ActionButton extends SizedMixin(ButtonBase, {
     noDefaultSize: true,
 }) {
     public static override get styles(): CSSResultArray {
-        return [...super.styles, buttonStyles, cornerTriangleStyles];
+        return [
+            ...super.styles,
+            stylesDefault,
+            stylesOveride,
+            cornerTriangleStyles,
+        ];
     }
 
     @property({ type: Boolean, reflect: true })

packages/action-group/src/ActionGroup.ts

@@ -26,7 +26,8 @@ import type { ActionButton } from '@spectrum-web-components/action-button';
 import { RovingTabindexController } from '@spectrum-web-components/reactive-controllers/src/RovingTabindex.js';
 import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 
-import styles from './action-group.css.js';
+import stylesDefault from './spectrum-action-group.min.css' with { type: 'css' };
+import stylesOveride from './action-group.min.css' with { type: 'css' };
 
 const EMPTY_SELECTION: string[] = [];
 
@@ -41,7 +42,7 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
     noDefaultSize: true,
 }) {
     public static override get styles(): CSSResultArray {
-        return [styles];
+        return [stylesDefault, stylesOveride];
     }
 
     public set buttons(buttons: ActionButton[]) {

packages/action-menu/src/ActionMenu.ts

@@ -24,9 +24,10 @@ import '@spectrum-web-components/action-button/sp-action-button.js';
 import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import '@spectrum-web-components/icons-workflow/icons/sp-icon-more.js';
-import actionMenuStyles from './action-menu.css.js';
 import { SlottableRequestEvent } from '@spectrum-web-components/overlay/src/slottable-request-event.js';
 
+import stylesOveride from './action-menu.min.css' with { type: 'css' };
+
 /**
  * @element sp-action-menu
  *
@@ -43,7 +44,7 @@ export class ActionMenu extends ObserveSlotPresence(
     '[slot="label-only"]'
 ) {
     public static override get styles(): CSSResultArray {
-        return [actionMenuStyles];
+        return [stylesOveride];
     }
 
     @property({ type: String })

packages/alert-dialog/src/AlertDialog.ts

@@ -22,9 +22,13 @@ import {
 import '@spectrum-web-components/button/sp-button.js';
 import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
 import { randomID } from '@spectrum-web-components/shared/src/random-id.js';
+import '@spectrum-web-components/button-group/sp-button-group.js';
+import '@spectrum-web-components/divider/sp-divider.js';
 import { conditionAttributeWithId } from '@spectrum-web-components/base/src/condition-attribute-with-id.js';
 import { ResizeController } from '@lit-labs/observers/resize-controller.js';
-import alertStyles from './alert-dialog.css.js';
+
+import stylesDefault from './spectrum-alert-dialog.min.css' with { type: 'css' };
+import stylesOveride from './alert-dialog.min.css' with { type: 'css' };
 
 export type AlertDialogVariants =
     | 'confirmation'
@@ -63,7 +67,7 @@ function gatherAppliedIdsFromSlottedChildren(
 }
 export class AlertDialog extends FocusVisiblePolyfillMixin(SpectrumElement) {
     public static override get styles(): CSSResultArray {
-        return [alertStyles];
+        return [stylesDefault, stylesOveride];
     }
 
     @query('.content')

packages/asset/src/Asset.ts

@@ -18,7 +18,8 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
-import styles from './asset.css.js';
+import stylesDefault from './spectrum-asset.min.css' with { type: 'css' };
+import stylesOveride from './asset.min.css' with { type: 'css' };
 
 const file = (label: string): TemplateResult => html`
     <svg
@@ -62,7 +63,7 @@ const folder = (label: string): TemplateResult => html`
  */
 export class Asset extends SpectrumElement {
     public static override get styles(): CSSResultArray {
-        return [styles];
+        return [stylesDefault, stylesOveride];
     }
 
     @property({ type: String, reflect: true })

packages/avatar/src/Avatar.ts

@@ -24,7 +24,8 @@ import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
 import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 
-import avatarStyles from './avatar.css.js';
+import stylesDefault from './spectrum-avatar.min.css' with { type: 'css' };
+import stylesOveride from './avatar.min.css' with { type: 'css' };
 
 export type AvatarSize = 50 | 75 | 100 | 200 | 300 | 400 | 500 | 600 | 700;
 const validSizes: AvatarSize[] = [50, 75, 100, 200, 300, 400, 500, 600, 700];
@@ -35,7 +36,7 @@ const defaultSize = validSizes[2];
  */
 export class Avatar extends LikeAnchor(Focusable) {
     public static override get styles(): CSSResultArray {
-        return [avatarStyles];
+        return [stylesDefault, stylesOveride];
     }
 
     @query('#link')

packages/badge/src/Badge.ts

@@ -22,7 +22,9 @@ import { property } from '@spectrum-web-components/base/src/decorators.js';
 
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
 import { ObserveSlotPresence } from '@spectrum-web-components/shared/src/observe-slot-presence.js';
-import styles from './badge.css.js';
+
+import stylesDefault from './spectrum-badge.min.css' with { type: 'css' };
+import stylesOveride from './badge.min.css' with { type: 'css' };
 
 export const BADGE_VARIANTS = [
     'accent',
@@ -46,7 +48,7 @@ export const BADGE_VARIANTS = [
     'cyan',
     'blue',
 ] as const;
-export type BadgeVariant = typeof BADGE_VARIANTS[number];
+export type BadgeVariant = (typeof BADGE_VARIANTS)[number];
 export const FIXED_VALUES_DEPRECATED = ['top', 'bottom', 'left', 'right'];
 export const FIXED_VALUES = [
     'inline-start',
@@ -55,8 +57,8 @@ export const FIXED_VALUES = [
     'block-end',
 ] as const;
 export type FixedValues =
-    | typeof FIXED_VALUES[number]
-    | typeof FIXED_VALUES_DEPRECATED[number];
+    | (typeof FIXED_VALUES)[number]
+    | (typeof FIXED_VALUES_DEPRECATED)[number];
 
 /**
  * @element sp-badge
@@ -71,7 +73,7 @@ export class Badge extends SizedMixin(
     }
 ) {
     public static override get styles(): CSSResultArray {
-        return [styles];
+        return [stylesDefault, stylesOveride];
     }
 
     @property({ reflect: true })

packages/banner/src/Banner.ts

@@ -19,7 +19,8 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
-import bannerStyles from './banner.css.js';
+import stylesDefault from './spectrum-banner.min.css' with { type: 'css' };
+import stylesOveride from './banner.min.css' with { type: 'css' };
 
 /**
  * @element sp-banner
@@ -38,7 +39,7 @@ export class Banner extends SpectrumElement {
     public corner = false;
 
     public static override get styles(): CSSResultArray {
-        return [bannerStyles];
+        return [stylesDefault, stylesOveride];
     }
 
     protected override update(changes: PropertyValues<this>): void {

packages/button-group/src/ButtonGroup.ts

@@ -20,7 +20,8 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import type { Button } from '@spectrum-web-components/button';
 
-import styles from './button-group.css.js';
+import stylesDefault from './spectrum-button-group.min.css' with { type: 'css' };
+import stylesOveride from './button-group.min.css' with { type: 'css' };
 
 /**
  * @element sp-button-group
@@ -30,7 +31,7 @@ export class ButtonGroup extends SizedMixin(SpectrumElement, {
     noDefaultSize: true,
 }) {
     public static override get styles(): CSSResultArray {
-        return [styles];
+        return [stylesDefault, stylesOveride];
     }
 
     @property({ type: Boolean, reflect: true })

packages/button/src/Button.ts

@@ -19,9 +19,11 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 import { ButtonBase } from './ButtonBase.js';
-import buttonStyles from './button.css.js';
 import { when } from '@spectrum-web-components/base/src/directives.js';
 
+import stylesDefault from './spectrum-button.css' with { type: 'css' };
+import stylesOveride from './button.css' with { type: 'css' };
+
 export type DeprecatedButtonVariants = 'cta' | 'overBackground';
 export type ButtonStatics = 'white' | 'black';
 export type ButtonVariants =
@@ -51,7 +53,7 @@ export type ButtonTreatments = 'fill' | 'outline';
  */
 export class Button extends SizedMixin(ButtonBase, { noDefaultSize: true }) {
     public static override get styles(): CSSResultArray {
-        return [...super.styles, buttonStyles];
+        return [...super.styles, stylesDefault, stylesOveride];
     }
 
     @property({ type: String, attribute: 'pending-label' })