Vue-loader: postcss does not work as expected with vue-loader

[JounQin]

Version

15.4.0

Reproduction link

https://github.com/JounQin/test/commit/ba578d339b1b3bf3155c850192b8b460e7cede2c

Steps to reproduce

Clone https://github.com/JounQin/test and checkout branch vue-loader, run yarn build and check dist/main.*.css file, it is minified. Change code back to Vue style version and run yarn build again, dist/main.*.css is not minified correctly.

What is expected?

dist/main.*.css should be minified.

What is actually happening?

dist/main.*.css is not minified.

[JounQin]

I find out it is caused by https://github.com/vuejs/component-compiler-utils/blob/master/lib/stylePlugins/trim.ts#L7.

It is named trim, should it be raws.before = raws.after = ''?

@yyx990803 @Jinjiang @blake-newman Please help...

[JounQin]

It seems @yyx990803 you have came back to 'work', would like to check about this issue?

[manniL]

I'd love to see progress as well :relaxed:

Related PR (merged but didn't solve the problem AFAIK): https://github.com/vuejs/component-compiler-utils/pull/36

[manniL]

@JounQin Could you change the title of the PR to something more descriptive? 🤔

[yyx990803]

I just ran your reproduction and can't seem to reproduce the problem. I'm not sure how your repo even is related to vue-loader since it's importing a .scss file which not handled by vue-loader at all.

Also not able to reproduce the minification issue via vue-cli, so I assume this has something to do with your specific setup, but I don't know what the problem is without proper reproduction.

[yyx990803]

FYI, the trim plugin has always worked like that for over a year. This has never been a problem and unlikely to be the root cause.

I just ran the repro from https://github.com/cssnano/cssnano/issues/586 and it also minifies properly, so this is likely already fixed in some related dependency which originally caused the problem, unless a proper reproduction can be provided.

[yyx990803]

I was able to reproduce this via Vue CLI as I noticed this only happens for CSS inlined in JavaScript. Let's track this in https://github.com/vuejs/component-compiler-utils/pull/40 instead.