search

vuejs / component-compiler-utils

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

fix(trim): don't insert line break #40

Closed manniL closed 5 years ago

manniL commented 5 years ago

Currently the component CSS is separated by a line break (caused by the trim stylePlugin). Though this can be helpful for debugging, the characters are not necessary at all (at least from what I know).

Current state

image

With fix

image

Related issues and PRs

https://github.com/vuejs/component-compiler-utils/pull/36 https://github.com/vuejs/vue-loader/issues/1395 https://github.com/cssnano/cssnano/issues/586 https://github.com/nuxt/nuxt.js/issues/4311

yyx990803 commented 5 years ago

See https://github.com/vuejs/vue-loader/issues/1395#issuecomment-446283443

yyx990803 commented 5 years ago

Ok, so the original intention for the trim plugin was to remove the whitespace around the CSS because it is extracted from the <style> section inside a Vue file (with other parts of the Vue file padded as blank lines to preserve proper line numbers).

Always setting it to an empty string will make the dynamic inserted CSS in development harder to read. So in 2603ee238a6c8114094a1339a5060c629c0b12e0 I've made it so that it only sets it to a newline when the whitespace has not been already trimmed (e.g. by cssnano).

yyx990803 commented 5 years ago

Fix is out in 2.3.1.