Skip to content

Latest commit

 

History

History
170 lines (129 loc) · 4.01 KB

cssx-lang.md

File metadata and controls

170 lines (129 loc) · 4.01 KB
Raw

CSSX language

CSSX is not a new language. It's still the CSS that we know and use every day. The difference is that we write it inside a JavaScript context. That's possible because we now have an access to CSSX transpiler. It understand and successfully transforms expressions like this:

sheet.add(<style>
  body {
    margin: 0;
    padding: 0;
  }
</style>);

The <style> tag returns a plain JavaScript array which we use together with CSSX stylesheet to manage our styles. For example, to append a new CSS rule for all paragraphs on our page we can use the following:

sheet.add(<style>
  p {
    font-size: 1em;
    line-height: 1.2em;
  }
</style>);

Language expressions

<style>selector { styles } ...</style>

It returns an array.

Example:

var sheet = cssx('id');
sheet.add(<style>
  body {
    margin: 0;
    padding: 0;
  }
</style>);

Same as:

var sheet = cssx('id');
sheet.add('body', {
  margin: 0,
  padding: 0
});

The id passed to cssx is optional. If you don't provide one the library will generate it for you. However, we should say that running only cssx() generates a new stylesheet every time. So if we plan to execute such code many times it's good to provide an ID.

<style>{ styles }</style>

It returns a vanilla JavaScript object literal.

Example:

var styles = <style>{
  font-size: 1em;
  line-height: 1.2em;
}</style>;

Same as :

var styles = {
  'line-height': '1.2em',
  'font-size': '1em'
};

Using JavaScript

We are writing CSSX in JavaScript context. So it has an access to all the data in the current scope.

var property = 'size';
var value = 18;
var sheet = cssx();

sheet.add(<style>
  body {
    font-{{ property }}: {{ value + 2 }}px;
  }
</style>);

There are three ways to define dynamic expressions:

  • ` ... ` (grave accents (backticks))
  • {{ ... }}
  • <% ... %>

The transpiler converts the string inside the expression to a valid JavaScript. The code above is transformed to the following:

var property = 'size';
var value = 18;
var sheet = cssx();

sheet.add((function () {
  var _3 = {};
  _3["font-" + property] = value + 2 + "px";
  var _2 = [];

  _2.push(['body', _3]);

  return _2;
}.apply(this)));

And the produced CSS:

body {
  font-size: 20px;
}

Prefixing

CSSX transpiler and CSSX client-side library do not auto prefix your CSS. However, there is a mechanism to produce prefixed version of the CSS properties.

// input
<style>
  .icon {
    (wmo)transform: translateX(20px);
  }
</style>

// output
.icon {
  transform: translateX(20px);
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -o-transform: translateX(20px);
}

Where

  • s - -ms- Microsoft
  • z - mso- icrosoft Office
  • m - -moz- Mozilla Foundation (Gecko-based browsers)
  • o - -o- -xv- Opera Software
  • t - -atsc- Advanced Television Standards Committee
  • p - -wap- The WAP Forum
  • w - -webkit- Safari, Chrome (and other WebKit-based browsers)
  • k - -khtml- Konqueror browser
  • a - -apple- Webkit supports properties using the -apple- prefixes as well
  • e - prince- esLogic
  • n - -ah- Antenna House
  • h - -hp- Hewlett Packard
  • r - -ro- Real Objects
  • i - -rim- Research In Motion
  • c - -tc- Tall Components

There is only one case where CSSX library generates prefixes automatically and that's when we use @keyframes.

Check out the plugin docs to see how to youse CSSX together with PostCSS.

Where to go from here

Check out CSSX client-side library or learn how to use the transpiler.