less / less/less.js

Lazy variables of css custom properties with less functions (even if it's overwritten) will break building

Open
#3,563 13 comments 7 reactions 1 assignee View on GitHub

@iChenLei is already working on this.

Since Jul 21, 2021.

bug medium priority
Dominant language
JavaScript
Stars
17k
Forks
3.4k
Avg merge
7h 42m
Merged PRs (30d)
26

Description

To simplify the issue, let's assume a third-party-library which contains:

// `library/style.less`
@base-color: green;
@dark-color: darken(@base-color, 50%);

.some-class {
  color: @base-color;
  backgroundColor: @dark-color;
}

And my app would like to override the colors to css custom properties:

// app.less
import "~library/style.less";

@base-color: var(--primary-color);
@dark-color: var(--bg-color);

:root {
  --primary-color: #fff;
  --bg-color: #000;
}

html[data-theme="dark"] {
  --primary-color: #000;
  --bg-color: #fff;
}

In which I want to override both the @base-color and @dark-color less variables. However, the less will fail with LessError: error evaluating function `darken`: Argument cannot be evaluated to a color, even if the @dark-color in library is actually overridden in my app, and no darken() function should be called.

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.