css-1

CSS preprocessor to expand URLs and apply namespaces.

Description

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

.Main
.Request
Subscribe to our newsletter!