CSS preprocessor to expand URLs and apply namespaces.


This CSS preprocessor does 3 things.

1) Add charset

Adds the following line to the top of the CSS file:

@charset "UTF-8";

and sets the content-type string attribute of the response file to text/css; charset=utf-8.

2) Apply namespaces

It finds any class selectors starting with a dash and prefixes them with a namespace.

For example, the following CSS snippet:

.foo .-bar {
    background: red;

could become this:

.foo .NA780EF99--bar {
    background: red;

where NA780EF99- contains a random sequence (hash) determined by the contents of the CSS file.

3) Expands URL references

It is looking for URL references like

.foo {
    background: url(bar.png);

Note that the file bar.png MUST BE a descendant of the CSS file itself, tipically being its child. URLs are resolved relative to the CSS file itself. If the above CSS snippet would be contained in the file /style.css, it will resolve something like

.foo {
    background: url(/style.css/bar.png?v=014c103059);

where v=014c103059 is used for caching. (v stands for version.)

NOTE that rewriting the URLs for caching will be moved to higher levels.

Implemented OS Interfaces