Introducing CSSX for Meteor

announce
1

Meteor package to preprocess CSSX syntax

Install

meteor add quadric:cssx

Usage

First, create *.cssx files in your codebase like that:

// myComponent.cssx

export default ({ margin= 0 }) => (
  <style>
    div {
      margin: {{ margin }}px;
      background-color: #F9F9F9;
    }

    div span {
      font-weight: bold;
    }

    div:hover {
      background-color: red;
    }
  </style>
);

Then, choose one of the following options:

* Inline Usage

Consume it as a styling object, applying the styles on each element.

// myComponent.jsx
import rules from './myComponent.cssx';

const style = rules({ margin: 10});

export default = () => (
  <div style={style.div}>
    <span style={style['div span']}>Hello World!</span>
  </div>
);

* React wrapper

Install the CSSX wrapper and let it apply the rules in the tree for you.

// myComponent.jsx
import CSSX from 'react-cssx';
import style from './myComponent.cssx';

const style = rules({ margin: 10});

export default = () => (
  <CSSX style={style}>
    <div>
      <span>Hello World!</span>
    </div>
  </CSSX>
);

For more, please visit the project’s repository.

5 Likes
2

i feel old
[20 characters]

1 Like