d-corler/vue-emotion

Seamlessly use emotion (CSS-in-JS) with Vue.js

vue-emotion

emotion is the Next Generation of CSS-in-JS.

Install

yarn add @egoist/vue-emotion

Table of Contents

• Usage
  • Theming
  • Global styles
  • Server-side rendering
• Caveats
  • Component selector doesn't work (yet)
• Contributing
• Author

Usage

Use the plugin:

import { VueEmotion } from '@egoist/vue-emotion'

Vue.use(VueEmotion)

Create your styled component:

import { styled } from '@egoist/vue-emotion'

const Button = styled('button')`
  font-size: 15px;
`

const PinkButton = styled(Button)`
  color: hotpink;
`

new Vue({
  render() {
    return (
      <div>
        <Button>normal button</Button>
        <PinkButton>pink button</PinkButton>
      </div>
    )
  }
})

Refer to https://emotion.sh for more docs.

Theming

Using provide/inject:

new Vue({
  provide() {
    return {
      theme: this.theme
    }
  },
  data() {
    return {
      theme: 'dark'
    }
  },
  render() {
    const Button = styled('button')`
      color: ${props => (props.theme === 'dark' ? 'white' : 'black')};
    `
    return <Button>Hello</Button>
  }
})

I do know that provide/inject is NOT recommended in generic application code, but before we find a better solution, use it as a work-around.

Global styles

<template>
  <div id="app">
    <GlobalStyle />
    <!-- rest of your app -->
  </div>
</template>

<script>
import { createGlobalStyle } from '@egoist/vue-emotion'

const GlobalStyle = createGlobalStyle`
  body {
    background: red;
  }
`

export default {
  components: {
    GlobalStyle
  }
}
</script>

Server-side rendering

You can extract critical CSS like this during server-side rendering:

const { renderStyle } = require('@egoist/vue-emotion/server')

// `cache` is the $emotionCache property on your Vue app instance
// `html` is the rendered HTML by vue-server-renderer
const style = renderStyle(cache, html)
// <style>...</style>

Caveats

Component selector doesn't work (yet)

const Container = styled.div`
  ${Button} {
    color: red;
  }
`

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

vue-emotion © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

github.com/egoist · GitHub @EGOIST · Twitter @_egoistlily