diff --git a/README.md b/README.md index a823e9f..8a6b6dd 100644 --- 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 - .title { background:red } + .title { background:red } // .title [data-v-] {background:red} - - @import "./assets/test.css" - - - -``` -or - -```html - - - - - - ``` @@ -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 index ba52d4a..439934e 100644 --- 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 index 254d276..fdcdba8 100644 --- 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) => {