Introduction · Usage · Writing a Plugin · API · JSON Syntax
CCCP lets you use CSS as JSON on the client-side and still apply PostCSS plugins.
body {
font-size: 16px;
}
[0, [2, "body", [3, "font-size", "16px"]]]
cccp.render(json, [plugins]); // creates <style> with css from json
Normally, including PostCSS in the browser would consume 30KB, while this script is only 1KB.
Add CCCP to your build tool:
npm install cccp --save-dev
require('cccp/postcss').process(YOUR_CSS, { /* options */ });
Add PostCSS to your build tool:
npm install postcss --save-dev
Use CCCP as a plugin
postcss([
require('cccp/postcss')({ /* options */ })
]).process(YOUR_CSS, /* options */);
Add Gulp PostCSS to your build tool:
npm install gulp-postcss --save-dev
Use CCCP in your Gulpfile:
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('./src/*.css').pipe(
postcss([
require('cccp/postcss')({ /* options */ })
])
).pipe(
gulp.dest('.')
);
});
Add Grunt PostCSS to your build tool:
npm install grunt-postcss --save-dev
Use CCCP in your Gruntfile:
grunt.loadNpmTasks('grunt-postcss');
grunt.initConfig({
postcss: {
options: {
use: [
require('cccp/postcss')({ /* options */ })
]
},
dist: {
src: '*.css'
}
}
});
Type: Path
| Function
Default: ${ css.source.input.file || path.join(process.cwd(), 'index') }.json
The path to the JSON file generated by the CSS. If a function is passed, the plugin will send the non-stringified JSON to that function, rather than write the stringified JSON to a file.
CCCP plugins are very similar to PostCSS plugins with a few key differences:
- Plugins do not declare themselves with
postcss.plugin(name, plugin)
. Let source maps handle tracking. - Plugins hook into a single walker to save processing.
- Plugins have less methods;
remove()
becomes an emptyreplaceWith()
andremoveAll()
becomes an emptyreplaceChildren()
— less methods provide small savings, but the repetitions due to less methods improve gzipping.
Plugins contain keys that intercept a specific kind of node.
module.exports = {
root(node) {
// do something with a root, similar to how PostCSS works
},
atrule(node) {
// do something with an at-rule
},
rule(node) {
// do something with a rule
},
decl(node) {
// do something with a declaration
}
};
cccp
is a global object containing methods to process JSON as CSS.
cccp.process( json, plugins )
Parses the JSON. Returns a Promise of the resulting CSS.
cccp.render( json, plugins )
Parses the JSON and inserts the resulting CSS into a new <style>
element on the page. Returns a Promise of the resulting CSS.
CCCP nodes share the same methods as their PostCSS counterparts, only with a little less sugar.
node.type // 'root' | 'atrule' | 'rule' | 'decl'
The type of the current node.
node.nodes // ...nodes
The array of children of the current node.
node.name // string name
The name of the current atrule node (e.g. media
).
node.params // string params
The params of the current atrule node (e.g. screen and (min-width: 1200px)
).
node.selector // string selector
The selector of the current rule node (e.g. #the.quick[data-brown="fox"]
).
node.prop // string property
The property of the current declaration node (e.g. background-color
).
node.value // string value
The value of the current declaration node (e.g. blue url(background.jpg) no-repeat
).
The type of node being worked with.
node.replaceWith( ...nodes )
Replaces the current node with nodes. Returns the current node.
If you need to remove a node, pass no arguments to Node#replaceWith()
.
node.before( ...nodes )
Inserts nodes before the current node. Returns the current node.
node.after( ...nodes )
Inserts nodes after the current node. Returns the current node.
node.clone( ...props )
Returns a clone of the current node using properties you specify.
node.prepend( ...nodes )
Inserts nodes as starting children of the current node. Returns the current node.
node.append( ...nodes )
Inserts nodes as ending children of the current node. Returns the current node.
node.replaceChildren( ...nodes )
Replaces all children of the current node with nodes. Returns the current node.
If you need to empty a node of children, pass no arguments to Node#replaceChildren()
.
node.walk( callback )
Traverses the current node’s descendants with the callback (until the callback returns false
). Returns the current node.
If you need to iterate through a Node’s immediate children, use Node.nodes#forEach
.
It is recommended that you use the PostCSS plugin to generate the JSON version of a CSS tree.
[ 0, ...nodes ]
A root contains child nodes.
[ 1, name, params, ...nodes ]
An atrule contains a name, params, and any child nodes.
[ 2, selector, ...nodes ]
A rule contains a selector and any child nodes.
[ 3, prop, value ]
A decl contains a property and value.