less / less.js

Less. The dynamic stylesheet language.
http://lesscss.org
Apache License 2.0
17.02k stars 3.41k forks source link

Source-map files from lessc pointing to wrong less file #3567

Closed Dvd1234 closed 1 year ago

Dvd1234 commented 3 years ago

Hey @seven-phases-max @matthew-dean @hirosato @Justineo and everyone in here. :) This is with regards to lessc. Say, I have three files:-

  1. less0.less (empty) (empty)
  2. less1.less @import 'less0.less'
  3. less2.less

    @import 'less1.less'
    @var-test: .trial;
    
    @{var-test}{
          color: red;
    }

    I am generating Source-map for these files by:-

lessc less2.less less2.css --source-map

The generated CSS files are being used in an html file. Source files are being used for debugging in browser. Now in browser, it shows the .trial class to be in less0.less and not less2.less So, Expected behavior is to have shown less2.less as source for .trial class and not the one being shown:- https://i.stack.imgur.com/QiNQD.png

That's the less2.css.map file {"version":3,"sources":["less0.less","less2.less"],"names":[],"mappings":"AAAA;ECKI,wBAAA","file":"less2.css"}

Could anyone please help me out if its an issue or if I need to tweak some setting. Thanks in advance.

USE CASE: Say I have a file with less variables that has my configurations(Say less1.less). I am importing those settings in some other file(Say less2.less). Then, after Source-mapping, when trying to check source from source in dev-tool, it takes me to less1.less and not less2.less.

matthew-dean commented 3 years ago

Source maps don't have good test coverage / verification. Unfortunately, the source map is rather opaque once it's generated, so I don't know a good way to verify / test that code in X file should equal Y output in a .map file. If there are testing utilities, it would be a good first issue for someone to take on.