Support typed css-modules with typescript

[sobolevn]

What problem does this feature solve?

Currently I have to do several things to support css-modules in my code:

1. 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

2. Extend webpack configuration to work with typings-for-css-modules-loader or css-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!

_{This feature request is available on Nuxt community (#c8963)}

[sobolevn]

Any ideas how can we implement this?

[kevinmarrec]

@sobolevn AFAIK Nuxt doesn't provided builtin support for css-modules , I think it could be achieved with a Nuxt module which provides the type definition to extend Nuxt types + extend the needed webpack configuration so $style works.

It's the webpack plugin/loader that should check vue files & which should warn you $style.reload doesn't exist if you have renamed it.

I don't think there is something to do around Nuxt core, unless I misunderstood something.

[sobolevn]

Well, css-modules works for me by default. I guess it is enabled by https://vue-loader-v14.vuejs.org/en/features/css-modules.html

What webpack plugin are you talking about? It would be an awesome addition.

[kevinmarrec]

Alright well I think https://github.com/seek-oss/css-modules-typescript-loader just allows you to be able to have auto completion and type checking in script part (it says it auto generate types, dunno how it can be then used with Vue types).

The template part is always delicate when you remove or change something, renaming is easy as your can replace occurrences with your favorite editor, but if you removed something it's your responsibility to refactor, fix or clean your code accordingly.

If you want type safe css in templates, you'll need to use Vue render function (probably with TSX) which is more advanced but lose the template easy declaration, and TSX being not totally perfect with Vue for now, should be better with Vue 3.

[kevinmarrec]

@sobolevn After reconsidering this feature request, I think it should be done in an external module that

1. Extends webpack
2. Provides typings (user will need to add the module key in types array of tsconfig.json)

@pi0 Could you give me your quick point of view about this please ?

[pi0]

@kevinmarrec I like your idea. Probably we can automate some operation over tsconfig.json as well. Adding some option to make it manual

[kevinmarrec]

@pi0 You mean something like that ? :
Resolving module path and look for typings or types in package.json (example), if truthy, add the module name (ex: @nuxtjs/vuetify) to tsconfig.json types array ?

Shouldn't it better being the automation thing optional i.e. not activated by default and being activated through a @nuxt/typescript-build option ?
Not a big fan of overriding user files without his consent by default.

[sobolevn]

Is there any new issue / repo to track the external module progress?

[kevinmarrec]

@sobolevn No but I'd recommend that you or someone else create its own repository and can publish a package with a name like nuxt-whatever-you-want, like our core team @manniL did for https://github.com/Developmint/nuxt-webfontloader.