search

vuejs / vueify

Browserify transform for single-file Vue components
MIT License
1.17k stars 152 forks source link

Fix errors with scoped modules #154

Closed danieldiekmeier closed 7 years ago

danieldiekmeier commented 7 years ago

I noticed some problems with the scoped modules, especially when using Watchify and the extract-css plugin.

These bugs do not occur when restarting Browserify before every render, but get really annoying when using Watchify and keeping the program state around.

There were two bugs that his Pull Request addresses:

  1. When changing nothing except the scoped attribute on a <style> tag, the CSS would not get updated. This is because the value of scoped wasn't part of the cache key. I fixed that by simply adding the scoped variable to the key.

  2. When Watchify did another bundling, the addId PostCSS plugin from lib/style-rewriter.js got added another time, but didn't get removed if the component was not scoped. This led to multiple [data-v-x] ids on selectors as well as ids on selectors that shouldn't even be scoped. For example:

.Menu[data-v-3][data-v-3][data-v-3] {
  display: flex;
}

I fixed that by ensuring the plugins array only has a maximum of 1 addId function, and by removing the function if the component is not scoped.