Rollup-plugin-vue: postcss + css modules + imported styles

[lancetharper]

Relevant SFC code:

<template>
<div :class="$style.test"> <!-- turns into "test___abc" -->
  <p :class="$style.local">CLASS HERE IS EMPTY</p>
</div>
</template>

<style module>
@import 'path/to/globals.pcss'
@import 'localStyle.pcss'

.test {
  background: purple;
}
</style>

Relevant parts of rollup config:

VuePlugin({
  css: false,
  defaultLang: { 
    style: 'postcss'
  },
}),
PostcssPlugin({
  extract: `out.css`,
  modules: {
    generateScopedName: `[local]___abc`,
  }
}),

Classes from localStyle.pcss are never applied via the $style object thus my component has empty classes that should be css-module classes. The css in the output file is all correct (as expected).

It's obvious the imported styles are never considered because the styles haven't been processed by postcss.

Also tried:

Having rollup-plugin-vue handle the postcss by adding this to the config (where postcssConfig comes from my postcssrc file:

style: {
  postcssOptions: postcssConfig.options,
  postcssPlugins: postcssConfig.plugins,
  postcssModulesOptions: {
    generateScopedName: `[local]___abc`,
  }
},

but this results in an error Error: Use process(css).then(cb) to work with async plugins

This has worked fine with vue-loader + webpack.

How is this supposed to work for this plugin? I'm exploring rollup as a replacement for webpack to build a component library so this is all fairly new to me. Any help is appreciated!

[gregorskii]

+1

[htmlin]

+1
use cssnano

[channg]

+1 me too

[znck]

Fixed. To be released soon.

[lancetharper]

As far as I can tell, this has not been fixed. The @import xyz are still not resolved and the class names in them are still ignored and not added to the $style object.

This wasn't a question of how to extract styles like you cover in #208

Some quick debugging on my end leads me to believe that it is because the style imports haven't been done so they are left out of the module object here incompiled. https://github.com/vuejs/rollup-plugin-vue/blob/master/src/index.ts#L351

I've opened an issue with vue-component-compiler as I believe that is where the issue lies.