vue-implicit-css-modules
v0.1.5
Published
Implicitly replace class names using Vue css modules
Downloads
8
Maintainers
Readme
vue-implicit-css-modules
Implicitly replace class names using Vue css modules
Installation
npm install --save vue-implicit-css-modules # npm
yarn add vue-implicit-css-modules # yarn
Usage
Plugin
import Vue from 'vue'
import VueImplicitCssModules from 'vue-implicit-css-modules';
import globalModule from './global.module.css';
Vue.use(VueImplicitCssModules, {
global: globalModule, // {} by default,
unsafe: true // false by default
})
Component
With the introduction of css modules in Vue, you have to write explicit code:
<template>
<div>
<p :class="{ [$style.red]: isRed }">
Am I red?
</p>
<p :class="[$style.red, $style.bold]">
Red and bold
</p>
</div>
</template>
With vue-implicit-css-modules
you can write classes as is:
<template>
<div>
<p :class="{ 'red': true }">
Am I red?
</p>
<p class="red bold">
Red and bold
</p>
</div>
</template>
<script>
export default {
implicitCssModule: true,
data(){
return {
isRed: true
}
}
}
</script>
<style module>
.red {
color: red;
}
.bold {
font-weight: bold;
}
</style>
and get same result:
<div>
<p :class="red_1VyoJ-uZ">
Am I red?
</p>
<p class="red_1VyoJ-uZ bold_2dfrX-sE">
Red and bold
</p>
</div>
.red_1VyoJ-uZ {
color: red;
}
.bold_2dfrX-sE {
font-weight: bold;
}
Component options
implicitCssModule: boolean = false
Whether or not to replace class names implicitly.
Plugin options
global: CSSModule = {}
Specify the global css module.
By default, vue-implicit-css-modules
is looking for class names only in the current $style
.
If global
is set, vue-implicit-css-modules
will look in global
too.
unsafe: boolean = false
By default, vue-implicit-css-modules
does process only components
with implicitCssModule
property specified upon creation.
If unsafe
is set to true
, it will try to process all components (including third-party).
Summary
I know that this behavior can be confusing, but I value aesthetics more.)
Project is in an early stage of development so any suggestions, feature requests, bug reports or pull requests are appreciated.