CSSifyToJsonClassIndex (cssify-to-json-class-index)

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.

It is a reverse indexed version of cssify-to-json.

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.

Example :

Put that comment in some *.js file :

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

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

{
    ".aClassName": "ridge/bigRoundedCorner/border",
    ".anotherClassName": "spanHandle/bigRoundedCorner/flatLightButton_F",
    ".aThirdClassName": "border/roundedCorner/padding/ridge",
    ".aComplexClassName": "pattern/bigPadding/flexBoxColumn/roundedCorner/border/shadow/foregroundElem",
    ".aClassNameDefiningFlexElem": "flexBoxRow/flexCenter",
    ".text_input": "ridge",
    ".submit_button_elem": "pattern/groove/roundedCorner/buttonText",
    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-class-index', {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.

A CSS Example isn't really needed there :

The behaviors are defined as variables in a template file, and concatenated into .class selector rules