Inconsistent results of multiple imports with `(reference)`.
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 17k
- Forks
- 3.4k
- Avg merge
- 7h 42m
- Merged PRs (30d)
- 26
Description
Variables in @import statement cause for unexpected result.
I prepared demo app.
https://github.com/mantsevich/less-variables-import-issue-demo
- download
- npm i
- npm start
- compare "correct.css" & "issue.css" files.
What do we have:
- Two similar files: entry-correct.less & entry-issue.less import 2 components: hello-galaxy & hello-world
- hello-world imports hello-galaxy component with (reference) flag
Difference in the source code: entry-issue.less uses variable in @import statement.
Difference in the result: issue.css doesn't include hello-galaxy component at all.
Expected result: Result of CSS files should be identical.
I think problem related @import with variable in the path + @import (reference) in the child less files. If remove (reference) flag from hello-world.less file, then result will be "the same".
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked demo: run npm i and npm start, then compare correct.css and issue.css. Read _entry-correct.less, _entry-issue.less, _hello-world.less, and _hello-galaxy.less to trace the variable-based @import and (reference) behavior. Done means both entry files produce identical CSS while preserving the reported import semantics.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100