less.js
less.js copied to clipboard
Master fix 4224 and fix 3777
What:
- Fixes CSS custom property handling to address issue #4224 and issue #3777.
- Added new CSS custom property tests.
Why:
Less.js was producing invalid CSS output for certain CSS custom property scenarios.
Checklist:
- [ ] Documentation
- [x] Added/updated unit tests
- [x] 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);
}