Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Master fix 4224 and fix 3777 #4297

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

puckowski
Copy link
Contributor

What:

Why:

Less.js was producing invalid CSS output for certain CSS custom property scenarios.

Checklist:

  • Documentation
  • Added/updated unit tests
  • Code complete

Takes this Less.js:

.test {
    --basic-deg: 20deg;
    --basic-deg-tan: tan(var(--basic-deg));
}

.test2 {
    --some-var: 5%;
    prop: min(100% - var(--some-var), 10px);
}

.test3 {
    --some-var: 55%;
    prop: min(var(--some-var) + 5%, 15px);
}

.test4 {
    color: red;
    --other-color: green;
}

.test5 {
    --font-level: 5;
    prop: pow(var(--font-ratio-min), var(--font-level, 0))
}

.test6 {
    --some-var: 5px;
    prop: min(100% - var(--some-var, var(--somevar, 0)), 10px);
}

.test7 {
    --some-var: 6px;
    --some-var-2: 7px;
    prop: min(100% - var(--some-var, var(--somevar, var(--some-var-2, 8px))), 10px);
}

and outputs:

.test {
  --basic-deg: 20deg;
  --basic-deg-tan: tan(var(--basic-deg));
}
.test2 {
  --some-var: 5%;
  prop: min(100% - var(--some-var), 10px);
}
.test3 {
  --some-var: 55%;
  prop: min(var(--some-var) + 5%, 15px);
}
.test4 {
  color: red;
  --other-color: green;
}
.test5 {
  --font-level: 5;
  prop: var(--font-ratio-min), var(--font-level, 0);
}
.test6 {
  --some-var: 5px;
  prop: min(100% - var(--some-var, var(--somevar, 0)), 10px);
}
.test7 {
  --some-var: 6px;
  --some-var-2: 7px;
  prop: min(100% - var(--some-var, var(--somevar, var(--some-var-2, 8px))), 10px);
}

* Fixes CSS custom property handling to address issue less#4224 and issue
  less#3777.
* Added new CSS custom property tests.
* Improves CSS custom property initial value support, including nesting
  scenarios to better address issue less#3777.
* Add more CSS custom property tests.
@dosubot dosubot bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Dec 7, 2024
@puckowski
Copy link
Contributor Author

I submitted a few PRs. I expect rebase(s) will be needed in order to merge all of them, so let me know when a rebase is needed.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
size:L This PR changes 100-499 lines, ignoring generated files.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant