Awesome
CSSX - CSS in JavaScript
Generate and/or apply CSS with JavaScript. Try it out here.
Demos
- Transpilation process - you write JavaScript that contains CSSX and see AST, transpiled JavaScript and the produced CSS
- JS + HTML + output - you write JavaScript that contains CSSX + HTML markup and see the result when the CSS is applied to the DOM
- JS + output - same as a above but without changing the markup
Language:
Editor Integration
Integration with other tools:
- JSS or alternatively CSSX client-side library (download or
npm i cssx
) - CSSX-transpiler (download or
npm i cssx-transpiler
) - CSSX-CLI (
npm i cssx-cli -g
) - Gulp plugin (
npm i gulp-cssx -D
) - Webpack loader (
npm i cssx-loader -D
) - Meteor package (
meteor add quadric:cssx
) - Browserify transform (
npm i browserify-cssx -D
) - CSSX component for React
- jspm integration
- ESLint plugin
- Rollup plugin
Plugins:
- CSSX plugins - See how to create CSSX plugins or use PostCSS plugin collection together with CSSX.
Examples:
- Try it out
- Try it out (developer edition)
- Basic
- Transpiling
- Transpiling with gulp
- Transpiling with webpack
- In React component
- Using with jss
- (at build time) CSSX together with PostCSS and Autoprefixer
- (at runtime in a browser) CSSX together with PostCSS and a plugin
- Bundling with jspm
Premise
CSSX is not only about writing vanilla CSS in JavaScript. Even though you get this the main idea here is to have a good API for managing styles. CSSX doesn't inline styles so you keep your markup clean. It works directly with injected stylesheets. Here is a short example:
function setStyles (fontSize, margin) {
return <style>
body {
font-size: {{ fontSize }}px;
line-height: {{ fontSize * 1.2 }}px;
margin: {{ margin }}px;
}
</style>
}
var sheet = cssx();
sheet.add(setStyles(20, 6));
sheet.add(<style>
p > a {
text-decoration: none;
color: #F00;
}
</style>);
The code above is transpiled into valid JavaScript that uses the CSSX client-side library:
function setStyles(fontSize, margin) {
return (function () {
var _3 = {};
_3['margin'] = margin + "px";
_3['line-height'] = fontSize * 1.2 + "px";
_3['font-size'] = fontSize + "px";
var _2 = [];
_2.push(['body', _3]);
return _2;
}.apply(this));
}
var sheet = cssx();
sheet.add(setStyles(20, 6));
sheet.add((function () {
var _6 = {};
_6['color'] = '#F00';
_6['text-decoration'] = 'none';
var _5 = [];
_5.push(['p > a', _6]);
return _5;
}.apply(this)));
And it results in the following CSS:
body {
margin: 6px;
line-height: 24px;
font-size: 20px;
}
p > a {
color: #F00;
text-decoration: none;
}
How to use CSSX
- CSSX could be considered a pattern where we dynamically create CSS stylesheets and control their content with JavaScript. The bare minimum is including CSSX client-side library on the page. Doing that you'll have an access to the top level API. The same library is published to npm so
npm install cssx -S
. - If you want to use the CSS-ish syntax in JavaScript then you'll need the transpiler. It's a available as a standalone file, but it's not recommended using it in the browser. What you should do is integrating the transpiler in your build process.
Testing
npm test
or if you want to run the tests continuously
npm run test-watch
or if you want to run the tests in a debug mode
npm run test-debug
Building
npm i
npm run make
Developing
npm i
npm run dev