Skip to content

Latest commit

 

History

History
236 lines (177 loc) · 5.61 KB

README.md

File metadata and controls

236 lines (177 loc) · 5.61 KB

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