5t3ph/eleventy-plugin-lightningcss

Sourcemap support

binyamin opened this issue · 8 comments

binyamin commented

It would be nice if this plugin supported writing sourcemaps to disk.

It could support inline sourcemaps, linked/external sourcemaps, or both. Inline would be easier to add, but linked ones sound more efficient in terms of performance.

Thanks for your work!

Ideally, there'd be a separate plugin for source-maps. Plugins would get and/or change the value of a data key, such as sourcemap.value, so the sourcemap could be transformed between plugins. The plugin would then use that data to write the sourcemap, based on user options. Alas, no such plugin exists.

5t3ph commented

@paulrobertlloyd added in v1.1.0, available now! Default is false so update your options to include sourceMap: true

  • 🚀1
binyamin commented

@5t3ph Thanks! What do you think about having a dedicated Source Map plugin?

binyamin commented

@5t3ph Ah, it still doesn't output a sourcemap.

5t3ph commented

Hi @binyamin - I've opened a new branch with an attempt at getting source maps actually produced. I didn't think about the fact I needed to actually generate the file when I closed this before :)

However, even though it generates, it doesn't seem to be working as far as showing up in devtools. I'll admit that I really haven't made source maps part of my flow before, so I'm not quite sure how to fix it or if maybe I'm just not trying to use it/view it correctly.

Anyway, feel free to checkout the branch and help troubleshoot: https://github.com/5t3ph/eleventy-plugin-lightningcss/tree/source-maps

  • 👍1
geniemouse commented

Hi @5t3ph,

Thanks for your work on this. It has just saved me a ton of time! (A small/messy 'learning' Eleventy test project of my own).

Although I'm not using your plugin directly, I can confirm your approach works, sourcemap files are being generated.

If you haven't found the setting already, browser devtools generally have a checkbox setting to enable sourcemap files; it may be this is set to false by default?

If it helps:

  1. I have attached a copy of the JS file I'm using. css-config.js.zip
    1. I found LightningCSS option inputSourceMap needed to be set to true for my locally served mapping to point back to my src @imported files correctly.
  2. The generated *.map files need to be added to Eleventy's passthrough copy config. I'm using eleventyConfig.addPassthroughCopy("./src/css/**/[!_]*.{css,map}") in my test project, for example.
  3. The sourcemap files probably shouldn't be in the project repo, so I added *.map to my .gitignore file.

Thanks again for your efforts with this.

sfat-llc commented

Hi @5t3ph,

Thanks for your work on this. It has just saved me a ton of time! (A small/messy 'learning' Eleventy test project of my own).

Although I'm not using your plugin directly, I can confirm your approach works, sourcemap files are being generated.

If you haven't found the setting already, browser devtools generally have a checkbox setting to enable sourcemap files; it may be this is set to false by default?

If it helps:

  1. I have attached a copy of the JS file I'm using. css-config.js.zip

    1. I found LightningCSS option inputSourceMap needed to be set to true for my locally served mapping to point back to my src @imported files correctly.

  2. The generated *.map files need to be added to Eleventy's passthrough copy config. I'm using eleventyConfig.addPassthroughCopy("./src/css/**/[!_]*.{css,map}") in my test project, for example.

  3. The sourcemap files probably shouldn't be in the project repo, so I added *.map to my .gitignore file.

Thanks again for your efforts with this.

For Sass plugin version it would be the same or it needs some tweaks?