@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 created one here: https://github.com/JannikGM/typescript-plugin-css-modules-repro

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):

https://github.com/JannikGM/typescript-plugin-css-modules-repro/blob/390d2aa69180f77c60d56becf684287069d3f01a/main.ts#L1-L17

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.