Summary

This app works like the css-2 app, but instead of loading the CSS code from the file’s body, it uses the response of its only child file. Thus it allows dynamically generating the used CSS code, for example using a CSS preprocessor, or any other program that returns CSS code.

Note: it must contain exactly one child, which implements the .Request interface, and returns text/css content.

Example

Imagine you want to centrally manage the colors used on your website. You would create a file that stores all your color variations. That file could be stored at /colors. For now, let’s assume it contains a single color definition:

{
    "title": "",
    "link": "",
    "type": "",
    "statusCode": 0,
    "attr": {
        "blue string": "#0000FF"
    }
}

Let’s see how we could use it with the css-2-wrapper app. Because it is a wrapper, we will wrap an sjs-3 app that generates CSS code. We will use the following file layout:

/style.css                [type: css-2-wrapper]
/style.css/generate.js    [type: sjs-3]

The style.css file will have no file body. The contents of the generate.js file could be:

colors = f.select('/colors')
response.body('.blue { color: '+colors.attrStr('blue')+'; }')
response.attrStr('content-type', 'text/css')

This will return CSS code that is not namespaced, with the dynamically defined blue color:

.blue { color: #0000FF; }

Here kicks the css-2-wrapper into action. It will parse the CSS and apply transformations according to the rules defined in the .CssModule spec.

When responding to .Request calls, the resulting namespaced CSS will be returned. When responding to .CssModule calls, a class name mapping and other relevant data needed for using CSS modules will be returned.

Implemented OS Interfaces

.CssModule
.Request