egoist / Styled Vue

ATTENTION: this project is not actively maintained for now (I still push some code once in a while), if you want to see improvements or get support, please consider sponsoring me.

Please consider EGOIST, to show your ❤️ and support.

Features

• Zero-runtime CSS-in-JS for Vue SFC without compromise
• Scoped CSS by default
• CSS preprocessors support
• Dynamic style just works (no IE support)
• Working with SSR out-of-the-box
• Hot module replacement still works
• You get all the features without any config!

Table of Contents

• Install
• Example
• How to use
  • Using with webpack
  • Using with Vue CLI
  • Using with Poi
  • Using with Nuxt.js
  • How does it work
  • CSS Preprocessors
  • Global Styles
  • TypeScript
• Editor Plugins
  • VSCode
  • Atom
• Inspirations
• Contributing
• Author

Install

yarn add styled-vue --dev

Then register the Vue plugin (optional):

import Vue from 'vue'
import { StyledVue } from 'styled-vue'

Vue.use(StyledVue)

So far the plugin is only required for globalStyle, if you only need scoped style, you can safely skip this.

Example

<template>
  <div><h1 class="title">hello there!</h1></div>
</template>

<script>
import { css } from 'styled-vue'
import { modularScale } from 'polished'

export default {
  style: css`
    .title {
      /* You can access component's "this" via "vm" */
      color: ${vm => vm.$store.state.themeColor};
      font-size: ${modularScale(2)};
      margin: 0;
    }
  `
}
</script>

And that's it, it's like writing .vue file's scoped CSS in the <script> tag.

How to use

Using with webpack

I did say that styled-vue works without config, that might be a clickbait because you do need a single line of config in your webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compiler: require('styled-vue/compiler') // <- here
        }
      }
    ]
  }
}

Using with Vue CLI

In your vue.config.js:

module.exports = {
  chainWebpack(config) {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compiler = require('styled-vue/compiler') // <- here
        return options
      })
  }
}

Using with Poi

In your poi.config.js:

module.exports = {
  plugins: ['styled-vue/poi']
}

Using with Nuxt.js

In your nuxt.config.js:

export default {
  modules: ['styled-vue/nuxt']
}

How does it work

Input:

<template>
  <h1>hello</h1>
</template>

<script>
import { css } from 'styled-vue'

export default {
  style: css`
    h1 {
      color: ${vm => vm.color};
      width: ${200 + 1}px;
    }
  `
}
</script>

Output:

<template>
  <h1 :style="$options.style(this)">hello</h1>
</template>

<script>
export default {
  style: function(vm) {
    var v0 = vm => vm.color
    var v1 = 200 + 1
    return {
      '--v0': v0(vm),
      '--v1': v1 + 'px'
    }
  }
}
</script>

<style scoped>
h1 {
  color: var(--v0);
  width: var(--v1);
}
</style>

Under the hood, it uses CSS variables for dynamic styles, that's why this feature is not supported in IE.

CSS Preprocessors

import { less, sass, scss, stylus } from 'styled-vue'

Just use corresponding exports from styled-vue.

The CSS will be passed to vue-loader and parsed by PostCSS if a postcss.config.js exists in your project, so it really just works like <style scoped>.

Global Styles

Use globalStyle instead of style on your component:

import { css } from 'styled-vue'

export default {
  globalStyle: css`
    body {
      color: ${vm => vm.bodyColor};
    }
  `
}

globalStyle relies on the Vue plugin, make sure to register it first:

import Vue from 'vue'
import { StyledVue } from 'styled-vue'

Vue.use(StyledVue)

For Nuxt users we automatically register it for you.

This only adds ~100 bytes to your application.

TypeScript

We use Babel to parse your code, so TypeScript should work out-of-the-box, however there're some caveats.

Editor Plugins

VSCode

• Syntax Highlighting - language-babel
• Autocompletion - vscode-styled-components
• Linting - stylelint

Atom

• Syntax Highlighting and Autocompletion - language-babel

Inspirations

• linaria
• lit-vue

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

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

Website · GitHub @EGOIST · Twitter @_egoistlily