Media query express support

[woody-li]

A new range syntax introduced in Media Queries Level 4.

The syntax allow query expresses, includes range express.

But i got an error when using the syntax.

To reproduce:

@media (400px <= width <= 700px) {
    .main-box {
        display: flex;
    }
}

Current behavior:

less: Missing closing ')' in file test.less line no. 1

Expected behavior:

Convert to css with the syntax correctly

Environment information:

• less version: 4.1.3
• nodejs version: 16.14.0
• operating system: win

[mud1tx]

I think I can work on this issue. Can you please give some details about the issue?

[woody-li]

@mud1tx Thanks for your reply. I'd like to provide something, but I don't know what to provide.

[matthew-dean]

@mud1tx This isn't a bug, it's technically a feature request. So what needs to be added is support for range syntax in media queries. This would need to support merging as well.

That is, right now Less transforms this:

@media screen {
  @media (min-width: 1023px) {
    .selector {
      color: blue;
    }
  }
}

...into...

  @media screen and (min-width: 1023px) {
    .selector {
      color: blue;
    }
  }

So, tests would need to be added to convert:

@media (400px <= width) {
  @media (width <= 700px) {
    .main-box {
        display: flex;
    }
  }
}

into:

@media (400px <= width) and (width <= 700px) {
    .main-box {
        display: flex;
    }
}

[jiadesen]

me too

[vite:css] [less] Missing closing ')'

[jiadesen]

stylelint/stylelint#6742

[woody-li]

The range syntax seems has been supported in version 4.2.0 by PR #3811