Sourcemap doesn't include @import'ed files

[Blindmikey]

( Of course, unless I'm doing something incorrectly )

Settings and files to reproduce:

Gruntfile.js :

...
grunt.loadNpmTasks('grunt-postcss');
...
postcss: {
    options: {
        map: true,
        processors: [
            require('postcss-import')({ path: [ '/lib/css/variables/' ] }),
            require('postcss-simple-vars').postcss
        ]
    },
    dist: {
        src: 'lib/css/init.css',
        dest: 'style.css'
    }
},
...

lib/css/init.css :

@import v-colors;
body { background-color : $v-colors_primary; }

lib/css/variables/v-colors.css :

$v-colors_primary : blue;

The resulting sourcemap makes no mention of the file path to v-colors.css in "sources" array

{"version":3,"sources":["lib/css/init.css"],"names":[],"mappings":"AAEA;CACC,uBAAoC;CACpC","file":"style.css","sourcesContent":["@import v-colors;\n\nbody {\n\tbackground-color: $v-colors_primary;\n}\n"]}

Issue 1: This prevents chrome dev tools from auto-refreshing the styles on a page if a developer edits the imported file.

Issue 2: This also prevents chrome dev tools' inspector from linking the css value of a property to the correct file so long as that file is one that was imported. ( links incorrectly to init.css, should link to v-colors.css as that's where the variable was assigned )

[Blindmikey]

Upon some further investigation - v-colors.css does show in the sourcemap so long as there is more than just variable assignments:

v-colors.css :

$v-colors_primary : blue;
body { color: black; }

produces sourcemap :

{"version":3,"sources":["lib/css/variables/v-colors.css","lib/css/init.css"],"names":[],"mappings":"AAEA,OAAO,aAAa,EAAE;;ACAtB;CACC,sBAAoC;CACpC","file":"style.css","sourcesContent":["$v-colors_primary : red;\n\nbody { color: black; }\n","@import 'variables/v-colors.css';\n\nbody {\n\tbackground-color: $v-colors_primary;\n}\n"]}

This kind of fixes Issue 1 noted above - however this may also reveal why Issue 2 is failing - it seems as if variables are not being mapped in sourcemaps.

Which prevents chrome dev tools from doing this awesomeness: https://youtu.be/x6qe_kVaBpg?t=8m11s

[Blindmikey]

Noticing your tests for sourcemap - if you change the file imported.css to just :

$color : blue;

And even use that variable in in.css :

@import "imported.css";
body {
  color: $color;
}

You'll see the sourcemap then drops the path to imported.css file all together. It only works if there is something besides variable assignments ( maybe this is a postcss-simple-vars issue? or grunt-postcss? )

[MoOx]

postcss-import merge multiples files as a single AST.
Then if some nodes disappear (like your $whatever - which is not in the final ast) it totally make sense that this file cannot be referenced in the final sourcemap.
And I think, since a outputed line cannot refer to multiple lines using sourcemap, the lines using $whatever are linked to their original location. The source of the $whatever cannot be added
I don't see how to fix that. And btw, it's more a postcss-simple-vars issue (or the one that is removing the node). Maybe replacing by a commented node might help to avoid that. By replacing the non valid css node by a comment, maybe you will keep the reference in the source map. Production build will skip those so should be the way to go. It's more an issue with the plugins that are removing the node.

[Blindmikey]

Do you think there might be a way to enable this kind of sourcemapping: https://youtu.be/x6qe_kVaBpg?t=8m11s ? It would be super helpful to jump to where a variable is defined as he does in the video.

I'll take a look at postcss-simple-vars. Thanks for the input!

[jednano]

I know that PostCSS does declaration source mapping, but I'm not sure it does values. See Node#clone() for example.

Also, how would you handle that in cases where you have multiple variables being called in a declaration value? Like:

a {
    border: $width $style $color;
}

I'd love to get this working with postcss-nested-vars as well, whatever the solution may be.

[MoOx]

Like I said before, from what I know or postcss, a node can only have one origin. And it will be the origin of the declaration, not the values.

[jednano]

Yep. That confirms what I was thinking.