Use dynamic styles in Vue single-file components.
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example chore: format Jan 8, 2019
lib refactor: extract parseTaggedTemplate Jan 8, 2019
nuxt feat: nuxt module (#2) Jan 8, 2019
poi feat: add poi plugin Jan 8, 2019
test init Jan 8, 2019
.editorconfig init Jan 8, 2019
.gitattributes init Jan 8, 2019
.gitignore init Jan 8, 2019
.prettierrc init Jan 8, 2019
LICENSE init Jan 8, 2019
README.md docs: remove duplicated section Jan 8, 2019
circle.yml add circleci config Jan 8, 2019
compiler.js init Jan 8, 2019
package.json Release v0.1.3 Jan 8, 2019
yarn.lock chore: update example Jan 8, 2019

README.md

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