CSSifyToJson (cssify-to-json)

This transform implements a way to evaluate some sort of "custom CSS rules" in the .js files, to be used by a template compiler to generate a *.css file defining "styling behaviors" through a set of composed CSS rules. It allows you, for any Vanilla Javascript component, to declare directly in the .js file, the "styling behavior" that component uses.

How it works :

When bundling CommonJS file structure with Browserify, this transform looks for "@CSSify" rules declared as commentaries in the *.js files.

Found rules are grouped in a newly created JSON file in a path relative to the bundle's root path.

See also the class indexed version cssify-to-json-class-index.

Example :

Put that comment in some *.js file :

\*
 * @CSSify exports: .aClassName stdTextColor/bevel/roundedCorner/etc.
 */

The transform will generate a file named jsComponents_css_compile.json.html in the <%=pathToProject%>/css/ folder, with the following content :

{
    "foregroundColor":"",
    "stdTextColor":".aClassName",
    "emphasizeTextColor":"",
    "border":"",
    "bevel":".aClassName",
    "roundedCorner":".aClassName",
    etc.
}

And will continue to associate CSS class names with "behavior" pseudo-rules as it finds them in other *.js files.

Basic usage

example gruntfile.js with grunt-browserify

module.exports = function (grunt, options) {

    //...[here you define the variables you use : pathToProject, currentProject... with the "grunt" mechanism of your choice]
    
    grunt.initConfig({
        browserify : {
            release: {
                files: {
                    '<%=pathToProject%>js/<%=currentProject%>.dist.js': ['<%=pathToProject%>src/index.js']
                },
                options: {
                    transform: [['cssify-to-json', {pathToProject : options.pathToProject}]]
                }
            }
        }
    }
}

Notes

I'm using Spip as a serverside template compiler (php), to parse the JSON, aggregate other technologies, generate and cache the CSS files.

Please let me know if you need adaptating this transform to another compiler, or if you wrote such a fork.

Resulting CSS Example

/*
 * Stackable styles definitions
 * 
 * Spip adds here the classes of the JS compenents
 * that wish to be applied a generic CSS behavior 
 */

.foregroundElem  {
    background-color : #242424;
}
.stdTextColor, .aClassname  {
    color : #EFEFEF;
}
.emphasizeTextColor  {
    color : #FEFEFE;
}
.border  {
    border : 1px solid #d7d7d7;
}
.bevel, .aClassname  {
    border : 1px solid;
    border-color : #d7d7d7 #d3d3d3 #d7d7d7 #d3d3d3;
}
.roundedCorner, .aClassname  {
    border-radius : 4px;
}
.bigRoundedCorner{
    border-radius : 7px;
}
.flatLightButton {
    background-color : #EFEFEF;
}