Source map support

[ai]

I found good feature in linaria. Source map support should not be so hard if Babel gives you a position for a literal node.

We need:

1. Take source-map (0.7 use async API, if it is a problem, using 0.6 is OK. I still use 0.6 in PostCSS, because we can’t use async API in few places)
2. For every literal tag generator.addMapping.
3. In the end, generate source map, encode it to data:uri and add to CSS file.

[jquense]

I feel like we're already getting source maps...I'm guessing they probably aren't linking to the inline tag but I think they definitely show up for the extracted file.

Are source maps unique to the source type? Like if someone uses Sass would you need sass specific maps or the format works for any text file?

[jquense]

They'd need to format specific right? How else would you know how to map positions right?

[ai]

@jquense source map encoding could be different for the source type. But CSS, SCSS and Less both support the same inline maps (I am not sure about indent Sass).

But next tool must support updating previous source map. PostCSS can do it, but I am not sure about SCSS and Less. In worth case, they just remove astroturf’s source map. Not a big deal.

I'm guessing they probably aren't linking to the inline tag but I think they definitely show up for the extracted file.

Yeap, I found https://github.com/4Catalyzer/astroturf/blob/master/src/plugin.js#L82-L83 but didn’t get how it is used then.

[ai]

They'd need to format specific right? How else would you know how to map positions right?

Format the whole map or each mapping?

[jquense]

But next tool must support updating previous source map

O neat so at least in PostCSS it will update the source maps it finds after it compiles? That's cool.

Babel definitely gives the location we use it to know what text to extract, should be simple enough to append a sourcemap

[ai]

The whole source map use special comment /* # sourceMappingURL=data:application/json;base64,eyJ2ZXJza in the end of the file

Each mapping just map blocks of input files to blocks in output file.

Block is a part of text between mapping points.

So, when you call:

map.addMapping({
  generated: {
    line: 2,
    column: 1
  },
  source: "in.js",
  original: {
    line: 1,
    column: 1
  }
})
map.addMapping({
  generated: {
    line: 2,
    column: 5
  },
  source: "in.js",
  original: {
    line: 1,
    column: 5
  }
})

1:1→1:4 of in.css will be mapped to 2:1→2:4 in out.css. 1.5→EOF will be mapped to 1:5→EOF.

[ai]

O neat so at least in PostCSS it will update the source maps it finds after it compiles?

Yeap. I think Sass could update it too even without previous source map support, since (as I think) webpack merge source map by it own. Loaders just return own source maps and webpack merge them.

[ai]

Also here is the best tool to debug source maps:

https://sokra.github.io/source-map-visualization/