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

Master fix 3622

Open puckowski opened this issue 11 months ago • 0 comments

What:

Contains fixes for a variety of syntax raised in https://github.com/less/less.js/issues/3622

Why:

Existing less code was too rigid and expected ) where a list of selectors was possible.

Checklist:

  • [ ] Documentation
  • [x] Added/updated unit tests
  • [x] Code complete

The following Less.js:

@-moz-document domain("example.com") {
  :is(
    [a1],
    [a2]
  ):is(
    [a3],
    [a4]:not(
      :is([a5],[a6])
    ):is(
      [a7]:not(:is([a8],[a9])),
      [b1]:not(:is([b2],[b3]))
    ):is(
      [b4],[b5]
    ),
    [b6],
    [b7]
  ) {
    color: red; }

}

@-moz-document domain("example.com") {
	:is([foo], [bar] /* :is(a, b) */, [baz]) {
		color: red; }
}

@color: red green;

each(@color, {
  :is(.color-@{key},
  .focus-color-@{key}:focus,
  .hover-color-@{key}:hover) {
    color: @value !important;
  }
});

becomes the following CSS:

@-moz-document domain("example.com") {
  :is(
    [a1],
    [a2]
  ):is( [a3], [a4]:not( :is([a5],[a6])):is( [a7]:not(:is([a8],[a9])), [b1]:not(:is([b2],[b3]))):is(
      [b4],[b5]
    ), [b6], [b7]) {
    color: red;
  }
}
@-moz-document domain("example.com") {
  :is([foo], [bar], [baz]) {
    color: red;
  }
}
:is(.color-1, .focus-color-1:focus, .hover-color-1:hover) {
  color: red !important;
}
:is(.color-2, .focus-color-2:focus, .hover-color-2:hover) {
  color: green !important;
}

puckowski avatar Dec 11 '24 21:12 puckowski