fix: keep style index consistent when filtering styles (#1496)

* fix: keep index when filtering styles

* test: update test fixture to address issue

lib/codegen/styleInjection.js

@@ -70,26 +70,31 @@ module.exports = function genStyleInjectionCode (
  }
  }
 
- // filter out empty styles (with no `src` specified or only contains whitespaces)
- styles = styles.filter(style => style.src || nonWhitespaceRE.test(style.content))
+ // empty styles: with no `src` specified or only contains whitespaces
+ const isNotEmptyStyle = style => style.src || nonWhitespaceRE.test(style.content)
  // explicit injection is needed in SSR (for critical CSS collection)
  // or in Shadow Mode (for injection into shadow root)
  // In these modes, vue-style-loader exports objects with the __inject__
  // method; otherwise we simply import the styles.
  if (!needsExplicitInjection) {
  styles.forEach((style, i) => {
- const request = genStyleRequest(style, i)
- styleImportsCode += `import style${i} from ${request}\n`
- if (style.module) genCSSModulesCode(style, request, i)
+ // do not generate requests for empty styles
+ if (isNotEmptyStyle(style)) {
+ const request = genStyleRequest(style, i)
+ styleImportsCode += `import style${i} from ${request}\n`
+ if (style.module) genCSSModulesCode(style, request, i)
+ }
  })
  } else {
  styles.forEach((style, i) => {
- const request = genStyleRequest(style, i)
- styleInjectionCode += (
- `var style${i} = require(${request})\n` +
- `if (style${i}.__inject__) style${i}.__inject__(context)\n`
- )
- if (style.module) genCSSModulesCode(style, request, i)
+ if (isNotEmptyStyle(style)) {
+ const request = genStyleRequest(style, i)
+ styleInjectionCode += (
+ `var style${i} = require(${request})\n` +
+ `if (style${i}.__inject__) style${i}.__inject__(context)\n`
+ )
+ if (style.module) genCSSModulesCode(style, request, i)
+ }
  })
  }
 

test/fixtures/basic.vue

@@ -12,6 +12,11 @@ export default {
 }
 </script>
 
+<style>
+
+</style>
+
+
 <style>
 comp-a h2 {
  color: #f00;