less / less/less.js

Inconsistent results of multiple imports with `(reference)`.

Open
#3,374 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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

  1. download
  2. npm i
  3. npm start
  4. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.