Description
What problem does this feature solve?
Currently I have to do several things to support css-modules
in my code:
- Create new type declaration:
// client/shims/styles.d.ts
import Vue from 'vue'
declare module 'vue/types/vue' {
interface Vue {
// Augmentation to allow css-modules in .vue files:
$style: { [key: string]: string };
}
}
Source: https://github.com/wemake-services/wemake-vue-template/blob/master/template/client/shims/style.d.ts
- Extend
webpack
configuration to work withtypings-for-css-modules-loader
orcss-modules-typescript-loader
And I think that it can be supported out-of-the box. It might fill in the gap between typescript
and css
.
My motivation is quite simple: I do not want to have runtime problems with code like this:
<template>
<div :class="$style.actions">
<button
:class="$style.reload"
@click="fetchComments"
>
reload comments
</button>
</div>
</template>
<style module>
.actions {
text-align: center;
}
.reload {
display: inline-block;
}
</style>
Full source: https://github.com/wemake-services/wemake-vue-template/blob/master/template/client/components/ActionBar.vue
Is $style.actions
in scope? What will happen when I rename .reload
or .actions
classes? What if I have a typo there?
I use typescript
to get rid of these kind of errors in my app. But now it works only with my logic (aka scripts). I also want my styles to be safe.
Maybe a plugin will also work fine. Will be happy to write it if core support is not planned.
Next analog: https://github.com/forthedamn/next-typed-css
Cheers!