Home

Awesome

CSSX - CSS in JavaScript

Generate and/or apply CSS with JavaScript. Try it out here.


Demos

Language:

Editor Integration

Integration with other tools:

Plugins:

Examples:


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


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