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

export function Hello() {
  return (
    <div
      {...apply({
        color: color.green500,
      })}
    >
      hello, world
    </div>
  )
}

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.

chbybnwr / vicinage

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

Vicinage ·

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

Vicinage lets you write strongly-typed CSS objects directly on your markup. At build time, it preprocesses them into StyleX API calls, which StyleX then extracts into zero-runtime atomic CSS, with no style block naming required.

Table of Contents

• Quick Start
• Setup
• Ecosystem
• Usage
  • Element styling
  • Component styling
  • Responsive styling
  • Pseudo-classes
  • Pseudo-elements
  • Variables
  • Cascade with StyleX styles
  • Conditional styling
  • Dynamic styling

Quick Start

• Next.js
• Vue

Setup

Vicinage is implemented as a preprocessor for StyleX.

Install the packages:

npm install vicinage @stylexjs/stylex
npm install --save-dev @vicinage/unplugin @stylexjs/unplugin

Add the plugin to your bundler configuration right before the StyleX plugin.

import { defineConfig } from 'vite'
import vicinage from '@vicinage/unplugin'
import stylex from '@stylexjs/unplugin'

export default defineConfig({
  plugins: [
    vicinage.vite(),
    stylex.vite(),
    // ...other plugins
  ],
})

…

View on GitHub