fix: make ssr work

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist/
+.saber

README.md

@@ -71,7 +71,7 @@ new Vue({
     }
   },
   render() {
-    const Button = styled.button`
+    const Button = styled('button')`
       color: ${props => (props.theme === 'dark' ? 'white' : 'black')};
     `
     return <Button>Hello</Button>

example/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { styled } from 'vue-emotion'
+import { styled } from '@egoist/vue-emotion'
 
 const Button = styled('button')`
   color: ${props => props.theme.color};

package.json

@@ -55,6 +55,7 @@
     "lint-staged": "^9.4.0",
     "markdown-toc": "^1.2.0",
     "poi": "^12.7.2",
+    "saber": "^0.10.2",
     "vue": "^2.6.10",
     "vue-template-compiler": "^2.6.10",
     "xo": "^0.25.3"

poi.config.js

@@ -6,6 +6,6 @@ module.exports = {
     dir: 'example/dist'
   },
   chainWebpack(config) {
-    config.resolve.alias.set('vue-emotion$', path.resolve('src/index.js'))
+    config.resolve.alias.set('@egoist/vue-emotion$', path.resolve('src/index.js'))
   }
 }

src/global.js

@@ -1,7 +1,7 @@
 import { StyleSheet } from '@emotion/sheet'
 import { serializeStyles } from '@emotion/serialize'
 import { insertStyles } from '@emotion/utils'
-import { cache, IS_BROWSER } from './shared'
+import { getCache, IS_BROWSER } from './shared'
 
 export const Global = {
   props: {
@@ -15,6 +15,7 @@ export const Global = {
   },
 
   created() {
+    this.cache = getCache()
     this.init()
 
     if (this.watchStyles) {
@@ -36,19 +37,19 @@ export const Global = {
 
   mounted() {
     this.sheet = new StyleSheet({
-      key: `${cache.key}-global`,
-      nonce: cache.sheet.nonce,
-      container: cache.sheet.container
+      key: `${this.cache.key}-global`,
+      nonce: this.cache.sheet.nonce,
+      container: this.cache.sheet.container
     })
     const node = document.querySelector(
-      `style[data-emotion-${cache.key}="${this.serialized.name}"]`
+      `style[data-emotion-${this.cache.key}="${this.serialized.name}"]`
     )
     if (node !== null) {
       this.sheet.tags.push(node)
     }
 
-    if (cache.sheet.tags.length > 0) {
-      this.sheet.before = cache.sheet.tags[0]
+    if (this.cache.sheet.tags.length > 0) {
+      this.sheet.before = this.cache.sheet.tags[0]
     }
 
     this.insertStyles()
@@ -82,7 +83,7 @@ export const Global = {
         this.sheet.flush()
       }
 
-      cache.insert('', this.serialized, this.sheet, false)
+      this.cache.insert('', this.serialized, this.sheet, false)
     }
   },
 
@@ -99,9 +100,9 @@ export const Global = {
         next = next.next
       }
 
-      const shouldCache = cache.compat === true
+      const shouldCache = this.cache.compat === true
 
-      const rules = cache.insert(
+      const rules = this.cache.insert(
         '',
         { name: serializedNames, styles: serializedStyles },
         this.sheet,
@@ -111,9 +112,9 @@ export const Global = {
       if (!shouldCache) {
         return h('style', {
           domProps: {
-            [`data-emotion-${cache.key}`]: serializedNames,
+            [`data-emotion-${this.cache.key}`]: serializedNames,
             innerHTML: rules,
-            nonce: cache.sheet.nonce
+            nonce: this.cache.sheet.nonce
           }
         })
       }

src/shared.js

@@ -1,5 +1,14 @@
 import createCache from '@emotion/cache'
 
-export const cache = createCache()
-
 export const IS_BROWSER = typeof window !== 'undefined'
+
+let cache = IS_BROWSER ? createCache() : null
+
+export const getCache = () => {
+  if (IS_BROWSER) {
+    cache = cache || createCache()
+    return cache
+  }
+  return createCache()
+}
+

src/styled.js

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import { getRegisteredStyles, insertStyles } from '@emotion/utils'
 import { serializeStyles } from '@emotion/serialize'
-import { cache, IS_BROWSER } from './shared'
+import { getCache, IS_BROWSER } from './shared'
 
 const ILLEGAL_ESCAPE_SEQUENCE_ERROR =
   process.env.NODE_ENV === 'production' ?
@@ -58,9 +58,14 @@ const createStyled = (tag, options = {}) => {
     const Styled = {
       functional: true,
 
-      inject: ['theme'],
+      inject: {
+        theme: {
+          default: undefined
+        }
+      },
 
       render(h, { data, children, parent, props, injections }) {
+        const cache = getCache()
         const { as, value, ...restAttrs } = data.attrs || {}
 
         let className = data.staticClass ? `${data.staticClass} ` : ''
@@ -109,7 +114,7 @@ const createStyled = (tag, options = {}) => {
           },
           children
         )
-
+console.log(IS_BROWSER, rules)
         if (!IS_BROWSER && rules !== undefined) {
           let serializedNames = serialized.name
           let { next } = serialized

ssr-example/pages/index.js

@@ -0,0 +1,15 @@
+import { styled } from '@egoist/vue-emotion'
+
+const Button = styled('button')`
+  border: 2px solid pink;
+  padding: 10px;
+  font-size: 1rem;
+`
+
+export default {
+  render(h) {
+    return h('div', {}, [
+      h(Button, {}, ['Hello'])
+    ])
+  }
+}

ssr-example/saber-node.js

@@ -0,0 +1,5 @@
+const path = require('path')
+
+exports.chainWebpack = config => {
+  config.resolve.alias.set('@egoist/vue-emotion', path.join(__dirname, '../src'))
+}