Debugging CSS issues is hard because the filename info is lost

[gausarts]

Hi, Thanks for a very useful plugin. I wonder if this is a bug or a desired behavior. Whenever you enable prefixfree, firebug CSS console can not identify the file it is working on. Disabling prefixfree, firebug can recognize the CSS file again. Say, I am selecting a selector #content resides at line #2 in a global.css, firebug will normally display the name of the css file (global.css) along with the lines the selector sits in. But with prefixfree, firebug can not recognize the files, only displaying the line number pointing to non-existent CSS file.

Any clarification would be very much appreciated.

Thanks

[LeaVerou]

This is a known issue, due to the fact that -prefix-free (and almost any other CSS polyfill-style script) has to inline CSS. You can find out the file name by checking the data-href attribute on the generated <style> element, but admittedly it's harder. I haven't thought of a solution yet, it's not an easy problem.

[Mondane]

Maybe it's possible to contact the firebug creators and have them check that data-href attribute and display it as the filename.

If that works, perhaps it's also needed to add an attribute for each inline-css stating the line it was found in the original CSS.

[LeaVerou]

If that works, perhaps it's also needed to add an attribute for each inline-css stating the line it was found in the original CSS.

-prefix-free does not add or remove lines, so that should be the same.

[GeorgeTzellis]

Refactoring prefix-free's code to something like

rule = document.styleSheets[0].cssRules[0].style
rule.cssText = prefixFree(rule.cssText)

should be a viable solution. I haven't tested this thoroughly, though.

[LeaVerou]

No it isn't, because the CSSOM drops stuff the browser does not understand. It's a very well-known issue for CSS polyfills.

[GeorgeTzellis]

I wasn't clear enough.

As far as I understand it, this is the chain of events when using -prefix-free:

1. The browser loads the css file
2. The browser styles the DOM as per the css file
3. -prefix-free XHRs the css file
4. -prefix-free parses the css file's text, adding prefixes where needed
5. -prefix-free adds an inline style element to the document with the parsed text

What I propose is that you remove step 5 altogether. Instead of adding an inline style element, update the already existing stylesheet per rule, with the text -prefix-free produces for that rule from the file's source.