Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support typed css-modules with typescript #5426

Open
sobolevn opened this issue Mar 31, 2019 — with CMTY · 4 comments

Comments

Projects
None yet
3 participants
Copy link

commented Mar 31, 2019 — with CMTY

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)

@cmty cmty bot added the cmty:feature-request label Mar 31, 2019

@manniL manniL added the typescript label Mar 31, 2019

@sobolevn

This comment has been minimized.

Copy link
Author

commented Jun 28, 2019

Any ideas how can we implement this?

@kevinmarrec

This comment has been minimized.

Copy link
Member

commented Jul 3, 2019

@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

This comment has been minimized.

Copy link
Author

commented Jul 3, 2019

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

This comment has been minimized.

Copy link
Member

commented Jul 3, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.