Implement sourcemaps for CSS

[ocoka]

🙋‍♀️ Feature request

Hello, I have some problem with parcel-bundler@1.9.7, - there is no sourcemap emitted at all for generated CSS with zero config. Or, with some configuration for postcss, it's possible to make some sourcemaps to be inlined in same generated CSS, but they contains incorrect path to source file, and can't be used in Chrome Dev Tools.

🎛 Configuration (.babelrc, package.json, cli command)

I've tried with no config at all, and with all combination of next flags in package.json

  "postcss": {
    "map": {
      "inline": true,
      "sourcesContent": false,
      "from": "./src"
    },
    "plugins": {
      "autoprefixer": {}
    }
  },
  "stylus": {
    "sourcemap": {
      "comment": false,
      "inline": false,
      "basePath": "./src"
    }
  }

🤔 Expected Behavior

Expects that somehow user can get sourcemaps for CSS that will be fine used in Chrome Dev Tools to see what file contains what style

😯 Current Behavior

When I build a simple html file with linked Stylus file (at glance I think that for any preprocessor dialect) and have zero configuration, then no sourcemaps emitted.

With some configuration in package.json for postcss block, it's possible to make some sourcemaps to be inlined in CSS (it's postcss stuff really, not a parcel one), but their contains incorrect path to source files

💁 Possible Solution

Let me think... )

🔦 Context

My project is VueJS with vue components, where for styling I use Stylus and for templates the Pug being used, with TypeScript, that majestically rises above all stuff...

But in simple configuration one html + one stylus file it's the same behavior

💻 Code Sample

https://gist.github.com/ocoka/918fad4442f49714cfd69a85f67e61f1

🌍 Your Environment

Software	Version(s)
Parcel	1.97
Node	8.11.3
npm/Yarn	6.2.0
Operating System	Ubuntu 16.04

[DeMoorJasper]

Well this just hasn't been implemented at all, I changed this to a feature request.

It's not being used that much as far as I know so it wasn't really a pressing matter for me personally when I implemented the JS sourcemap support

[coussej]

Hi @DeMoorJasper,

It's not being used that much as far as I know

For example, when building a site based on Bulma (or any other css framework fot that matter), you'd import te Bulma sass file and combine it with some custom declarations. When debugging, finding the origin of a certain property in the resulting generated css file can be very cumbersome, and sourcemaps are very useful!

[ocoka]

Yep, of course it is so, and worth to mention Chrome Dev Tools feature to organize editable workspace, where you can change code right in browser and see the result immediately even without any hot reload machinery, and that's why I've switched temporary back to webpack4, with their almost zero config feature in v4, although there is also present some bugs with sourcemap in stylus-loader 😆

[DeMoorJasper]

I meant it's less commonly used as js sourcemaps.

It'll eventually get implemented, my personal focus is currently not on css sourcemaps as I never use them.

If anyone however does want to contribute css sourcemaps or want to improve the current css handlers (as they are far from perfect) it would be very much appreciated.

[tnhu]

+1

This is much needed. PostCSS' inline sourcemap works in dev mode, but not ready an option for production-ready build. Without sourcemap, it'd be extremely hard to debug production issues.

[probablykasper]

Would prioritize this one a lot. If you use a preprocessor with some nesting, it's often very hard to find out where styles are coming from - Especially if you didn't write that code.

[ab18556]

+1 this one might be a show stopper for me.

[dongyuwei]

for less, add .lessrc with the following config:

{
    relativeUrls: true,
    dumpLineNumbers: 'comments'
}

This is the poor-man's source-map currently, though it's not the real sourcemap, it's very helpful to debug less/css issue.

Ref: http://lesscss.org/usage/#using-less-in-the-browser-debugging