Support for CSS server-side frameworks

Question

Originally reported on Google Code with ID 5961

As per a request from Honza, I am filing an enhancement request so we can track progress
& interest in this topic.

With the increasing popularity of CSS coding frameworks like less & Sass, the CSS wilderness
is a changing. At its simplest level, these frameworks offer bundling of files (many
CSS files into 1) to limit HTTP requests for more responsive online applications.

This causes a serious headache for developers when using firebug, as it is reporting
the file name and line number in the bundled file (Note: This is accurate from the
client side perspective, but it makes development difficult). On the server side however,
the actual rule could be in one of many files, and even when the file name is correct,
the line line numbers are inaccurate due to the server side importing of the other
CSS files.

However, these frameworks provide an option to output a /* CSS Comment */ including
the original line number and file name where the rule is declared, removing the confusion.


The goal of this feature improvement:
To take into account that server-side css tools like less and Sass obfuscate css by
combining several files into 1 for the performance gain of fewer HTTP requests and
to report the correct server-side file name and line number withing firebug.  For my
test case at this point in time, I am only expecting this functionality when less is
in debug mode.  On a production server, the css is minified, making line numbers meaningless.

Note: There are many other beneficial features of these frameworks, but they are not
relevant to the issue at hand


Firebug version (number): 1.11.0a3
Browser version: FF 15+
Operating system: ALL

Related Links:
Google Groups Thread: 
https://groups.google.com/forum/?fromgroups=#!topic/firebug/FDABedlYeok
Firebug Pull request with a temp fix to the firebug base:
https://github.com/firebug/firebug/pull/45
fireless plugin (being developed as a test case):
https://github.com/janodvarko/fireless
My fork of the fireless project:
https://github.com/jc4rp3nt3r/fireless
Demo Site using dotLess (a less css port for the .Net framework):
http://fireless.client.mojoactive.com/

Reported by nomadic.design on 2012-10-05 14:43:22

该提问来源于开源项目：firebug/firebug

Answer 1

The initial Alpha release of the plugin is ready:
https://github.com/jc4rp3nt3r/fireless

I provided a compiles XPI file for ease of install.

So far, this plugin has only been tested against dotLess, the .NET port of the {less}
framework.

I hope to do a little research against the ports in other languages to see if what
I have so far will work or not.  If anyone has a Ruby or PHP version of {less} installed
and available with the debug settings turned on, that would help me get this plugin
up to speed faster.

Reported by nomadic.design on 2012-10-07 06:08:31