Different CSS Module class name in SSR and Client side output

[przemkow]

Version

5.0.0

Reproduction link

https://github.com/przemkow/rollup-plugin-vue-css-modules-issue

Steps to reproduce

git clone https://github.com/przemkow/rollup-plugin-vue-css-modules-issue
run:

npm i
npm run build:prod
open ./dist directory

What is expected?

both cjs and esm output should contain the same class names after compilation of css modules

What is actually happening?

Server side optimised build (optimizeSSR: true) and client side build (optimizeSSR: false) generates different class names for the same CSS module element.

---

This behaviour is present only if we run production build. (isProduction: true, NODE_ENV=production etc.) without production template optimisation both files contains the same output class name.

[przemkow]

Hi @znck! I did some investigation about that issue.
it seems that when the postcss "cleanup" function is called we are using result of that function call instead of that right call with full options object.
https://github.com/vuejs/component-compiler-utils/blob/master/lib/compileStyle.ts#L97

at first it looked like a postCss problem which does not use correct clousure to encapsulate sequence variable https://github.com/postcss/postcss/blob/967f25b564853e82ef197deb62de675dc5c4df5b/lib/input.es6#L78 so it took me a lot of time to understand what's going on there but - here is a good news - I think that it's related to order of postcssPlugins in vue-component-compiler.
Switching places of needsCleanCSS and needsCSSModules
https://github.com/vuejs/vue-component-compiler/blob/master/src/compiler.ts#L234
seems to resolve the issue with incorrect css names.

Here is PR to vue-component-compiler which should solve that problem
vuejs/vue-component-compiler#101

[znck]

Thanks for taking the time to resolve this, much appreciated. PR is merged and a new version has been released.

[przemkow]

Thanks for fast response!
I downloaded new version, unfortunately, there is a problem related to import syntax of clean-css lib. I opened a PR with fix.
vuejs/vue-component-compiler#103

I tested fix in that way on my localmachine:
in vue-component-compiler:

npm run prepare
npm pack

• copy/paste tgz file to rollup-plugin-vue local directory
• update package.json to install vue-component-compiler from local tgz file

yarn
npm run build
cd ./cookbook/srr
yarn 
NODE_ENV=production npm run build

Sorry for creating this bug 😢

[znck]

Released the patch with your fix.