cristianbote/goober

Goober is a css-in-js library that provides styled component functionality in under 1 kilobyte.

The project addresses the bundle size overhead of established css-in-js solutions by delivering a minimal implementation of the styled pattern. It achieves this through a lightweight API inspired by emotion's styled function, where you call styled with a tag name and receive a virtual DOM component. The tool handles style injection, autoprefixing, and theme support while maintaining an extremely small footprint compared to alternatives that require significantly larger dependencies.

Goober suits projects where bundle size matters and you need the styled component pattern without the weight of larger libraries. It works with React, Preact, vanilla JavaScript, and other frameworks. The README explicitly compares it to styled-components and emotion, noting those libraries require substantially more bytes. The tool supports server-side rendering, includes a Babel plugin and macro for optimization, integrates with Next.js and Gatsby, and provides TypeScript support. It also handles Content Security Policy constraints and includes an autoprefixer.

The project maintains active engagement with the community through conference talks and podcast appearances discussing the css-in-js approach. Development includes a public challenge inviting contributors to reduce the bundle size further with financial incentives. The codebase includes examples across multiple frameworks and platforms, demonstrating compatibility and providing reference implementations for adopters.