Repository navigation
sourcemap? #49
Description
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!
Reacted by Maximilian Köhler and Garrett W.
Metadata
Metadata
Assignees
Labels
No labels
Activity
skillmatic-co commentedon Jan 21, 2016
Did you figure this out @neocamel?
I've just started using this and would also love a sourcemap.
neocamel commentedon Jan 22, 2016
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 commentedon Apr 19, 2016
also need a sourcemap. any information on how to integrate one would be great
brrn commentedon Dec 28, 2016
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 commentedon Jun 20, 2017
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 commentedon Jun 21, 2017
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 commentedon Jun 21, 2017
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 commentedon Feb 8, 2018
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 commentedon Mar 26, 2018
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 commentedon Apr 30, 2018
@iannacone mod works perfectly, thanks! - @brrn can you please get this added officially?
maindaniel commentedon May 8, 2018
@iannacone Thanks for your help with this. Source maps have been added in the latest version: f2650d1