`@value` is missing from imported type

[JannikGM]

@value statements (https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md) are missing from the imported types.
There doesn't appear to be any documentation or issue about this (yet).

---

Is your feature request related to a problem? Please describe.

Here's a minimal example consisting of 3 files:

• externalValues.module.css

  @value externalValue 100px;

• test.module.css

  @value externalValues: "./externalValues.module.css";
  
  @value externalValue from externalValues;
  
  @value value 200px;
  
  .class {
  }

• index.ts

  import test from './test.module.css'
  console.log('test', JSON.stringify(test, undefined, 2))

The type for test from this plugin is (retrieved with vscode):

(alias) let test: {
    class: string;
}
import test

However, the types at runtime (from what I can tell, without explicitly loading postcss-modules-values):

• vite devserver

  test {
    "externalValues": "\"./externalValues.module.css\"",
    "externalValue": "100px",
    "value": "200px",
    "class": "src-test-test-module__class--svpx1"
  }

• webpack ('style-loader' → 'css-loader') devserver

  test {
    "externalValues": "\"./externalValues.module.css\"",
    "externalValue": "100px",
    "value": "200px",
    "class": "test-test-module__class--nqRDQ"
  }

This leads to issues accessing test.value due to bad typing, despite it existing at runtime.

Describe the solution you'd like

I want the typing to match the actual imported content.
At the very least, I want the @value to be respected (for "value" and "externalValue"), because our code depends on this.

Describe alternatives you've considered

We'd have to rewrite a lot of code which depends on @value and move constants from CSS to TS. But this is a bad approach as the CSS might be generated from design tools, so this would mean more work in the future.

---

If this is is already supported (somehow), then please document how to handle this.

[JannikGM]

Looks like the postcss-modules-values plugin is added by css-loader for webpack: https://github.com/webpack-contrib/css-loader/blob/24e114a909421ed2f817d4b5f35f14fd67a80990/src/utils.js#L758

However, to get this in the typings we'd have to create a postcss configuration, which is not something we need for any other tooling (and might even cause issues with webpack or vite, as their defaults would be modified).
It also raises the barrier of entry for this plugin.

---

For vite, it also appears here: https://github.com/madyankin/postcss-modules/blob/325f0b33f1b746eae7aa827504a5efd0949022ef/src/scoping.js#L6

[mrmckeb]

Hi @JannikGM, I can take a look soon - I'm away right now - but if you could create a reproduction in the meantime, that'll enable me to track down the issue much faster.

It's obviously very hard for this plugin to be zero-config for everyone, because there are (near) infinite ways people can write and build their CSS, but where possible we want to be zero-config.

[JannikGM]

[...] if you could create a reproduction in the meantime, that'll enable me to track down the issue much faster.

I've attached a zip with a project for reproducing the issue: typescript-plugin-css-modules-repro-master.zip

It shows a red box with the result of import css from './style.module.css' (in main.ts) at runtime. Also see my comment (about runtime / typescript type differences): in main.ts Line 1 - 17

I haven't tried to create webpack/vite builds yet, but the watch-mode of vite and webpack seems to work (or rather: shows the problem).
Let me know if you have any further questions.

[JannikGM]

@mrmckeb any updates on this?

[mrmckeb]

Sorry, I haven't had a chance to look into this recently. PRs are always welcome though if anyone wants to take a look!

I'll hopefully have some time in the near future.

[mrmckeb]

Hi @JannikGM, sorry for the delay. I changed jobs and moved cities over the last six months and haven't had much time to work on open source.

It looks like your issue is - as you pointed out - that you need to have the plugin installed.

Just ensure you are using postcss and the postcss-modules-values plugin

(Source: https://github.com/css-modules/css-modules/blob/master/docs/values-variables.md)

This plugin will load any PostCSS plugins you have installed, but expects them to be in a PostCSS config.

As this is in Webpack's CSS loader, I think it's fair to add it here. Would you be open to creating a PR? If not, I can take a look as it's a very small change either way :)