Giter Site home page Giter Site logo

sourcemap? about wp-scss HOT 11 CLOSED

connectthink avatar connectthink commented on July 29, 2024 2
sourcemap?

from wp-scss.

Comments (11)

brrn avatar brrn commented on July 29, 2024 2

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?

from wp-scss.

iannacone avatar iannacone commented on July 29, 2024 2

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.

from wp-scss.

maindaniel avatar maindaniel commented on July 29, 2024 1

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

from wp-scss.

skillmatic-co avatar skillmatic-co commented on July 29, 2024

Did you figure this out @neocamel?

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

from wp-scss.

neocamel avatar neocamel commented on July 29, 2024

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.

from wp-scss.

aperuzzo avatar aperuzzo commented on July 29, 2024

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

from wp-scss.

will83 avatar will83 commented on July 29, 2024

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

from wp-scss.

brrn avatar brrn commented on July 29, 2024

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.

from wp-scss.

will83 avatar will83 commented on July 29, 2024

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

from wp-scss.

DeveloperWilco avatar DeveloperWilco commented on July 29, 2024

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.

from wp-scss.

jonahcoyote avatar jonahcoyote commented on July 29, 2024

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

from wp-scss.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.