perf: leverage CSS module scripts

.github/workflows/test.yml

@@ -140,7 +140,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",
@@ -162,6 +162,7 @@
         "gh-pages": "^6.0.0",
         "gunzip-maybe": "^1.4.2",
         "husky": "^8.0.3",
+        "koa-compress": "^5.1.1",
         "latest-version": "^7.0.0",
         "lerna": "^6.6.2",
         "lightningcss": "^1.19.0",
@@ -204,6 +205,9 @@
         "wireit": "^0.14.1",
         "yargs": "^17.2.1"
     },
+    "resolutions": {
+        "@babel/types": "7.23.6"
+    },
     "wireit": {
         "build:css:watch": {
             "command": "node ./tasks/watch-css.js",
@@ -215,13 +219,19 @@
                 "process-spectrum"
             ],
             "files": [
+                "packages/*/exports.json",
+                "packages/*/src/spectrum-config.js",
                 "packages/**/*.css",
+                "tools/*/exports.json",
+                "tools/*/src/spectrum-config.js",
                 "tools/**/*.css",
                 "scripts/css-processing.cjs"
             ],
             "output": [
                 "packages/**/*.css.ts",
-                "tools/**/*.css.ts"
+                "packages/**/*.min.css",
+                "tools/**/*.css.ts",
+                "tools/**/*.min.css"
             ],
             "clean": "if-file-deleted"
         },

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];
     }
 
     /**

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 })

packages/accordion/src/accordion.min.css

@@ -0,0 +1 @@
+@import "./spectrum-accordion.css";