Wrong source maps created by Libsass for CSS files in a JSF project

Question

I'm using Libsass (by means of libsass-maven-plugin) for compiling SASS files into CSS files in a JSF project. The outputStyle is "compressed". The resultant source maps are apparently wrong - when inspecting something in a browser, it often points to a wrong source file. Why is this happening?

Answer 1

During the build Libsass evaluates the provided CSS files, and references their code in the created source maps in the form of encoded line and column numbers. The "compressed" outputStyle means that all code is in a single line, so the source maps are forced to rely on column numbers only.

Now, JSF CSS files often contain EL resource expressions like this:

.ui-icon-info {
    background-image: url("#\{resource['images/info.png']}");
}

These expressions are evaluated in runtime and replaced with URLs. This means that served CSS is different from the one that Libsass based its source maps on. That's why the maps are wrong - their column number references no longer match.

A possible workaround could be to use an outputStyle other than "compressed", e.g. "expanded". Then at least the line numbers are correct, that should be good enough. Just don't break those EL expressions into multiple lines.