cssify-to-json/README.md

CSS pseudo-rules parser, to be used as a transform for Browserify

# 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](https://www.npmjs.com/package/cssify-to-json-class-index "CSSifyToJsonClassIndex"). 

Example :

Put that comment in some *.js file :

```javascript
\*
 * @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 :

```json
{
	"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

```javascript
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](https://www.spip.net/en_article6575.html "Spip loves Big Data") 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

```css
/*
 * 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;
}
```