aneto's Introduction

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

Recommend Projects