If the child component uses the media query style, it will not be loaded. Why

[nicky132]

To reproduce:

// less code here

Current behavior:

when we use less version Higher than 4.2.0, the proble is occurred, which means the media css style of the child component is lost. but when we use lower version,like 4.2.0,which works very well.

key css problem code is below here @media screen and(max-width:1280px) { .form-process-table { width: 1200px; > div { width: 960px; } } } demo project is here https://codesandbox.io/p/devbox/j4rj4t?file=%2Fsrc%2Frouter%2Froutes.ts%3A12%2C5

you can visit the application by this way,https://j4rj4t-8001.csb.app/registeProcess

error: ok:

Expected behavior: work well

Environment information:

• less version:4.2.2
• nodejs version:20.12.0
• operating system:windows

[dosubot[bot]]

Hey @nicky132! I'm here to help you with any bugs, questions, or contributions you have. Let's get to the bottom of this together!

The issue you're experiencing with media queries not being applied in Less version 4.2.2 might be related to known issues with media query processing in this version. Specifically, there is a known issue where empty @media queries are generated through line comments when compiling a Less file with the (reference) keyword ^[1].

Additionally, there is a bug in Less.js 4.2.1 where nested @media and @container rules are incorrectly merged instead of maintaining their proper nesting structure ^[2]. This could potentially affect how media queries are processed in your code.

To address this, you might want to check if your Less code uses any features like @import (reference) or nested media queries that could be causing this issue. If possible, try simplifying the media query structure or reverting to Less version 4.2.0, where the issue does not occur, as a temporary workaround.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[puckowski]

There seems to be an issue with the CodeSandbox. @nicky132 Could you take a look at permissions?

[nicky132]

There seems to be an issue with the CodeSandbox. @nicky132 Could you take a look at permissions?

source code: https://codesandbox.io/p/devbox/j4rj4t

preview: https://j4rj4t-8001.csb.app/registeProcess

seems fine

[puckowski]

You may be able to access the CodeSandbox, but others may not be able to. You likely have to make the sandbox public/shareable.

Trying to access the sandbox yields the message:

It's likely that the Devbox you're trying to access doesn't exist or you don't have the required permissions to access it.

Since it exists for you, there is likely a permissions issue.

An alternative would be to just post the problematic Less syntax here so we can take a look.

[nicky132]

You may be able to access the CodeSandbox, but others may not be able to. You likely have to make the sandbox public/shareable.

Trying to access the sandbox yields the message:

It's likely that the Devbox you're trying to access doesn't exist or you don't have the required permissions to access it.

Since it exists for you, there is likely a permissions issue.

An alternative would be to just post the problematic Less syntax here so we can take a look.

public share already set，try again

[puckowski]

I can now access the CodeSandbox. I will look for problematic Less in the CodeSandbox project.

[puckowski]

I identified some syntax that is problematic starting in Less version 4.2.1 (4.2.0 is okay):

@media screen and(max-width:1280px) {
  .form-process-table {
    width: 1200px;
    > div {
      width: 960px;
    }
  }
}
@media screen and(min-width:1281px) and(max-width:1920px) {
  .form-process-table {
    width: 1200px;
    > div {
      width: 960px;
    }
  }
}
@media screen and(min-width:1921px) {
  .form-process-box {
    max-width: 1600px;
    width: auto;
    > div {
      width: 1280px;
    }
  }
}

Starting in Less 4.2.1 the parser is no longer treating this and as a Keyword and this results in a space not being added, causing selector issues in the end result:

and(max-width:1280px)

I have a fix for the and issue and will send a PR along shortly.

Workaround: Ensure the source has a space after and keyword.

Thank you for the bug report @nicky132

[puckowski]

I put together a PR which should address the issue I identified from the CodeSandbox: https://github.com/less/less.js/pull/4332

There are ongoing CI issues, but the tests pass locally.