Is there something like source maps for CSS?

Question

I'm dynamically adding CSS tags to a page with jQuery:

$('<style type="text/css"/>').text(css).appendTo(document.head);

When viewed in the Chrome Developer Tools, all of the CSS appears as "localhost", which isn't always helpful:

Is there anything like Source Maps for CSS which would let me identify the source of the CSS to the debugger?

Answer 1

Add a sourceURL to the inline style tag as you add it.

/*@ sourceURL=mystyles.css */

This will give that inline style tag a temporary name that will be used inside of the DevTools for navigation.