vue-emotion

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

Support For Vue3.

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'

import { createApp } from 'vue'
import App from './App.vue'
import { VueEmotion } from '../../src/index'

import './index.css'

const app = createApp(App, { mixins: [VueEmotion] })

app.mount('#app')

Create your styled component:

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

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

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

const Component = {
  components: {
    Button,
    PinkButton,
  },
  setup() {
    return () => {
      return (
        <div>
          <Button>normal button</Button>
          <PinkButton>pink button</PinkButton>
        </div>
      )
    }
  }
}

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

Theming

Using provide/inject:

const Component = {
  components: {
    Button,
    PinkButton,
  },
  provide() {
    return {
      theme: this.theme
    }
  },
  data() {
    return {
      theme: 'dark'
    }
  },
  setup() {
    return () => {
      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')

// `html` is the rendered HTML by vue-server-renderer
const style = renderStyle(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