Skip to content

Use dynamic styles in Vue single-file components.

License

Notifications You must be signed in to change notification settings

vuematerial/styled-vue

 
 

Repository files navigation

styled-vue


NPM version NPM downloads CircleCI donate chat

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

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

Atom

Inspirations

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

About

Use dynamic styles in Vue single-file components.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 93.9%
  • Vue 6.1%