Closed
Description
Follow-up of #1051 and #2092, where web-components are not supported by the solution.
In web-component, the CSS is embedded in the JS file and is not transformed by vite and PostCSS.
Example with post-tabs.cjs.entry.js
const postTabsCss = ".tabs-wrapper{position:relative;...";
Some ideas:
Idea | Effort |
---|---|
Hook at runtime the web components stylesheet. | But complicated and not optimal. |
Add classes directly into web components styles. | Easy, but it means that we ship unnecessary classes to client. |
Build another outputTarget inside the packages for web components and using something like stencil-postcss conditionally to render the classes. | Not sure if it's feasable and we still ship some codes for nothing for most of the package user. |
Hook the web-components files entry after we build storybook and change the css inside them with a (gulp or custom) script. | Need a script to parse the file and find the right variable. Could potentially break. |
Metadata
Metadata
Assignees
Type
Projects
Status
🚀 Done