search

umbopepato / rollup-plugin-postcss-lit

Rollup plugin to load PostCSSed stylesheets in LitElement components
MIT License
34 stars 6 forks source link

CSS leaks from bundled webcompoment #40

Closed CColon1 closed 2 years ago

CColon1 commented 3 years ago

I'm not sure if this is an issue WIth this plugin, PostCSS, rollup, or If I just don't know what I'm doing. However I'm injecting a web component in to a wordpress site. The bundled component uses it's own css, however that css is effecting the rest of the site. My understanding was that the components css should be sandboxed in the shadow dom. Any tips would be greatly appreciated.

umbopepato commented 3 years ago

Hi @CColon1! Can you please share you Rollup configuration? My guess is that you probably haven't disabled style injection in rollup-plugin-postcss's options:

plugins: [
  postcss({
    inject: false,
  }),
  ...
],
jlesquembre commented 3 years ago

I'm having the same issue, in my case, it's because I'm using Vite. Looks like Vite is injecting the styles in index.html

umbopepato commented 3 years ago

Hey @jlesquembre! That's Vite's default behaviour which, unfortunately, as of now cannot be disabled. See https://github.com/vitejs/vite/issues/3246 and https://github.com/vitejs/vite/pull/2148#issuecomment-784738508

jlesquembre commented 3 years ago

@umbopepato thanks for the links, let's see if it gets fixed in Vite

vmadman commented 2 years ago

FYI, pretty sure this was fixed in Vite. You just need to add ?inline after the scss imports.

e.g.

import styles from './my-styles.scss?inline';

See: https://github.com/vitejs/vite/commit/e1de8a888ea9adb9dc415cf74aec43dfa83aa526

umbopepato commented 2 years ago

Thanks for the heads up @vmadman, I updated the README! 🙂