less.js icon indicating copy to clipboard operation
less.js copied to clipboard

Master fix 4224 and fix 3777

Open puckowski opened this issue 11 months ago • 1 comments

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);
}

puckowski avatar Dec 07 '24 18:12 puckowski