It can be advantageous to write some components with some local CSS rules. This package leverages the native CSS nesting and produces a fast CSS-in-JS/Component solution: there is no parsing, just directly adding a style element to the <head> tag of the DOM.

We have produced a less than 700B package to write CSS-in-JS/Component for:

React: https://github.com/ndrean/bau-react-css
Preact: https://github.com/ndrean/bau-preat-css

These packages uses document so is not suited for SSR.

It exports the primitives: css, styled, createGlobalStyles and keyframes.

The api is very close to standard libraries.

Class

You write a template CSS string and pass it to the css function to produce a class:

const bluediv = css`
  background-color: bisque;
  color: midnightblue;
`;

You can use it:

<p className={bluediv}>A nice paragraph</p>

Styled component

You can use styled components in the form below. An example with an animation via keyframes:

const rescale = keyframes`
  0% {transform: scale(0.5)}
  100% {transform: scale(1)}
`;

const AnimSurf = (props) => styled("span", props)`
  font-size: ${props.size}em;
  animation: ${rescale} 2s ease infinite;
`;

You can use it:

<AnimSurf size={3}>🏄</AnimSurf>;

Conditional classes

You have two ways to use it. Define a function or object that returns CSS strings:

const styles = (props) => {
  base: `
    cursor: pointer;
    font-size: ${props.size ?? 1}em;
    border-radius: 0.3em;
    padding: 0.3em;
  `,
  danger: `
    color: red;
    animation: ${rescale} 1s ease infinite;
  `,
  disabled: `
    pointer-events: none;
    opacity: ${props.opacity};
  `;
}

You can write:

const Btn = (props)=> styled('button', props)`
  ${styles(props).base +
  props.danger ? styles(props).danger : ""}
`

<Btn>Base button</Btn>
<Btn danger={true} onClick={()=> alert('danger')}>Danger button</Btn>

To make life easier, the primitive styled can read the props and sets the class.

const Button = (props) => styled("button", props)`
  ${styles(props).base}
  ${styles(props)}
`;

We can use it:

<Button size={3}>Base button</Button>

<Button
  disabled
  className={css`
    box-shadow: 6px -6px teal;
  `}
  >
  Disabled with shadow
</Button>

You can use reactive styles with the style prop, extend classes for styled components, define global styles. Check the Readme and the example.

New CSS-in-JS lightweight packages for React and Preact

Class

Styled component

Conditional classes