vue-emotion

vue-emotion

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

Install

yarn add emotion vue-emotion

Table of Contents

• Usage
  • Theming
  • Server-side rendering
• Contributing
• Author

Usage

Add the babel plugin first:

{
  "plugins": [
    "emotion/babel"
  ]
}

Then create your styled component:

import styled from 'vue-emotion'

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

const PinkButton = styled(Button)`
  color: pink
`

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

Refer to https://github.com/tkh44/emotion for more docs.

Theming

Basically it works like styled-theming:

import styled, { theme } from 'vue-emotion'

const color = theme('mode', {
  light: 'black',
  dark: 'white'
})

const backgroundColor = theme('mode', {
  light: 'white',
  dark: 'black'
})

const Button = styled('button')`
  color: ${color};
  background-color: ${backgroundColor};
  border: 1px solid ${color};
  padding: 10px 20px;
`

new Vue({
  data: {
    theme: {
      mode: 'light'
    }
  },

  provide() {
    return {
      theme: this.theme
    }
  },

  render() {
    return <Button>hi</Button>
  }
})

Server-side rendering

The easy way, use emotion's extractStatic mode:

// .babelrc
{
  "plugins": [
    ["emotion/babel", { "extractStatic": true }]
  ]
}

Check out the doc about extractStatic.

Then when you write something like:

import styled from 'vue-emotion'

const H1 = styled('h1')`
  color: #ffd43b;
`

It will be compiled to:

import './h1.emotion.css'
import styled from 'vue-emotion'

const H1 = styled('h1', 'css-duiy4a')

Basically you can treat .emotion.css as normal CSS file and configure the loader for it in webpack config, since we're trying to make SSR work, you will need vue-style-loader instead of style-loader for it.

The alternative way

Check out https://github.com/tkh44/emotion/blob/master/docs/ssr.md, it does not support streaming though.

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