fix https://github.com/vuejs/vue-loader/issues/1395

[JounQin]

fix vuejs/vue-loader#1395

[JounQin]

@yyx990803 @sodatea Would you like to review this PR or related issue? It really sucks and it only starts happening recently because css-loader removes minimize feature.

[znck]

Purpose of postcss plugin trim is to remove prepended new lines (used to keep line numbers same as in .vue file). It cannot minimize the css so putting '\n' or '' does not matter. In fact '\n' is correct value here in most cases as newline is there in actual source code, e.g.:

<style>
.foo {
  color: red;
}
</style>

[JounQin]

@znck Did you review the original issue? It makes impossible to minify css totally by postcss anymore.

[znck]

CSS minification should run after @vue/component-compiler-utils is done processing scoped styles and trimming prepended new-lines. To my understanding, it's working correctly and vue-loader has some issue in this regard, vuejs/vue-loader#1395 should be fixed there.

[JounQin]

CSS minification of css-loader has bean removed, so we're using postcss with cssnano to minify CSS, it is really bad to enforce user to minify CSS again after processing postcss.

[znck]

Using a postcss plugin to minimise is good approach.
Does trim creates any problem when used with cssnano?
If so, we can move trim and scoped plugins to the top of list.

component-compiler-utils/lib/compileStyle.ts

Lines 65 to 70 in c494c69

	if (trim) {
	plugins.push(trimPlugin())
	}
	if (scoped) {
	plugins.push(scopedPlugin(id))
	}

[JounQin]

The trim plugin is running after cssnano or user customer postcss plugins now, what causes the original issue, and that's why I changed the implement of the trim plugin.

component-compiler-utils itself is running after processing any preprocessors now if we are using vue-loader, what means it has been compiled into css and postprocessed by postcss, postcssPlugins here is always undefined.