fix: provide scopeId to template compiler when the component has scoped styles (#337)

przemkow · znck · web-flow · commit 1fec2c56c9fc · 2020-05-12T01:44:22.000+05:30
Co-authored-by: Rahul Kadyan &lt;hi@znck.me&gt;
diff --git a/cookbook/ssr/package.json b/cookbook/ssr/package.json
@@ -5,7 +5,7 @@
   },
   "main": "./dist/MyComponent.js",
   "devDependencies": {
-    "rollup": "^0.59.4",
+    "rollup": "^1.1.0",
     "rollup-plugin-vue": "link:../.."
   }
 }
diff --git a/cookbook/ssr/src/MyComponent.vue b/cookbook/ssr/src/MyComponent.vue
@@ -1,5 +1,7 @@
 <template>
-  <h1>Hello {{ name }}</h1>
+  <div class="component-root-node">
+    <h1>Hello {{ name }}</h1>
+  </div>
 </template>
 
 <script>
@@ -11,6 +13,10 @@ export default {
 </script>
 
 <style scoped>
+.component-root-node {
+  background: blue;
+}
+
 h1 {
   color: red;
 }
diff --git a/src/index.ts b/src/index.ts
@@ -22,6 +22,7 @@ import { parse, SFCDescriptor, SFCBlock } from '@vue/component-compiler-utils'
 import debug from 'debug'
 import {
   VueTemplateCompiler,
+  VueTemplateCompilerOptions,
   VueTemplateCompilerParseOptions
 } from '@vue/component-compiler-utils/dist/types'
 
@@ -159,6 +160,20 @@ export interface VuePluginOptions {
 
   beforeAssemble?(descriptor: DescriptorCompileResult): DescriptorCompileResult
 }
+
+// Official VueTemplateCompilerOptions does not expose scopeId as a part of public API
+// ScopeId is required to correctly compile Vue template with SSR optimization.
+interface TemplateOptionsRollup extends TemplateOptions {
+  compilerOptions: VueTemplateCompilerOptions & {
+    scopeId?: string
+  }
+}
+
+interface VueCompilerOptions {
+  script?: ScriptOptions | undefined;
+  style?: StyleOptions | undefined;
+  template?: TemplateOptionsRollup | undefined;
+}
 /**
  * Rollup plugin for handling .vue files.
  */
@@ -242,11 +257,25 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
     opts.template.isProduction = isProduction
   }
 
-  const compiler = createDefaultCompiler(opts)
   const descriptors = new Map<string, SFCDescriptor>()
 
   if (opts.css === false) d('Running in CSS extract mode')
 
+  const getCompiler = ({ scopeId }: { scopeId?: string}) => {
+    const options: VueCompilerOptions = { ...opts }
+
+    options.template = {
+      ...options.template!,
+      compilerOptions: {
+        ...(options.template!.compilerOptions
+          ? options.template!.compilerOptions
+          : {}),
+        scopeId: scopeId
+      }
+    }
+
+    return createDefaultCompiler(options)
+  }
   function prependStyle(
     id: string,
     lang: string,
@@ -344,6 +373,11 @@ export default function vue(opts: Partial<VuePluginOptions> = {}): Plugin {
             ? hash(path.basename(filename) + source)
             : hash(filename + source))
 
+        const hasScopedStyles = descriptor.styles.some(style => !!style.scoped)
+        const compiler = getCompiler({
+          scopeId: hasScopedStyles ? scopeId : undefined
+        })
+
         const styles = await Promise.all(
           descriptor.styles.map(async style => {
             if (style.content) {

Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`},`
`6`	`6`	`"main": "./dist/MyComponent.js",`
`7`	`7`	`"devDependencies": {`
`8`		`- "rollup": "^0.59.4",`
	`8`	`+ "rollup": "^1.1.0",`
`9`	`9`	`"rollup-plugin-vue": "link:../.."`
`10`	`10`	`}`
`11`	`11`	`}`