Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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:

Plugins:

  • CSSX plugins - See how to create CSSX plugins or use PostCSS plugin collection together with CSSX.

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

  • 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

About

CSS in JavaScript

Resources

License

Packages

No packages published

Languages

You can’t perform that action at this time.