tweet-css.md

tweet-css

Smallest possible CSS-in-JS library.

• Try demo
• 178 bytes (minified and gzipped)
• Source code fits in a tweet
• Dynamic 4^th generation styling
• "jsxstyle" interface
• Pure React — no side effects
• Functional styles
• Theming support
• Universal rendering with no additional setup
• Inspired by nano-style

Usage

import {createElement as h} from 'react';
import {css} from './lib';

const jsx = css(h);

const Button = jsx('button', (props) => `
  color: white;
  background: ${props.primary ? 'blue' : '#555'};
  padding: 16px;
`);

<Button>Cancel</Button>
<Button primary>Submit</Button>

Library

ES5 version:

var id = 0;

exports.css = function(h) {
  return function(tag, css) {
    return function(props) {
      var cn = "_" + id++;
      var newProps = Object.assign({ className: cn }, props);
      var rawCss = "." + cn + "{" + css(newProps) + "}";
      return [
        h("style", {
          dangerouslySetInnerHTML: { __html: rawCss }
        }),
        h(tag, newProps)
      ];
    };
  };
};

ES6 version:

let id = 0;

export const css = h => (tag, css) => props => {
  const className = "_" + id++;
  const newProps = { ...props, className };
  const rawCss = "." + className + "{" + css(newProps) + "}";
  return [
    h("style", {
      dangerouslySetInnerHTML: { __html: rawCss }
    }),
    h(tag, newProps)
  ];
};