egoist / styled-vue

Use dynamic styles in Vue single-file components.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CSS modules support

rshaibakov opened this issue · comments

Will there be support for css modules instead of scoped?

Yeah I plan to add CSS modules support, it should be pretty easy.

The proposed usage: import styled-vue/modules instead of styled-vue to use CSS modules.

<template>
  <div><h1 :class="$style.title">hello there!</h1></div>
</template>

<script>
import { css } from 'styled-vue/modules'
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>