adobe
RFC | leverage css module imports in components
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
- Take a look at this approach in the pull request
- Click through the Storybook
- Read up on CSS Module imports
- Post your thoughts and findings to this PR
⚠️ No Changeset found
Latest commit: abab690a5856cbd113608cb19d53ca77357059ea
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
![changeset-bot[bot] avatar](https://avatars.githubusercontent.com/in/28616?v=4 "Published by a pub.dev verified publisher"){kind=small}
Branch preview
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[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Tachometer results
Currently, no packages are changed by this PR...
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% |
| <!-- | Total: | 2012 |
| Totals | |
|---|---|
| Change from base Build 14094527602: | -11.8% |
| Covered Lines: | 14184 |
| Relevant Lines: | 16434 |
💛 - Coveralls
Found a possible polyfill solution: https://github.com/guybedford/es-module-shims?tab=readme-ov-file#css-modules