less.js icon indicating copy to clipboard operation
less.js copied to clipboard

inconsistent paths after `render` in `imports` on windows and linux

Open alexander-akait opened this issue 5 years ago • 6 comments

In less-loader we have custom FileManager plugin (https://github.com/webpack-contrib/less-loader/blob/master/src/utils.js#L27).

Algorithm (https://github.com/webpack-contrib/less-loader/blob/master/src/utils.js#L87):

  • try to load less file using built-in FileManager, if it is fail
  • try to load less file using webpack resolver

We have a code:

@import '~bootstrap-less-port/less/bootstrap.less'; // means load from `node_modules`

So less failed to resolve, and webpack resolver return C:\path\to\projects\node_modules\bootstrap-less-port\less\bootstrap.less

No problems on this step. Compilation works fine.

After render (https://github.com/webpack-contrib/less-loader/blob/master/src/index.js#L38), we adding all resolved files to watcher (for recompilation them after change). But imports on windows contains forward slashes:

[ 
  'C:/Users/IEUser/test-webpack-watch/node_modules/bootstrap-less-port/less/bootstrap.less',
  'C:\\Users\\IEUser\\test-webpack-watch\\node_modules\\bootstrap-less-port\\less\\_functions.less',
  // ...
]

On linux and macos no problems:

[
   '/home/evilebottnawi/IdeaProjects/test-webpack-watch/node_modules/bootstrap-less-port/less/bootstrap.less',
  '/home/evilebottnawi/IdeaProjects/test-webpack-watch/node_modules/bootstrap-less-port/less/_functions.less',
  // ...
]

If we change source code to:

@import '../node_modules/bootstrap-less-port/less/bootstrap.less';

We don't have this problem.

Ref: https://github.com/webpack-contrib/less-loader/issues/357

Reproducible repo:

https://github.com/Kukkimonsuta/test-webpack-watch

Just add console.log here https://github.com/webpack-contrib/less-loader/blob/master/src/index.js#L38

alexander-akait avatar Jun 11 '20 13:06 alexander-akait

Same problem for catch(error) in chain render.then().catch(error), error.filename contains forward slashes

alexander-akait avatar Jun 11 '20 14:06 alexander-akait

What happens with:

@import 'bootstrap-less-port/less/bootstrap.less'

?

matthew-dean avatar Jun 11 '20 16:06 matthew-dean

All fine, but the problem is not in @import, the problem - when you return absolute windows path to FileManager it is always put invalid slashes in imports

alexander-akait avatar Jun 11 '20 17:06 alexander-akait

This would be something for a proficient Windows user to take on. Unfortunately, we can't really run automated tests on this because those are done in Linux environments. I assume there's probably a simple way / Node utility to normalize Windows paths.

matthew-dean avatar Jun 22 '20 14:06 matthew-dean

@matthew-dean we can automate tests using github-actions on linux and on windows and on macos, for node we can use something like path.normalize

alexander-akait avatar Jun 22 '20 14:06 alexander-akait

@evilebottnawi If you know how to do that, great! PRs welcome!

matthew-dean avatar Jun 22 '20 16:06 matthew-dean