Example on how to use (scoped) SCSS plus lit-element

[brecke]

Hi there,

I'm trying to import scss on a lit-element based web component, but I can't seem to make rollup-plugin-styles and rollup-plugin-lit-css to work. On the documentation there's an example for importing pure CSS but how would this work with SCSS?

To be clear:

• Using the emit mode I'm able to import pure CSS scoped to the WC.
• Using the default inject mode the compiled CSS is applied globally and therefore is not scoped to the WC.

Is there a way I can import SCSS in a scoped manner?

Thanks in advance

[ViRuSTriNiTy]

A solution that uses a workaround has been posted here:

https://github.com/bennypowers/rollup-plugin-lit-css/issues/23

I'm also still trying to find out the right way to do it.

[ViRuSTriNiTy]

The solution posted above does not seem to work anymore (at least for me) as it seems to target Lit 2.x.

I have analyzed the plugin code and its dependencies and my impression is that the documentation is misleading. It reads like you just need to add this and that module, add this and that line and it flies but it does not.

The underlying issue here is that rollup-plugin-lit-css just processes pure CSS as

https://github.com/bennypowers/lit-css/blob/74dc908cd05c177267cdd3df6bdca1c9821630e8/packages/rollup-plugin-lit-css/rollup-plugin-lit-css.ts#L33

along with the other filter code completely ignores .scss files by default and due to the hard-coded css extension check and the missing support for transforming the id the whole construct just breaks.

You could fiddle something together by manually altering the files in the node_modules folder so that it processes the files but then the plugin has no import of node-sass or sass whatsoever so the .scss file would not be parsed correctly.

I think it must be a 3 step solution in rollup.config.js like

plugins: [
    styles({
      mode: "emit"
    }),
    sassToCss(), // custom plugin that calls sass and compiles (aka transforms in terms of a plugin) the sass           
    litCss()
]

There are plugins that transform SASS to CSS but these are already working without rollup-plugin-styles or rollup-plugin-lib-css:

• https://github.com/ponday-dev/rollup-plugin-lit-sass
• https://gist.github.com/calebdwilliams/b3d6b2c2ca242e8aec5acafd0a532db2/revisions

But these are somewhat outdated as both still use node-sass.

I still wonder how the tests in __tests__ can even run scss imports. Perhaps the secret is buried there 🙄

[ViRuSTriNiTy]

I have given up to solve this after multiple hours of searching the needle in the haystack.

You can use https://www.npmjs.com/package/@j1shin/rollup-plugin-lit-sass to achieve what you want, just follow the description of the package. All necessary steps are explained.