less / less/less.js

Invalid media query merge of MQs inside @import with MQ

Open
#1,508 4 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug medium priority up-for-grabs
Dominant language
JavaScript
Stars
17k
Forks
3.4k
Avg merge
7h 42m
Merged PRs (30d)
26

Description

Tested with 1.4.2 RELEASE and 1.5.0-wip 6fe11743828addd1c7d7bcf320364cc28dc21d8d

A media query in a LESS file imported using import with a media query results in an invalid query.

import-test-f.less

@media screen and (min-device-pixel-ratio: 2) {
  #css {
    color: purple;
  }
}

import.less

@import "import/import-test-f" screen and (max-width: 604px);

The expected output is

@media screen and (max-width: 604px) and (min-device-pixel-ratio: 2) {
  #css {
    color: purple;
  }
}

but instead we have

@media screen and (max-width: 604px) and screen and (min-device-pixel-ratio: 2) {
  #css {
    color: purple;
  }
}

which is an invalid media query. [http://www.w3.org/TR/css3-mediaqueries/#syntax]

Furthermore, in 1.4.2 we have an empty media query with just max-width. This is no longer appearing in the 1.5.0-wip commit above.

Coincidently, the original test fails in 1.4.2 despite the fact that bin/lessc itself outputs the expected CSS. This seems to have been corrected in 1.5.0-wip as well.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with _import-test-f.less and _import.less, comparing the generated media query with the expected output. Start by locating the original test referenced in the report and the Less import/media-query handling it exercises. Done means the nested queries merge without the duplicated screen term and the existing test passes across the affected versions.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
compilers
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.