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:

• CSSX language

Editor Integration

• Vote for JetBrains 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