u/chbybnwr

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'
import { color } from 'solarwindcss/color.stylex'

export function Hello() {
  return (
    &lt;div
      {...apply({
        color: color.green500,
      })}
    &gt;
      hello, world
    &lt;/div&gt;
  )
}

Features:

Responsive
Pseudo-classes
Pseudo-elements
Logical styles
Dynamic styles
Pass styles between components

Works great with:

React / Next.js
Vue
Vite or any bundler via unplugin

Just put the Vicinage plugin before the StyleX plugin.

Need consistent design tokens? Check out SolarWind CSS, purpose-built tokens for Vicinage & StyleX (colors, spacing, typography, everything).

Try it, break it, tell me what you think. https://github.com/chbybnwr/vicinage

import { apply } from 'vicinage' import { color } from 'solarwindcss/color.stylex' export function Hello() { return ( <div {...apply({ color: color.green500, })} > hello, world </div> ) }

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

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