Resolve assets in nested imported less files

krtcom commented 2 years ago

What happens

When building less file A that imports another less file B and B contains declaration that needs to be resolved e.g. url() and this path is relative to B esbuild does not find this file correctly.

It tries to resolve file relatively to main less file instead of the file that references image

Steps to Reproduce the Problem

├── build.js
├── lib
│   ├── flags.less
│   └── flags.png
├── package.json
└── style.less

/* style.less */
@import "./lib/flags.less";

/* lib/flags.less */
.flag {
    background:url("./flags.png") no-repeat;
}

/* build.js */
const esbuild = require('esbuild')
const lessPlugin = require('esbuild-plugin-less')

esbuild.build({
    entryPoints: ['./style.less'],
    bundle: true,
    loader: {
        '.png': 'file'
    },
    plugins: [
        lessPlugin.lessLoader()
    ],
    outdir: 'dist'
}).catch()

Output

Could not resolve "/home/esbuild/flags.png"

 errors: [
    {
      detail: undefined,
      location: {
        column: 18,
        file: 'style.less',
        length: 49,
        line: 2,
        lineText: '  background: url("/home/esbuild/flags.png") no-repeat;',
        namespace: '',
        suggestion: ''
      },
      notes: [],
      pluginName: '',
      text: 'Could not resolve "/home/esbuild/flags.png"'
    }
  ],

say /home/esbuild is absolute path to project root

Versions

esbuild: 0.14.42
esbuild-plugin-less: 1.1.7
Platform: Ubuntu 21.10

Note

Maybe this is expected behaviour and I do not understand something but somehow webpack makes this work, and now I try to migrate and can't make it work in esbuild.

github-actions[bot] commented 2 years ago

:tada: This issue has been resolved in version 1.1.8 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

iam-medvedev commented 2 years ago

Fixed in #76. Could you please try the latest version?

iam-medvedev / esbuild-plugin-less