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
563 stars 31 forks source link

Shadow dom support #168

Open hasdfa opened 1 month ago

hasdfa commented 1 month 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 1 month 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.