emotion-vue v0.2.0

emotion-vue

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

Install

yarn add emotion emotion-vue

Usage

Add the babel plugin first:

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

Then create your styled component:

import styled from 'emotion-vue'

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 'emotion-vue'

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>
  }
})

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

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

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