wip: css vars hash

package.json

@@ -63,7 +63,6 @@
     ]
   },
   "devDependencies": {
-    "esbuild": "0.14.5",
     "@babel/eslint-parser": "^7.15.8",
     "@babel/generator": "^7.12.11",
     "@babel/parser": "^7.12.11",
@@ -89,6 +88,7 @@
     "codesandbox": "^2.2.3",
     "cross-env": "^7.0.3",
     "cssnano": "^5.0.5",
+    "esbuild": "0.14.5",
     "eslint": "^7.20.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^16.0.2",
@@ -113,7 +113,8 @@
     "typescript": "^4.4.2",
     "vite": "^2.1.3",
     "vue": "^3.2.12",
-    "vue-router": "^4.0.5"
+    "vue-router": "^4.0.5",
+    "@emotion/hash": "^0.8.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"

src/_mixins/index.ts

@@ -11,3 +11,4 @@ export { default as useLocale } from './use-locale'
 export { default as useStyle } from './use-style'
 export { default as useHljs } from './use-hljs'
 export type { Hljs } from './use-hljs'
+export { useCssVarsClass } from './use-css-vars-class'

src/_mixins/use-css-vars-class.ts

@@ -0,0 +1,26 @@
+import { Ref, ref, watchEffect } from 'vue'
+import hash from '@emotion/hash'
+import { c } from '../_utils/cssr'
+
+// window.xxx = 0
+
+export function useCssVarsClass (
+  cssVarsRef: Ref<Record<string, string>>
+): Ref<string> {
+  const cssVarsClassRef = ref('')
+  watchEffect(() => {
+    // window.xxx -= performance.now()
+    const cssVars = cssVarsRef.value
+    let style = ''
+    for (const key in cssVars) {
+      style += `${key}: ${cssVars[key]};`
+    }
+    const styleHash = hash(style)
+    cssVarsClassRef.value = `c${styleHash}`
+    c(`.c${styleHash}`, style).mount({
+      id: styleHash
+    })
+    // window.xxx += performance.now()
+  })
+  return cssVarsClassRef
+}