@egoist/vue-emotion

    0.6.2 • Public • Published

    vue-emotion

    NPM version NPM downloads CircleCI donate

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

    Install

    yarn add @egoist/vue-emotion

    Table of Contents

    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

    Keywords

    none

    Install

    npm i @egoist/vue-emotion

    DownloadsWeekly Downloads

    375

    Version

    0.6.2

    License

    MIT

    Unpacked Size

    18.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • egoist