Bug 171111 – Web Inspector: source maps in <style> tags are not taken into account

• Status: NEW
• Component: Web Inspector

[Michał Gołębiowski-Owczarek]

Created attachment 307722 [details]
Test using <link rel="stylesheet">

Safari (both stable, TP & WebKit Nightly) doesn't apply source maps when styles are loaded using inline <style> tags with a source map comment rather than via a <link rel=stylesheet> tag.

I'm attaching 3 files - one using the link-based approach (via blob URLs), the other two using <style>s; one with a static HTML and the other one where the <style> tag is loaded dynamically.

This simulates what Webpack's popular style-loader does. The link-based approach has drawbacks (e.g. it makes CSS get applied asynchronously which may influence page behavior) so the style-loader may turn into using <style> tags exclusively.

The <style>-based approach works in Chrome & Firefox (with one caveat in Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=714101).

To reproduce:
1. Open the attached HTML files (maybe via a local static HTTP server)
2. Inspect "Test div"
3. Try to find information about the source map mapping. You'll find it only in the <link>-based file.

[Michał Gołębiowski-Owczarek]

Created attachment 307723 [details]
Test using a static <style> tag

[Michał Gołębiowski-Owczarek]

Created attachment 307724 [details]
Test using a <style> tag inserted dynamically

[Radar WebKit Bug Importer]

<rdar://problem/31800458>