feat(compiler-vapor): support <style scoped>

README.md

@@ -54,6 +54,7 @@ PR are welcome!
   - [x] CodegenContext
   - [x] indent
   - [x] Source map
+  - [x] scope id
   - [ ] Function mode
   - [ ] SSR
 - [ ] Built-in Components

packages/compiler-vapor/src/compile.ts

@@ -49,10 +49,9 @@ export function compile(
   const prefixIdentifiers =
     !__BROWSER__ && (options.prefixIdentifiers === true || isModuleMode)
 
-  // TODO scope id
-  // if (options.scopeId && !isModuleMode) {
-  //   onError(createCompilerError(ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED))
-  // }
+  if (options.scopeId && !isModuleMode) {
+    onError(createCompilerError(ErrorCodes.X_SCOPE_ID_NOT_SUPPORTED))
+  }
 
   const resolvedOptions = extend({}, options, {
     prefixIdentifiers,

packages/compiler-vapor/src/transforms/transformElement.ts

@@ -53,6 +53,10 @@ export const transformElement: NodeTransform = (node, context) => {
         isComponent,
       )
     }
+    const { scopeId } = context.options
+    if (scopeId) {
+      context.template += ` ${scopeId}`
+    }
     context.template += `>` + context.childrenTemplate.join('')
 
     // TODO remove unnecessary close tag, e.g. if it's the last element of the template