search

mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
828 stars 39 forks source link

Shadow dom support #168

Open hasdfa opened 4 months ago

hasdfa commented 4 months ago

Summary

When you're using shadow root, styles are injected in the head of the document - so it's not possible to use pigment CSS with shadow dom.

Examples

Vite.js (import of .css file)

https://codesandbox.io/p/devbox/pigment-css-shadow-dom-lf6tck?file=/src/index.tsx:20,1

Vite.js (inline import)

https://codesandbox.io/p/devbox/pigment-css-shadow-dom-lf6tck?file=/src/index-inline.tsx:11,1

[plugin:vite-plugin-zero-runtime] Package subpath './styles.css?inline' is not defined by "exports" in /project/workspace/node_modules/@pigment-css/react/package.json in/project/workspace/src/index-inline.tsx

Motivation

  1. I've tried using the Pigment CSS for the Chrome extension, and I want to place my element into Shadow Dom so that it does not affect the main document.
  2. Some of mini-applications embedded inside bigger via shadow-dom elements to isolate styles

Search keywords: shadow dom

brijeshb42 commented 4 months ago

The ?inline in import will definitely not work with the way we are exporting the public api/files.

Also, Pigment CSS doesn't deal with shadow dom right now. All the css is extracted similar to how you'd write css modules. So all the generated classe names are random (but deterministic). Ideally, this shouldn't affect the page styles, unless you are also writing global css.

trungutt commented 1 month ago

@brijeshb42 I'd love to have Shadow DOM support for PigmentCSS. Let me explain: in our internal infrastructure, we have a need to render our components in both light and dark themes at the same time, alongside with each other, in the same global DOM.

Forcing a specific color scheme doesn't work (see this issue), so we cannot rely on that API to have both <div className="light"> and <div className="dark"> at the same time.

The only reliable way for us for now is relying on Shadow DOM to isolate CSS selectors. It seems to work with 6.1.2 (thank you @siriwatknp!), but we really want to move to PigmentCSS without having to change our internal infrastructure.

Let me know if that makes sense. Thanks for your work