@egoist/vue-emotion

yarn add @egoist/vue-emotion

• Caveats

• Contributing
• Author

Usage

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

Vue.use(VueEmotion)
````

Create your styled component:

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

Theming

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

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

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)

```js
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

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