krasimir/cssx

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