diff --git a/README.md b/README.md index 981edf4..1e48ad5 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,5 @@ +## ATTENTION: this project is not actively maintained for now (I still push some code once in a while), if you want to see improvements or get support, please consider [sponsoring me](https://github.com/sponsors/egoist). + ![styled-vue](https://user-images.githubusercontent.com/8784712/50833110-30b41180-138b-11e9-9ddd-20af6afc1747.png) --- diff --git a/example/App.vue b/example/App.vue index 0b070fc..493ee37 100644 --- a/example/App.vue +++ b/example/App.vue @@ -31,6 +31,7 @@ export default { } ul { list-style: square; + color: ${vm => vm.color}; } `, data() { diff --git a/examples/nuxt/package.json b/examples/nuxt/package.json index 0abd8a9..2c3a0d0 100644 --- a/examples/nuxt/package.json +++ b/examples/nuxt/package.json @@ -5,6 +5,6 @@ "license": "MIT", "dependencies": { "nuxt": "^2.11.0", - "styled-vue": "^0.3.2" + "styled-vue": "^0.3.3" } } diff --git a/examples/nuxt/pages/index.vue b/examples/nuxt/pages/index.vue index 7d09c7e..373772d 100644 --- a/examples/nuxt/pages/index.vue +++ b/examples/nuxt/pages/index.vue @@ -2,7 +2,7 @@

Hello Nuxt

And hello styled-vue

-

This is awesome!

+

This is awesome! (maybe)

@@ -17,10 +17,6 @@ export default { h2 { font-style: italic; } - p { - color: #999; - background: ${vm => vm.textBg}; - } `, globalStyle: css` body { @@ -29,8 +25,7 @@ export default { `, data() { return { - bg: 'cyan', - textBg: 'red' + bg: 'cyan' } } } diff --git a/examples/nuxt/yarn.lock b/examples/nuxt/yarn.lock index 0b0d607..c170338 100644 --- a/examples/nuxt/yarn.lock +++ b/examples/nuxt/yarn.lock @@ -6264,10 +6264,10 @@ style-resources-loader@^1.3.2: loader-utils "^1.2.3" schema-utils "^2.6.1" -styled-vue@^0.3.2: - version "0.3.2" - resolved "https://registry.yarnpkg.com/styled-vue/-/styled-vue-0.3.2.tgz#8d50b40a9476ed192c6aff1d9308d8f2bf830782" - integrity sha512-c/TZ9MQUAXStop0z/f8xyCglKO+1Co+Tznv1+cKLN2pdTBSa204z6eDPdiA2NbGQlBjojAV4IsVjDniKat5eDQ== +styled-vue@^0.3.3: + version "0.3.3" + resolved "https://registry.yarnpkg.com/styled-vue/-/styled-vue-0.3.3.tgz#71ddd1a5b561610b894bb610e4c9f606a0fd7586" + integrity sha512-99thrkt8jWC7D/gYOk2C88CSlq6Ypw0q5ggoMe+XxjetX/w6dLYDQXyY8OydEgDXJ9vvE9+VUBxVIabisO7jpA== dependencies: "@babel/generator" "^7.2.2" "@babel/parser" "^7.2.3" diff --git a/lib/index.js b/lib/index.js index c93fd28..a8ba980 100644 --- a/lib/index.js +++ b/lib/index.js @@ -1,3 +1,4 @@ +/* eslint-disable */ Object.defineProperty(exports, '__esModule', { value: true }) function css(_) { @@ -8,11 +9,10 @@ function css(_) { function StyledVue(Vue) { Vue.component('styled-vue-global-css', { - render(h) { - const globalStyle = this.$parent.$options.globalStyle(this.$parent) - let css = '' - // eslint-disable-next-line guard-for-in - for (const key in globalStyle) { + render: function(h) { + var globalStyle = this.$parent.$options.globalStyle(this.$parent) + var css = '' + for (var key in globalStyle) { css += key + ':' + globalStyle[key] + ';' } return h('style', {}, [':root {' + css + '}']) diff --git a/lib/parseScript.js b/lib/parseScript.js index 79599f1..5d6e7be 100644 --- a/lib/parseScript.js +++ b/lib/parseScript.js @@ -2,6 +2,7 @@ const parser = require('@babel/parser') const traverse = require('@babel/traverse') const generator = require('@babel/generator') const t = require('@babel/types') +const hashSum = require('hash-sum') const { UNITS_RE } = require('./units') const LANGS = ['css', 'stylus', 'less', 'sass', 'scss'] @@ -26,17 +27,17 @@ module.exports = script => { ] }) - const parseTaggedTemplate = (ref, isGlobal) => { + const parseTaggedTemplate = ref => { const { quasi } = ref.node const quasis = [] const vars = [] const varDeclarations = [] - const variablePrefix = isGlobal ? 'gv' : `v` for (const [i, q] of quasi.quasis.entries()) { quasis.push(q) if (quasi.expressions[i]) { - const value = `var(--${variablePrefix}${i})` + const variableId = `v${hashSum(quasi.expressions[i])}` + const value = `var(--${variableId})` quasis.push({ type: 'TemplateElement', value: { raw: value, cooked: value } @@ -58,16 +59,13 @@ module.exports = script => { // var v0 = vm => vm.color varDeclarations.push( t.variableDeclaration('var', [ - t.variableDeclarator( - t.identifier(`${variablePrefix}${i}`), - quasi.expressions[i] - ) + t.variableDeclarator(t.identifier(variableId), quasi.expressions[i]) ]) ) // { '--v0': v0(vm) } // { '--v0': v0(vm) + unit } - const id = t.identifier(`${variablePrefix}${i}`) + const id = t.identifier(variableId) const expType = quasi.expressions[i].type const mustBeFunction = [ 'FunctionExpression', @@ -89,7 +87,7 @@ module.exports = script => { } vars.push( t.objectProperty( - t.stringLiteral(`--${variablePrefix}${i}`), + t.stringLiteral(`--${variableId}`), mustBeFunction ? getValue(true) : mustNotBeFunction @@ -166,8 +164,7 @@ module.exports = script => { const isGlobal = propertyPath.node.key.name === 'globalStyle' const { vars, varDeclarations, extractedStyle } = parseTaggedTemplate( - ref, - isGlobal + ref ) if (isGlobal) { globalStyle = extractedStyle diff --git a/package.json b/package.json index 6ace1d1..4075332 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@babel/parser": "^7.2.3", "@babel/traverse": "^7.2.3", "@babel/types": "^7.2.2", + "hash-sum": "^2.0.0", "posthtml": "^0.11.3", "vue-template-compiler": "^2.6.11" }, @@ -58,7 +59,8 @@ "jest" ], "rules": { - "unicorn/filename-case": "off" + "unicorn/filename-case": "off", + "unicorn/no-abusive-eslint-disable": "off" } }, "husky": { diff --git a/test/__snapshots__/parseComponent.test.js.snap b/test/__snapshots__/parseComponent.test.js.snap index 179d5f2..689d525 100644 --- a/test/__snapshots__/parseComponent.test.js.snap +++ b/test/__snapshots__/parseComponent.test.js.snap @@ -115,10 +115,10 @@ export default { style: undefined // No CSS variables , globalStyle: function (vm) { - var gv0 = vm => vm.fontSize; + var v3b73e5fa = vm => vm.fontSize; return { - \\"--gv0\\": gv0(vm) + \\"--v3b73e5fa\\": v3b73e5fa(vm) }; } }; @@ -126,7 +126,7 @@ export default { @@ -237,12 +237,12 @@ exports[`simple 1`] = `