https://github.com/jas-chen/teleport-css
A simple yet powerful CSS-in-JS library for React 19.
https://github.com/jas-chen/teleport-css
atomic-css css css-in-js react server-components streaming styling
Last synced: about 2 months ago
JSON representation
A simple yet powerful CSS-in-JS library for React 19.
- Host: GitHub
- URL: https://github.com/jas-chen/teleport-css
- Owner: jas-chen
- License: mit
- Created: 2025-01-22T06:04:04.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-08T00:26:20.000Z (about 1 year ago)
- Last Synced: 2025-10-28T03:36:53.653Z (5 months ago)
- Topics: atomic-css, css, css-in-js, react, server-components, streaming, styling
- Language: TypeScript
- Homepage:
- Size: 75.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://react.dev/reference/rsc/server-components).
- **Streaming Support**: Compatible with [React's streaming rendering](https://react.dev/reference/react-dom/server/renderToPipeableStream).
- **Atomic CSS, Minus the Pitfalls**: Achieve atomic CSS with ease, avoiding common issues \[[1](https://play.tailwindcss.com/9XhuiUFF6n)]\[[2](https://play.panda-css.com/269sbigMXM)].
- **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](https://bundlephobia.com/package/teleport-css).
## Prerequisites
- React 19
## Installation
```
npm i teleport-css
```
## Usage
```tsx
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 (
<>
({
'&:hover': {
backgroundColor: 'lemonchiffon',
},
})}
>
Test
Home
>
);
}
```
## Documentation
See [docs](/docs).
## Browser support
Browsers support `CSS Nesting` ([Baseline 2023](https://caniuse.com/css-nesting)).
## License
MIT