Am I importing Tailwind correctly? Or is this a bug?

[evanb2]

Checkout this example repo: https://github.com/evanb2/extend-chrome-bug-repro

I'm noticing my content-script CSS is somehow bleeding out/clashing with the external page.

The only reason I'm not sure if this is something of my own doing or a bug with this plugin is that it only happens for production builds. But my first thought was that this is because Tailwind is probably doing a bunch of resets on HTML elements.

If you run npm run dev and navigate to Google Calendar, everything looks fine.
If you run npm run build and refresh, you'll notice a bunch of layout issues in Google Calendar (see screenshot).

Development build:

Production build:

Thanks for any help!

[evanb2]

Ok this seems to be an issue with the Tailwind base reset ("preflight") not being scoped to the extension. Still curious why it doesn't happen in development mode. Also curious if anyone else out there has found a solution for this...

[jacksteamdev]

Tailwind setup LGTM. When RPCE builds the content script, it takes imported CSS assets and adds it to the manifest, which causes the scoping problem. There should be a way around this, I'll look into it.

[evanb2]

Lol it's always something.

Just tested and SFC styles do not work. Not a huge deal for me personally cause I haven't been using them. But yeah definitely something you'll want to support for Vue users.

[evanb2]

I could make disabling this an option

I think that'd be the way to go.

[evanb2]

So this is a prod build, and the SFC styles file is there but I'm not seeing it work in the browser. Not sure if I'm missing something...

The main.js.css is also correctly referenced in the generated manifest.json.

[evanb2]

Ah but I'm still adding the styles manually to the shadow DOM, that's why.

Sorry for so many replies haha.

[jacksteamdev]

The Vue docs focus heavily on Custom Elements, which use Shadow DOM, but are not the same (and require polyfill in content scripts).

BTW, content scripts don't need the full Web Components polyfill, just this library: Custom Elements (v1) Polyfill. See this Chromium bug for context: 390807 - Content scripts can't define custom elements - chromium

#224 adds this package during development to support the Vite Error Overlay (which uses custom elements). I'm considering auto-including it during production if a content script calls customElements.define. It's probably an unnecessary distraction for the developer.