Transpiler for CSSX syntax
> Transpile tags to valid JavaScript.
---
npm install cssx-transpiler -D
---
``js
var cssxTranspiler = require('cssx-transpiler');
var code = require('fs').readFileSync('./file.js', { encoding: 'utf8' }).toString();
/* let's say that the file contains =
var styles = function (margin) {
return
};
*/
var transpiled = cssxTranspiler(code, { minified: false });
console.log(transpiled);
/*
var styles = function (margin) {
return (function () {
var _2 = {},
_3 = {};
_3['margin'] = margin + "px";
_3['padding'] = '0';
_2['body'] = _3;
return _2;
}.apply(this));
};
*/
`
---
#### cssxTranspiler(,
* code - stringoptions
* - key-value pairs. The available options are: minified, compact, concise, quotes. All the options are booleans.
Returns a transpiled version of the code;
#### cssxTranspiler.ast()
* code - string
Returns abstract syntax tree.
#### cssxTranspiler.reset()
While transpiling the module is creating bunch of unique ids in the format of _. This method resets the number to 0.
---
CSSX transpiler is basically CSS to JSON process:
`css`
.container {
margin: 10px;
padding: 20px;
}
is transformed to
`json`
{
".container": {
"margin": "10px",
"padding": "20px"
}
}
Nested styles like media queries:
`css`
@media (max-width: 450px) {
.container {
width: 100%;
}
}
results to:
`json`
{
"@media (max-width: 450px)": {
".container": {
"width": "100%"
}
}
}
The libraries deals with same name properties in the following way:
`css`
body {
background: red;
background: url(../img/image.png);
}
results to:
`json``
{
"body": {
"background": [
"red",
"url(../img/image.png)"
]
}
}
---
CSSX language*
* CSSX client-side library