Vite/Rollup plugin to import CSS into React web component
I also asked on StackOverflow. Please refer to it for more info https://stackoverflow.com/questions/76509761/vite-rollup-plugin-hodtdiw-to-get-styling-css-module-into-a-react-web-component
I am trying to create a Web Component from React. Web Components need you to import styles inside the Shadow DOM raw. Vite will normally inject your CSS into the document body (I think). I'd like to write a Vite plugin to collect all CSS imports from a starting component. It might have sub components that have their own CSS that I'd need to know about as well.
Any help appreciated 🙏
Stack Overflow
Vite/Rollup plugin: How to get styling (CSS module) into a React We...
I am trying to create a Web Component from React. Web Components need you to import styles inside the Shadow DOM. So while my CSS module is imported like this normally
import css from "./MyCom...
1 Reply
I don't have the answer, but maybe this will be useful.
I had to solve a similar problem using Tailwind CSS, and Twind allowed me to achieve that: https://twind.style/with-web-components
Hopefully you can take inspiration from it. The code is here: https://github.com/tw-in-js/twind/blob/main/packages/with-web-components/src/index.ts
Twind.style • Use With: Web Components
Using Twind with Custom Elements and Shadow DOM
GitHub
twind/packages/with-web-components/src/index.ts at main · tw-in-js/...
The smallest, fastest, most feature complete Tailwind-in-JS solution in existence. - twind/packages/with-web-components/src/index.ts at main · tw-in-js/twind