How to inject CSS in JavaScript? (6.0.0-beta.10)

[yaquawa]

Version

6.0.0-beta.10

I noticed that as of version 6.0.0-beta.10, this option is gone https://rollup-plugin-vue.vuejs.org/options.html#css

The plugin extracts css from <style>...</style> and generate a css file by default. Can't I inject CSS in JavaScript in version 6.0.0-beta.10?

[NicolasRichel]

Hi @yaquawa .

We recently face the same issue trying to make our Vue 2 component library "Vue 3 compliant".

Using rollup-plugin-vue v6.0.0 we were able to inject CSS in Javascript by adding the rollup-plugin-postcss plugin with the following config:

...
import vue from 'rollup-plugin-vue'; // v6.0.0
import postcss from 'rollup-plugin-postcss'; // v4.0.0

export default {
  input: ...,
  output: ...,
  plugin: [
    ...
    vue({
      preprocessStyles: true
    }),
    postcss()
  ]
}

Notes: the rollup-plugin-postcss needs postcss as a peer dependecy.

Hope this helps. :-)

[Mister-Hope]

I am using rollup-plugin-styles now, and it works perfect.

[mnlipp]

First of all, this issue still applies for 6.0.0.

I spent a day on sorting this out. Maybe it is obvious to everybody except me, but I'll summarize nevertheless.

The remark in the initial report ("this option is gone") is a bit misleading. The option still seems to be there (at least it is still in the documentation). Problem is that it doesn't work. Even worse, the plugin does not exhibit the documented default behavior to "Inject CSS in JavaScript". This results in a CSS "virtual file" which is subsequently not transformed by rollup unless you setup a CSS plugin (and why should you? CSS isn't expected). Using rollup for the first time (and/or coming from using it with Vue2), it wasn't easy to figure out what happens here. (Thanks for this hack.)

Admitted, the project's current README doesn't mention the css option, but there's still the link to the github page. To the uninitiated user, the README appears as a summary of what is described in detail on the github page.

As @NicolasRichel has pointed out in his comment above, the intended replacement for the css option seems to be preprocessStyles (which defaults to false, a breaking change with respect to the Vue2 behavior). However, testing this option for the first time results in misleading results, because rollup-plugin-vue still produces the CSS "virtual file", so the error observed when invoking rollup (without a CSS transformer) does not go away!

And that's why you need the postcss() in the rollup configuration. It seems to be "auto-configured" as a side-effect of setting preprocessStyles to true. The applied configuration causes it to generate the JS for setting up the styles, which is merged into the bundle by rollup.

[973782523]

I am using rollup-plugin-styles now, and it works perfect.

Thanks little brother, I use this to solve, but I think CSS is the global state, will cause global pollution? What do you think?
My idea is that SCSS can cover a layer of variable name in the outermost layer. Hello, do you have a good idea?