Type derivation fails when using less variables.

[wzono]

Describe the bug
Type derivation fails when using less variables.

To Reproduce
Steps to reproduce the behavior:

1. Install dependencies & prepare the tsconfig & declare type & use workspace's ts version.
   
   

2. create index.ts & create index.module.less & fill style without less variables.
   
   
   Now it works well

3. Add less variables to the less file.
   

4. See error
   

Expected behavior
When I use less variables, it should be work well too.

Screenshots
See ** To Reproduce **

Desktop (please complete the following information):

• OS: [e.g. iOS]: MacOS
• Browser [e.g. chrome, safari]: Chrome
• Version [e.g. 22]: 90.0.4430.93

Additional context
These less variables are injected through less-loader.

[mrmckeb]

Hi @wingsico, thanks for raising this issue. Are you able to supply a small reproduction of this issue for me?

[wzono]

Hi @wingsico, thanks for raising this issue. Are you able to supply a small reproduction of this issue for me?

@mrmckeb

Ok, here is the reproduction link: https://github.com/wingsico/typescript-plugin-css-modules-issue

Focus on the src/App.tsx and src/App.m.less

[kintz09]

I believe I'm experiencing a very similar issue. My project is based on CRA v4, using scss files, and CRACO to fix this bug with sass exports.

The project compiles just fine like the OP's example, and I get the same empty object for the imported stylesheet.
Module declarations are handled by CRA in this project.

Style Object Broken

Style Object Broken

Here's the plugin configuration:

Here's the SCSS file:

Here's the the TSX file showing the empty style object:

Style Object Working

Style Object Working

Here's the modified SCSS file not using the import:

Here's the same TSX file showing the working style object:

If you'd like me to put together a reproduction environment, just let me know and I'll do my best.

[wzono]

I believe I'm experiencing a very similar issue. My project is based on CRA v4, using scss files, and CRACO to fix this bug with sass exports.

The project compiles just fine like the OP's example, and I get the same empty object for the imported stylesheet.
Module declarations are handled by CRA in this project.

Style Object Broken

Style Object Broken
Here's the plugin configuration:

Here's the SCSS file:

Here's the the TSX file showing the empty style object:

Style Object Working

Style Object Working
Here's the modified SCSS file not using the import:

Here's the same TSX file showing the working style object:

If you'd like me to put together a reproduction environment, just let me know and I'll do my best.

The bug about importing is similar to this #114 . You can try for it.

[kintz09]

@wingsico Thank you for pointing me in the right direction! I was able to resolve my issue by reading through issue #114, #113, and #24.

I hadn't realized my import path was non-standard.

I was able to fix the issue just by changing the path but also through this plugin's options:

1. Changing the import statement in the SCSS file to a relative path fixed the issue:

// PlayerInit.module.scss
// @import "Player/Lib/vlp-ui/sass/materialAnimation";
@import "../../../Lib/vlp-ui/sass/materialAnimation";
...

2. Leaving the import as is but changing the plugin's options in tsconfig.json also fixed the issue:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "baseUrl": "src",
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "classnameTransform": "camelCaseOnly",
          "rendererOptions": {
            "sass": {
              "includePaths": ["src"]
            }
          }
        }
      }
    ]
  },
  "include": ["src"]
}

Thanks again for your quick support!

[mrmckeb]

Thanks for this @wingsico, I think I've found the issue.

This fails:

.App {
  color: @blue;
}

This works:

@blue: rgb(0, 0, 255);

.App {
  color: @blue;
}

This is because the less rendered doesn't automatically pick up global variables, it processes each file independently.

There are a few solutions:

1. Import files with variables whenever you use them.
2. Define the variables in the tsconfig.json - but that's obviously a very bad solution, and not scalable.
3. We can try to add a feature to this plugin to find/import these variables.

An example of the second option (again, I don't recommend this)

    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "rendererOptions": {
            "less": {
              "globalVars": {
                "blue": "rgb(0, 0, 255)"
              }
            }
          }
        }
      }
    ]

What do you think would be a nice solution here for you?

I think option 3 is possible, we could possibly automatically append @import "[variable-file-1].less"; @import "[variable-file-2].less"; to the top of each file... you would just need to provide the relative paths.

[wzono]

Thanks for this @wingsico, I think I've found the issue.

This fails:

.App {
  color: @blue;
}

This works:

@blue: rgb(0, 0, 255);

.App {
  color: @blue;
}

This is because the less rendered doesn't automatically pick up global variables, it processes each file independently.

There are a few solutions:

1. Import files with variables whenever you use them.
2. Define the variables in the tsconfig.json - but that's obviously a very bad solution, and not scalable.
3. We can try to add a feature to this plugin to find/import these variables.

An example of the second option (again, I don't recommend this)

    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "rendererOptions": {
            "less": {
              "globalVars": {
                "blue": "rgb(0, 0, 255)"
              }
            }
          }
        }
      }
    ]

What do you think would be a nice solution here for you?

I think option 3 is possible, we could possibly automatically append @import "[variable-file-1].less"; @import "[variable-file-2].less"; to the top of each file... you would just need to provide the relative paths.

Thanks for your reply @mrmckeb .

Actually, the option 2 works for me (because my variables are defined in a common file). But I think the plugin can ignore this kind of problem, so that the type can be displayed normally.

[mrmckeb]

OK, thanks for the update @wingsico. I looked, and unfortunately I don't see an option in Less to build with errors. So if a variable can't be found, classname generation will fail.

If you're happy with that solution for now, can we close this issue? Or did I misunderstand?

[wzono]

OK, thanks for the update @wingsico. I looked, and unfortunately I don't see an option in Less to build with errors. So if a variable can't be found, classname generation will fail.

If you're happy with that solution for now, can we close this issue? Or did I misunderstand?

@mrmckeb OK, I will close it soon. Thanks for your help. :)

[Carnia]

This is because the less rendered doesn't automatically pick up global variables, it processes each file independently.

There are a few solutions:

1. Import files with variables whenever you use them.
2. Define the variables in the tsconfig.json - but that's obviously a very bad solution, and not scalable.
3. We can try to add a feature to this plugin to find/import these variables.

What do you think would be a nice solution here for you?

I think option 3 is possible, we could possibly automatically append @import "[variable-file-1].less"; @import "[variable-file-2].less"; to the top of each file... you would just need to provide the relative paths.

@mrmckeb
I think option3 is what I am looking for.
In my project, i used a webpack loader called style-resources-loader, its option looks like that:

{
    loader: "style-resources-loader",
    options: {
        patterns: path.resolve(__dirname, "../src/common/global-style/*.less"),
    },
},

its desciption:

This loader is a CSS processor resources loader for webpack, which injects your style resources (e.g. variables, mixins) into multiple imported css, sass, scss, less, stylus modules.
It's mainly used to:
share your variables, mixins, functions across all style files, so you don't need to @import them manually.
override variables in style files provided by other libraries (e.g. ant-design) and customize your own theme.

In this development environment, i will use global variables in many less files（without@import "***.less"），so I think Option 3 is the best。

[cat-walk]

OK, thanks for the update @wingsico. I looked, and unfortunately I don't see an option in Less to build with errors. So if a variable can't be found, classname generation will fail.

If you're happy with that solution for now, can we close this issue? Or did I misunderstand?

Hey, is there any progress with this problem? I think many less user suffer from this.