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 #35

Closed
sobolevn opened this issue Mar 31, 2019 — with CMTY · 9 comments
Closed

Support typed css-modules with typescript #35

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

Comments

Copy link

@sobolevn sobolevn 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)
@sobolevn
Copy link
Author

@sobolevn sobolevn commented Jun 28, 2019

Any ideas how can we implement this?

@kevinmarrec
Copy link
Collaborator

@kevinmarrec kevinmarrec 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
Copy link
Author

@sobolevn sobolevn 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
Copy link
Collaborator

@kevinmarrec kevinmarrec 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.

@pi0 pi0 transferred this issue from nuxt/nuxt.js Aug 10, 2019
@kevinmarrec
Copy link
Collaborator

@kevinmarrec kevinmarrec commented Aug 29, 2019

@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
Copy link
Member

@pi0 pi0 commented Sep 3, 2019

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

@kevinmarrec
Copy link
Collaborator

@kevinmarrec kevinmarrec commented Sep 3, 2019

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

@kevinmarrec kevinmarrec closed this Sep 3, 2019
@sobolevn
Copy link
Author

@sobolevn sobolevn commented Sep 3, 2019

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

@kevinmarrec
Copy link
Collaborator

@kevinmarrec kevinmarrec commented Sep 3, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants