sourcemap?

[neocamel]

Is there a way to generate and integrate a sourcemap in the compiled css? Not having the .scss line number for the style in question in Developer Tools is a deal-breaker to my workflow.

Great plugin otherwise! Sourcemaps integration would make this thing perfect!

[skillmatic-co]

Did you figure this out @neocamel?

I've just started using this and would also love a sourcemap.

[neocamel]

Unfortunately no, I don't believe I've figured that out. I'm still relatively new to grunt so I'm not really able to create my own solutions yet.

[aperuzzo]

also need a sourcemap. any information on how to integrate one would be great

[brrn]

I don't see any options to generate a sourcemap using the scssphp library. It does look like there is an option to add the original scss line numbers though.

Is any one interested in this? Anyone want to submit a pull request?

[will83]

I was able to view the lines comments by adding this on line 35 of class-wp-scss.php:
$scssc->setLineNumberStyle(Compiler::LINE_COMMENTS);

We would need a back office option to enable this feature (or they are only displayed in debug mode). However, these comments lines do not allow an effective debug in Chrome.

The best solution is to add a sourcemap.css

[brrn]

That's great! If you want to submit a pull request, we'll get it in right away. If not, we'll work on it for the next release.

[will83]

I do not think this is the right solution. Having sourcemap will make debugging easier because it allows to use Chrome developer tools.
There is a discussion on the leafo/scssphp repository about sourcemap: leafo/scssphp#135 . But it seems that it doesn't evolve so much.
There is also a WIP branch there https://github.com/leafo/scssphp/tree/wip/source-maps but I'm not able to generate sourcemap with it.

The WP-SCSS plugin is really useful, but without sourcemap, I can't put this in my workflow

[DeveloperWilco]

I recently learned about source maps myself and found this link which isn't posted here yet. Mabye it will help creating this feature in this plugin.

[iannacone]

it is working for me in class-wp-scss.php@63

$map = basename($out) . '.map';
$scssc->setSourceMap(2);
$scssc->setSourceMapOptions(array(
'sourceMapWriteTo' => $instance->css_dir . $map, // absolute path to a file to write the map to
'sourceMapURL' => $map, // url of the map
// 'sourceMapFilename' => $in, // an optional name of the generated code that this source map is associated with.
'sourceMapBasepath' => rtrim(ABSPATH, '/'), // base path for filename normalization
'sourceRoot' => '/', // This value is prepended to the individual entries in the 'source' field.
// 'sourceMapRootpath' => '', // base path for filename normalization
// 'outputSourceFiles' => true, // output source contents?
));
$css = $scssc->compile(file_get_contents($in), $in);

N.B.
the line 63
$css = $scssc->compile(file_get_contents($in));
should be or deleted or commented.

N.B.
OLD VERSION of firefox developer edition has currently a bug with sourcemap files and htaccess authentication.

[jonahcoyote]

@iannacone mod works perfectly, thanks! - @brrn can you please get this added officially?

[maindaniel]

@iannacone Thanks for your help with this. Source maps have been added in the latest version: f2650d1