Nested @supports doesn't seem to work

[jcayzac]

Less:

.foo() {
    font-weight: 300;
    -webkit-font-smoothing: subpixel-antialiased;
    @supports not (-webkit-font-smoothing: subpixel-antialiased) {
        font-weight: 400;
    }
}

html {
    .foo;
}

Generated CSS:

html {
  font-weight: 300;
  -webkit-font-smoothing: subpixel-antialiased;
}
@supports not (-webkit-font-smoothing: subpixel-antialiased) {
  font-weight: 400;
}

Expected CSS:

html {
  font-weight: 300;
  -webkit-font-smoothing: subpixel-antialiased;
}
@supports not (-webkit-font-smoothing: subpixel-antialiased) {
  html {
    font-weight: 400;
  }
}

[lukeapage]

e.g. you are expecting it to work like media bubbling. this would make sense.

[jcayzac]

@lukeapage yes I assumed it was treated the same way (but I was wrong, obviously)

[matthew-dean]

I wouldn't expect us to support @supports until it hits widespread usage (unless it's trivial to make it similar to @media queries). It's currently only in Firefox / Chrome desktop.

[Soviut]

@matthew-dean that means it's only a few months away from mobile acceptance, so let's get it sorted by then.

[matthew-dean]

It's not yet in Mobile Safari. The first it could appear would be iOS8. I agree we should have it, but I think that gives us at least 6 months. :-)

[SomMeri]

Related to #2104

[nilssolanki]

Workaround for people stuck on older versions of less:

Use the @supports directive outside of all your code. E.g.:

@supports not (-webkit-font-smoothing: subpixel-antialiased) {
  html {
    font-weight: 400;
  }
}

[schizek]

Are nested @supports supported in LESS yet?