fix: use hash-sum to get variable id

Author: egoist

example/App.vue

@@ -31,6 +31,7 @@ export default {
     }
     ul {
       list-style: square;
+      color: ${vm => vm.color};
     }
   `,
   data() {

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

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"
   },

yarn.lock

@@ -5258,6 +5258,11 @@ hash-sum@^1.0.2:
   resolved "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
   integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=
 
+hash-sum@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
+  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
+
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
   resolved "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
@@ -7846,14 +7851,6 @@ minipass@^2.2.1, minipass@^2.3.3, minipass@^2.3.4:
     safe-buffer "^5.1.2"
     yallist "^3.0.0"
 
-minipass@^2.8.6, minipass@^2.9.0:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
-  integrity sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
 minipass@^3.0.0, minipass@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.1.tgz#7607ce778472a185ad6d89082aa2070f79cedcd5"
@@ -7868,13 +7865,6 @@ minizlib@^1.1.1:
   dependencies:
     minipass "^2.2.1"
 
-minizlib@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.3.3.tgz#2290de96818a34c29551c8a8d301216bd65a861d"
-  integrity sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==
-  dependencies:
-    minipass "^2.9.0"
-
 mississippi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/mississippi/-/mississippi-2.0.0.tgz#3442a508fafc28500486feea99409676e4ee5a6f"
@@ -8151,22 +8141,6 @@ node-notifier@^5.2.1:
     shellwords "^0.1.1"
     which "^1.3.0"
 
-node-pre-gyp@*:
-  version "0.14.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
-  integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4.4.2"
-
 node-pre-gyp@^0.10.0:
   version "0.10.3"
   resolved "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz#3070040716afdc778747b61b6887bf78880b80fc"
@@ -11559,19 +11533,6 @@ tar@^4, tar@^4.4.3, tar@^4.4.8:
     safe-buffer "^5.1.2"
     yallist "^3.0.2"
 
-tar@^4.4.2:
-  version "4.4.13"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
-  integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
-  dependencies:
-    chownr "^1.1.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.8.6"
-    minizlib "^1.2.1"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.3"
-
 term-size@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
@@ -12729,11 +12690,6 @@ yallist@^3.0.0, yallist@^3.0.2:
   resolved "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz#b4b049e314be545e3ce802236d6cd22cd91c3de9"
   integrity sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==
 
-yallist@^3.0.3:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
-  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
-
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"