vue-cli-plugin-pug-with-css-modules
v1.2.1
Published
Vue CLI plugin to add support for pug templates in addition with CSS modules (providing classname and ID minification), so you won't have to use $style object, just write the code as usual
Downloads
353
Maintainers
Readme
vue-cli-plugin-pug-with-css-modules
Vue CLI plugin to add support for pug templates with implicit support of CSS modules, so you won't have to use $style object, just write the code as usual
The plugin also provides own minification function for class names and ids used in production mode (see patched vue.config.js)
Installation:
vue add pug-with-css-modules
vue.config.js will be patched automatically
Don't forget to use module attribute for your styles used in templates:
<style lang="less" module>
//
</style>
As well you won't need scoped attribute as transform function will generate already scoped class names
Example
To use the plugin you won't need to change your templates. Look at the example:
<template lang="pug">
bob.sas(
:class="{ state, locked }",
@click="setState",
:zk-state-default="stateDefault",
:zk-state-active="stateActive"
)
.child
.grand-child
#id.a.z.x(:class="[b, c, d]")
div(:class="{d: someVar}" :id="someIdVar")
div(:class="a ? 'b' : c")
div(:class="someOtherVar")
bob
</template>
<style module>
.sas {
//
}
.state {
//
}
//
</style>
The plugin compiles pug and processes class and id attributes to use $style:
<bob
:class="[ $style['sas'], {[$style['state']] : state}, {[$style['locked']] : locked} ]"
@click="setState"
:zk-state-default="stateDefault"
:zk-state-active="stateActive"
>
<div :class="$style['child']">
<div :class="$style['grand-child']"></div>
</div>
</bob>
<div
:id="$style['id']"
:class="[ $style['a'], $style['z'], $style['x'], $style[b], $style[c], $style[d] ]"
></div>
<div :id="$style[someIdVar]" :class="{[$style['d']] : someVar}"></div>
<div :class="$style[a ? 'b' : c]"></div>
<div :class="$style[someOtherVar]"></div>
<bob></bob>
Edge cases
Sometimes it's needed to preserve id/class names. In this scenario use --
as a prefix to preserve the name.
ID Example:
<template lang="pug">
svg <!-- preserve tag case -->
filter#--filter-1
//...
.element bababooey
</template>
<style module>
.element {
filter: url(#filter-1);
}
</style>
Notice, that the prefix is removed.
Class example
<template lang="pug">
.--element bababooey
.this-will-be-minified bog
</template>
<style>
.element {
//
}
</style>
<style module>
.this-will-be-minified {
//
}
</style>
Notice, that there should be no module
attribute for styles you want to preserve.