Commit e02d9375 authored by JK's avatar JK Committed by Evan You

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

* fix: keep index when filtering styles

* test: update test fixture to address issue
parent e1d40711
...@@ -70,26 +70,31 @@ module.exports = function genStyleInjectionCode ( ...@@ -70,26 +70,31 @@ module.exports = function genStyleInjectionCode (
} }
} }
// filter out empty styles (with no `src` specified or only contains whitespaces) // empty styles: with no `src` specified or only contains whitespaces
styles = styles.filter(style => style.src || nonWhitespaceRE.test(style.content)) const isNotEmptyStyle = style => style.src || nonWhitespaceRE.test(style.content)
// explicit injection is needed in SSR (for critical CSS collection) // explicit injection is needed in SSR (for critical CSS collection)
// or in Shadow Mode (for injection into shadow root) // or in Shadow Mode (for injection into shadow root)
// In these modes, vue-style-loader exports objects with the __inject__ // In these modes, vue-style-loader exports objects with the __inject__
// method; otherwise we simply import the styles. // method; otherwise we simply import the styles.
if (!needsExplicitInjection) { if (!needsExplicitInjection) {
styles.forEach((style, i) => { styles.forEach((style, i) => {
const request = genStyleRequest(style, i) // do not generate requests for empty styles
styleImportsCode += `import style${i} from ${request}\n` if (isNotEmptyStyle(style)) {
if (style.module) genCSSModulesCode(style, request, i) const request = genStyleRequest(style, i)
styleImportsCode += `import style${i} from ${request}\n`
if (style.module) genCSSModulesCode(style, request, i)
}
}) })
} else { } else {
styles.forEach((style, i) => { styles.forEach((style, i) => {
const request = genStyleRequest(style, i) if (isNotEmptyStyle(style)) {
styleInjectionCode += ( const request = genStyleRequest(style, i)
`var style${i} = require(${request})\n` + styleInjectionCode += (
`if (style${i}.__inject__) style${i}.__inject__(context)\n` `var style${i} = require(${request})\n` +
) `if (style${i}.__inject__) style${i}.__inject__(context)\n`
if (style.module) genCSSModulesCode(style, request, i) )
if (style.module) genCSSModulesCode(style, request, i)
}
}) })
} }
......
...@@ -12,6 +12,11 @@ export default { ...@@ -12,6 +12,11 @@ export default {
} }
</script> </script>
<style>
</style>
<style> <style>
comp-a h2 { comp-a h2 {
color: #f00; color: #f00;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment