Skip to content

Support typed css-modules with typescript #35

Closed
@sobolevn

Description

@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

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    buildThe issue or pull request is related to `build` packagefeature requestFeature requesttransferedIssue transfered from nuxt main repotypesThe issue or pull request is related to `types` package

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions