css.macro

A tiny CSS in JS solution for simple use cases, built with babel-plugin-macros and PostCSS.

<span
  className={css`
    color: #222222;
  `}
>
  Content
</span>

• Vendor prefixing with autoprefixer.
• Nested styles with postcss-nested.
• Write styles in tagged templates or objects.
• Tiny runtime (~200 Bytes).

Install

yarn add @hadeeb/css.macro
// OR
npm install @hadeeb/css.macro

You'll also need to install and configure babel-plugin-macros if you haven't already.

Usage

CSS

import { css } from "@hadeeb/css.macro";

<button
  className={css`
    font-weight: 500;
  `}
>
  Content
</button>;

Styled components

import { styled } from "@hadeeb/css.macro";

const StyledDiv = styled.div`
  font-weight: 500;
  span {
    font-size: 12px;
  }
`;
// OR
const StyledDiv = styled("div")`
  font-weight: 500;
  span {
    font-size: 12px;
  }
`;

styled can also wrap any component which accepts a className prop

import { styled } from "@hadeeb/css.macro";
import { Link } from "react-router-dom";

const StyledLink = styled(Link)`
  color: blue;
  &:hover {
    color: red;
  }
`;

Global styles

import { injectGlobal } from "@hadeeb/css.macro";
injectGlobal`
  body {
    margin: 0;
  }
`;

Style objects

Styles can also be declared as objects

Note: objects should be declared inline.

import { css, styled, injectGlobal } from "@hadeeb/css.macro";

<span className={css({ fontSize: 14 })}>Content</span>;

const StyledDiv = styled.div({
  fontWeight: 500,
  ".someClass": {
    fontSize: 12
  }
});

injectGlobal({
  ".root": {
    height: "100vh"
  }
});

Server Side Rendering

After rendering the components extract the CSS and add it to the DOM

import { extractCSS, styleID } from "@hadeeb/css.macro/server";

const styleTag = `<style id="${styleID}">${extractCSS()}</style>`;

Caveats

• Dynamic styles are not supported
• Style objects have to be declared inline