@Style scoped update

joon610 · Aug 21, 2019 · 9332c9a · 9332c9a
1 parent 819a1b5
commit 9332c9a
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,10 @@
 # Vue Corator
 
 
+## Update
+- [x] @style: changed global to scoped  2019/08/22
+
+
 ## License
 
 MIT License
@@ -84,23 +88,8 @@ See also: [Runtime + Compiler vs. Runtime only.](https://vuejs.org/v2/guide/inst
 <template>
   <div>
     <styleTagName1>
-      .title { background:red }
+      .title { background:red }    // .title [data-v-<hash>] {background:red}
     </styleTagName1>   
-    <styleTagName2>
-       @import "./assets/test.css"
-    </styleTagName2> 
-  </div>
-</template>
-```
-or
-
-```html
-<template>
-  <div>
-    <styleTagName1>
-    </styleTagName1>   
-    <styleTagName2>
-    </styleTagName2> 
   </div>
 </template>
 ```
@@ -116,11 +105,6 @@ export default class YourComponent extends Vue {
         .title { background:pink }
     `;
   }
-  @Style()
-  private styleTagName2() {
-    return '@import "./assets/test.css"';
-  }
-
 }
 ```
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-corator",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "this is TypeScript Vue decorator.",
   "main": "lib/vue-corator.d.ts",
   "module": "lib/vue-corator.js",

diff --git a/src/vue-corator.ts b/src/vue-corator.ts
@@ -15,22 +15,24 @@ export function Super(component: any) {
 
 export function Style() {
     return (target: Vue, key: string, descriptor: PropertyDescriptor) => {
-        const style = descriptor.value();
+      const style = descriptor.value();
+      createDecorator((options, k) => {
         const newComponent = {
-            // @ts-ignore
-            render(createElement: any) {
-                return createElement('style',
-                    { attrs: { type: 'text/css', lang: 'css' } },
-                    // @ts-ignore
-                    [this.$slots.default || style]);
-            }
+          // @ts-ignore
+          render(createElement: any) {
+              // @ts-ignore
+            const styleScoped = style.replace(/{./gi, '[' + options._scopeId + '] {');
+            return createElement('style',
+                  { attrs: { type: 'text/css', lang: 'css'} },
+                  // @ts-ignore
+                  [this.$slots.default || styleScoped ]);
+          }
         };
-        createDecorator((options, k) => {
-            options.components = options.components || {};
-            options.components[key] = newComponent;
-        })(target, key);
-  };
-}
+        options.components = options.components || {};
+        options.components[key] = newComponent;
+      })(target, key);
+    };
+  }
 
 export function NextTick() {
     return (target: Vue, key: string, descriptor: any) => {