vuematerial / styled-vue

Use dynamic styles in Vue single-file components.

---

Please consider donating to this project's author, 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

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>

What a trick... 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

I think you should not do this, but I'm open for other thoughts, let's discuss it in issue tracker if you want this feature.

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