postcss does not work as expected with vue-loader

[JounQin]

Version

15.4.0

Reproduction link

JounQin/test@ba578d3

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?

[TheAlexLichter]

I'd love to see progress as well ☺️

Related PR (merged but didn't solve the problem AFAIK): vuejs/component-compiler-utils#36

[TheAlexLichter]

@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 cssnano/cssnano#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 vuejs/component-compiler-utils#40 instead.