Bug 171111 - Web Inspector: source maps in <style> tags are not taken into account
Summary: Web Inspector: source maps in <style> tags are not taken into account
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-04-21 05:26 PDT by Michał Gołębiowski-Owczarek
Modified: 2017-04-24 16:45 PDT (History)
3 users (show)

See Also:

Attachments
Test using <link rel="stylesheet"> (1.59 KB, text/html)
2017-04-21 05:26 PDT, Michał Gołębiowski-Owczarek 		no flags Details
Test using a static <style> tag (1.18 KB, text/html)
2017-04-21 05:27 PDT, Michał Gołębiowski-Owczarek 		no flags Details
Test using a <style> tag inserted dynamically (1.50 KB, text/html)
2017-04-21 05:27 PDT, Michał Gołębiowski-Owczarek 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Michał Gołębiowski-Owczarek 2017-04-21 05:26:42 PDT 
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.
Comment 1 Michał Gołębiowski-Owczarek 2017-04-21 05:27:08 PDT 
Created attachment 307723 [details]
Test using a static <style> tag
Comment 2 Michał Gołębiowski-Owczarek 2017-04-21 05:27:24 PDT 
Created attachment 307724 [details]
Test using a <style> tag inserted dynamically
Comment 3 Radar WebKit Bug Importer 2017-04-24 16:45:52 PDT 
<rdar://problem/31800458>