search

vuejs / component-compiler-utils

Lower level utilities for compiling Vue single file components
320 stars 75 forks source link

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

Closed JounQin closed 5 years ago

JounQin commented 5 years ago

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

JounQin commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

znck commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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. https://github.com/vuejs/component-compiler-utils/blob/c494c699994ca7a58c7c9c7e799a3ffb7e2bfb27/lib/compileStyle.ts#L65-L70

JounQin commented 5 years ago

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.