Less files importing other less files

[BasilPP]

Describe the bug
When a .less file imports another .less file with a relative path, an error occurs.
When a .less file imports another .less file with an absolute path, an error occurs.

I tried logging the error less.render was giving:
FileError: './constants.module.less' wasn't found. Tried - ./constants.module.less,c:\dev\app\constants.module.less,constants.module.less in input on line 1, column 1: 1 @import "./constants.module.less";

To Reproduce
Have a .less file @import another less file, e.g. :

@import "./constants.module.less";                              // relative
@import "../../site/style-helpers/constants.module.less";	// relative
@import "site/style-helpers/constants.module.less";		// absolute

Expected behaviour
.less imports to not break.

Desktop (please complete the following information):
OS - windows

Additional context
In both the relative and absolute path import cases, I think this issue is in DtsSnapshotCreator.ts, when the method getClasses is called. This method calls less.render to render the less file to a string.

Relative import case:

• logging the error seems to imply that the import is happening relative to the apps root directory, and not relative to the less file.
• as an idea for a solution, less.render allows for a paths parameter, could the less file’s directory be passed to less.render to help with relative path imports?

Absolute import case:

• I’ve setup my webpack configuration to allow for absolute paths. The plugin understandably has no way of knowing about this webpack setup.

{
    loader: "less-loader",
    options: {
        paths: [path.resolve(__dirname, "ClientApp")],
    }
}

• Ideas for a solution:
  o pass tsconfig’s baseurl to less.render?
  o a plugin parameter to set root paths?

Unfortunately both ideas have some flaws, I'm not sure if there is a better way to achieve absolute imports?

[mrmckeb]

Hi @BasilPP, I think what you've described above makes sense. We also need to look at how to resolve imports for Sass better too.

There are many ways we can solve this, but I'm beginning to lean towards an approach where maybe the best thing we can do is to ask users to provide their own function for these cases...

But for this case, as it's fairly simple, we could certainly add an option to allow paths to be passed through from the plugin settings. Would you be interested in raising a PR? If not, I can do it over the next week or so.

[BasilPP]

Hi @mrmckeb, I'm happy to try make a PR.

Would you be happy with something like this:

• a plugin option named "includePaths"
• it would be an array of paths that are relative to the app root. (e.g. "includePaths": ["./src"] )
• in the code the full paths would be created by appending each realtive path to info.project.getCurrentDirectory() (the root path for the app)
• the paths would be passed to both the less & sass renderer.

p.s. I really like your idea of being able to pass your own function to the plugin in some way. That would be a really flexible solution. Are you thinking those functions could be put in a .ts file (in a known location in a project) for the plugin to find?

[mrmckeb]

Perhaps we should use modulePaths as Jest does, or just paths as per tsconfig.json? Another option is we could just pass paths through from tsconfig.json - maybe that is the best option?

Otherwise, all of that sounds great!

p.s. I really like your idea of being able to pass your own function to the plugin in some way. That would be a really flexible solution. Are you thinking those functions could be put in a .ts file (in a known location in a project) for the plugin to find?

Yes... but this requires more thought and a little planning. But, it would be the most stable way to resolve these types of issues. @lianapache - any thoughts on this?

[BasilPP]

Another option is we could just pass paths through from tsconfig.json - maybe that is the best option?

That seems like the cleanest idea! Do you know how to get those paths from the the PluginCreateInfo?
(I'm having a look at the typings and I cant seem to find how to access them)

[mrmckeb]

We're curretnly accessing it here - https://github.com/mrmckeb/typescript-plugin-css-modules/blob/develop/src/index.ts#L144

So I think baseUrl could do the trick? Paths could also be accessed the same way (I believe).

[BasilPP]

I am blind!

[mrmckeb]

Haha, no problem @BasilPP.

FYI, @k-g-a has a proposal to resolve this - so my goal is to get that out alongside the other solution over the weekend.

Thanks!