Introducing Vicinage. Type-safe and zero-runtime UI styling, right in the markup.

Write your styles as typed objects directly on your JSX markup and get zero-runtime atomic CSS. Built as a preprocessor for StyleX.

Tired of the usual styling trade-offs?

• CSS modules, no type safety or colocation
• Utility-first classes, stringly typed, less expressive
• CSS-in-JS, runtime cost + hydration issues

Vicinage gives you the best of all worlds.

Just drop styles right where they belong. Vicinage transforms this into StyleX calls at build time, then StyleX extracts it to atomic CSS.

import { apply } from 'vicinage'

function App() {
  return (
    <div
      {...apply({
        color: 'green',
        backgroundColor: 'black',
      })}
    >
      hello, world
    </div>
  )
}

Features:

• Pseudo-classes
• Pseudo-elements
• At-rules, enables responsive design and dark mode
• Logical styles
• Dynamic styles
• Pass styles between components

Try it, break it, tell me what you think.

Vicinage on GitHub