RFC | leverage css module imports in components

[castastrophe]

Description

We opened this as a demo of using the native CSS module imports for the web components (reference: https://web.dev/articles/css-module-scripts) and wondering if there are any decent polyfills that could get us the coverage we need to switch over to it.

This approach would mean in future infrastructure we wouldn't need to convert *.css -> *.ts -> *.js at all. One less thing to ship (and have to maintain as a part of our API too). Since we export them as part of our components here, I didn't remove the tasks that generate the *.css.js files but if we committed to an approach like this, we could remove those in a future breaking change.

Action items

1. Take a look at this approach in the pull request
2. Click through the Storybook
3. Read up on CSS Module imports
4. Post your thoughts and findings to this PR

[changeset-bot]

⚠️ No Changeset found

Latest commit: abab690

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

Branch preview

• Documentation Site
• Storybook

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[github-actions]

Tachometer results

Currently, no packages are changed by this PR...

[coveralls]

Pull Request Test Coverage Report for Build 14094674923

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• 2012 unchanged lines in 37 files lost coverage.
• Overall coverage decreased (-11.8%) to 86.218%

---

Files with Coverage Reduction	New Missed Lines	%
tools/base/src/condition-attribute-with-id.ts	1	93.22%
packages/tabs/src/Tab.ts	2	94.12%
tools/shared/src/focusable.ts	2	98.83%
tools/base/src/Base.ts	4	98.83%
tools/reactive-controllers/src/ElementResolution.ts	4	95.12%
tools/shared/src/observe-slot-presence.ts	5	88.5%
packages/action-menu/src/ActionMenu.ts	6	86.02%
packages/tooltip/src/tooltip-directive.ts	7	84.09%
packages/alert-dialog/src/AlertDialog.ts	9	95.31%
tools/reactive-controllers/src/FocusGroup.ts	9	93.23%

Totals
Change from base Build 14094527602:	-11.8%
Covered Lines:	14184
Relevant Lines:	16434

---

💛 - Coveralls

[castastrophe]

Found a possible polyfill solution: https://github.com/guybedford/es-module-shims?tab=readme-ov-file#css-modules