less / less/less.js

Sourcemap will not link to correct line if media query is nested inside selector

Open
#2,974 1 comment 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

When I compile Less with a sourcemap, and in the less file nest a media query inside a selector like so:

.post .title {
  @media(min-width: 700px) {
    display: flex;
  }
}

...and then use Chrome inspector to find the ruleset, I find it is always at the end of the file. However when I nest the entire ruleset in a media query like so:

@media(min-width: 700px) {
  .post .title {
    display: flex;
  }
}

...there is no problem and can find the ruleset on the correct line in the sourcemap, as opposed to at the end of the file.

If it helps I am using Node and compile Less v2.5.3 using grunt and the plugin grunt-contrib-less, I'm not sure if it is a Less issue and was wondering if this is something to be expected with Less sourcemaps.

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

Start by reproducing the nested media-query example with Less 2.5.3 and a sourcemap, then inspect the generated rule in Chrome and compare it with the outer-media-query case. Done means the nested rule maps to its correct Less source line instead of the end of the file.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, nodejs
Domain
build-system, 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.