perf: leverage CSS module scripts

adobe · Mar 11, 2024 · 2d827a9 · 2d827a9
1 parent 287b979
commit 2d827a9
Show file tree

Hide file tree

Showing 141 changed files with 1,008 additions and 450 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -207,7 +207,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

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

diff --git a/.stylelintignore b/.stylelintignore
@@ -4,4 +4,5 @@ task
 !*.css
 projects/example-project/dist
 tools/styles
-spectrum-*.css
+spectrum-*.css
+*.min.css
diff --git a/.vscode/settings.json b/.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" },

diff --git a/package.json b/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",
@@ -160,6 +160,7 @@
         "gh-pages": "^6.0.0",
         "gunzip-maybe": "^1.4.2",
         "husky": "^9.0.10",
+        "koa-compress": "^5.1.1",
         "latest-version": "^7.0.0",
         "lerna": "^6.6.2",
         "lightningcss": "^1.24.0",
@@ -193,6 +194,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",
@@ -204,13 +208,19 @@
                 "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"
             ],
             "output": [
                 "packages/**/*.css.ts",
-                "tools/**/*.css.ts"
+                "packages/**/*.min.css",
+                "tools/**/*.css.ts",
+                "tools/**/*.min.css"
             ],
             "clean": "if-file-deleted"
         },
@@ -381,7 +391,8 @@
             "output": [
                 "packages/*/src/spectrum-*.css",
                 "tools/*/src/spectrum-*.css",
-                "tools/styles/*.css"
+                "tools/styles/*.css",
+                "!tools/styles/all-*.css"
             ],
             "clean": false
         },

diff --git a/packages/accordion/src/Accordion.ts b/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' assert { type: 'css' };
+import stylesOveride from './accordion.min.css' assert { 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 [stylesDefault, stylesOveride];
     }
 
     /**

diff --git a/packages/accordion/src/AccordionItem.ts b/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' assert { type: 'css' };
 
-import styles from './accordion-item.css.js';
+import stylesDefault from './spectrum-accordion-item.min.css' assert { type: 'css' };
+import stylesOveride from './accordion-item.min.css' assert { 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 [stylesDefault, stylesOveride, chevronIconStyles];
     }
 
     @property({ type: Boolean, reflect: true })

diff --git a/packages/action-bar/src/ActionBar.ts b/packages/action-bar/src/ActionBar.ts
@@ -21,8 +21,11 @@ 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 stylesDefault from './spectrum-action-bar.min.css' assert { type: 'css' };
+import stylesOveride from './action-bar.min.css' assert { type: 'css' };
+
 export const actionBarVariants = ['sticky', 'fixed'];
 
 /**
@@ -31,7 +34,7 @@ export const actionBarVariants = ['sticky', 'fixed'];
  */
 export class ActionBar extends SpectrumElement {
     public static override get styles(): CSSResultArray {
-        return [actionBarStyles];
+        return [stylesDefault, stylesOveride];
     }
 
     /**

diff --git a/packages/action-button/src/ActionButton.ts b/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' assert { type: 'css' };
+import stylesDefault from './spectrum-action-button.min.css' assert { type: 'css' };
+import stylesOveride from './action-button.min.css' assert { 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 })

diff --git a/packages/action-group/src/ActionGroup.ts b/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' assert { type: 'css' };
+import stylesOveride from './action-group.min.css' assert { 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[]) {

diff --git a/packages/action-menu/src/ActionMenu.ts b/packages/action-menu/src/ActionMenu.ts
@@ -24,7 +24,8 @@ 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 stylesOveride from './action-menu.min.css' assert { type: 'css' };
 
 /**
  * @element sp-action-menu
@@ -42,7 +43,7 @@ export class ActionMenu extends ObserveSlotPresence(
     '[slot="label-only"]'
 ) {
     public static override get styles(): CSSResultArray {
-        return [actionMenuStyles];
+        return [stylesOveride];
     }
 
     @property({ type: String })

diff --git a/packages/alert-dialog/src/AlertDialog.ts b/packages/alert-dialog/src/AlertDialog.ts
@@ -20,10 +20,14 @@ import {
     query,
 } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/button/sp-button.js';
+import '@spectrum-web-components/button-group/sp-button-group.js';
+import '@spectrum-web-components/divider/sp-divider.js';
 import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared';
 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' assert { type: 'css' };
+import stylesOveride from './alert-dialog.min.css' assert { type: 'css' };
 
 export type AlertDialogVariants =
     | 'confirmation'
@@ -64,7 +68,7 @@ function gatherAppliedIdsFromSlottedChildren(
 }
 export class AlertDialog extends FocusVisiblePolyfillMixin(SpectrumElement) {
     public static override get styles(): CSSResultArray {
-        return [alertStyles];
+        return [stylesDefault, stylesOveride];
     }
 
     @query('.content')

diff --git a/packages/asset/src/Asset.ts b/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' assert { type: 'css' };
+import stylesOveride from './asset.min.css' assert { 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 })

diff --git a/packages/avatar/src/Avatar.ts b/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' assert { type: 'css' };
+import stylesOveride from './avatar.min.css' assert { 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')

diff --git a/packages/badge/src/Badge.ts b/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' assert { type: 'css' };
+import stylesOveride from './badge.min.css' assert { type: 'css' };
 
 export const BADGE_VARIANTS = [
     'accent',
@@ -71,7 +73,7 @@ export class Badge extends SizedMixin(
     }
 ) {
     public static override get styles(): CSSResultArray {
-        return [styles];
+        return [stylesDefault, stylesOveride];
     }
 
     @property({ reflect: true })

diff --git a/packages/banner/src/Banner.ts b/packages/banner/src/Banner.ts
@@ -18,7 +18,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' assert { type: 'css' };
+import stylesOveride from './banner.min.css' assert { type: 'css' };
 
 /**
  * @element sp-banner
@@ -37,7 +38,7 @@ export class Banner extends SpectrumElement {
     public corner = false;
 
     public static override get styles(): CSSResultArray {
-        return [bannerStyles];
+        return [stylesDefault, stylesOveride];
     }
 
     protected override render(): TemplateResult {

diff --git a/packages/button-group/src/ButtonGroup.ts b/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' assert { type: 'css' };
+import stylesOveride from './button-group.min.css' assert { 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 })

diff --git a/packages/button/src/Button.ts b/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' assert { type: 'css' };
+import stylesOveride from './button.css' assert { 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' })

diff --git a/packages/button/src/ButtonBase.ts b/packages/button/src/ButtonBase.ts
@@ -23,7 +23,8 @@ import {
 import { LikeAnchor } from '@spectrum-web-components/shared/src/like-anchor.js';
 import { Focusable } from '@spectrum-web-components/shared/src/focusable.js';
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
-import buttonStyles from './button-base.css.js';
+import spectrumButtonStyles from './spectrum-button-base.min.css' assert { type: 'css' };
+import buttonStyles from './button-base.min.css' assert { type: 'css' };
 
 /**
  * @slot - text content to be displayed in the Button element
@@ -33,7 +34,7 @@ export class ButtonBase extends ObserveSlotText(LikeAnchor(Focusable), '', [
     'sp-overlay,sp-tooltip',
 ]) {
     public static override get styles(): CSSResultArray {
-        return [buttonStyles];
+        return [spectrumButtonStyles, buttonStyles];
     }
 
     @property({ type: Boolean, reflect: true })