Aneto

A simple, dependency-free, ~823 byte (min), zero cost CSS-in-JS solution for React.

Aneto is perfect if:

• You want a CSS-in-JS solution for convenience (no CSS import) and/or co-locating your CSS.
• You're OK with writing vanilla CSS with no nesting, auto vendor prefixing etc.
• You're OK with non-hashed classes and instead applying a convention like BEM, which could arguably be better for users of your components.
• You want something with the same performance profile as vanilla CSS.
• You want something that barely adds any size to your bundle.
• You want something that doesn't require any special build tooling.

Usage

Your app or top level component:

import * as React from 'react';
import { useTheme, useStyle, css } from 'aneto';

const defaultTheme = {
  appFont: 'sans-serif',
  buttonBg: 'red',
  buttonPadding: '10px',
  buttonPaddingSmall: '5px',
};

export function App({ theme = defaultTheme }) {
  useTheme('xx', theme);
  useStyle('app', componentStyles);

  return (
    <div className="app">
      <Button size="small">Some button</Button>
    </div>
  );
}

const componentStyles = css`
  .app {
    height: 100%;
    font-family: var(--xx-appFont);
  }
`;

A sub level component:

import * as React from 'react';
import { useStyle, css } from 'aneto';

export function Button({ size = 'normal', children, ...attrs }) {
  useStyle('button', componentStyles);

  return (
    <button className={`button button--${size}`} {...attrs}>
      {children}
    </button>
  );
}

const componentStyles = css`
  .button {
    background: var(--xx-buttonBg);
    padding: var(--xx-buttonPadding);
  }
  .button--small {
    padding: var(--xx-buttonPaddingSmall);
  }
`;

CSS syntax highlighting

The sole purpose of the css tagged template literal is to provide the same syntax highlighting as can be used with Emotion and Syled Components: https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components