teleport-css

Teleport CSS

A simple yet powerful CSS-in-JS library for React 19.

Features

• Plug-and-Play: Works out of the box—no need for bundler or PostCSS configuration.
• React Server Components (RSC) Support: Seamlessly integrates with React Server Components.
• Streaming Support: Compatible with React's streaming rendering.
• Atomic CSS, Minus the Pitfalls: Achieve atomic CSS with ease, avoiding common issues [1][2].
• Optimized for Component Libraries: Specifically designed to streamline the creation of reusable component libraries.
• Lightweight: 2.1kB minified and gzipped. Check bundle size on Bundlephobia.

Prerequisites

• React 19

Installation

npm i teleport-css

Usage

import { create } from 'teleport-css';
// Use your preferred hash algorithm
import fnv1a from '@sindresorhus/fnv1a';

function hashFn(value: string) {
  return fnv1a(value, { size: 64 }).toString(36).slice(0, 8);
}

const { styled, keyframes, cloneAs } = create({
  hashFn,
  context: {
    breakpoints: {
      md: '768px',
    },
  },
});

const animation = keyframes((context) => ({
  from: { transform: 'rotate(0deg)' },
  to: { transform: 'rotate(360deg)' },
}));

const Button = styled('button', (context) => ({
  animation: `${animation} 1s ease infinite`,
  backgroundColor: 'pink',
  [`@media (width >= ${context.breakpoints.md})`]: {
    backgroundColor: 'gold',
  },
}));

const ButtonAsLink = cloneAs(Button, 'a');

function App() {
  return (
    <>
      <Button
        type="button"
        css={(context) => ({
          '&:hover': {
            backgroundColor: 'lemonchiffon',
          },
        })}
      >
        Test
      </Button>
      <ButtonAsLink href="/">Home</ButtonAsLink>
    </>
  );
}

Documentation

See docs.

Browser support

Browsers support CSS Nesting (Baseline 2023).

License

MIT