DEV Community: chbyb

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

chbyb — Wed, 20 May 2026 16:07:40 +0000

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

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

GraphQL eXpansion

chbyb — Sat, 01 Feb 2025 08:07:21 +0000

Excited to share a sneak peek of something I've been working on: GraphQL eXpansion, a library designed to make GraphQL schema authoring less of a hassle by automating the repetitive bits.I've put together a quick demo to show off what this library can do.

If you dive into GraphQL often and are looking for ways to boost your productivity, this might just be the tool for you!

Would love to hear your thoughts and any feedback you might have.

https://graphql-x.web.app

Streamlined async operations for Vue. https://github.com/tenex-engineering/vue-async-operations

chbyb — Thu, 12 Dec 2024 09:33:37 +0000

Natural Vue defineProps

chbyb — Tue, 20 Jun 2023 05:35:26 +0000

What if we have something like this?

const props = defineProps(
  /**
   * @param {{
   *   foo: boolean,
   *   bar: number,
   * }} props
   */
  (
    props = {
      foo: false,
      bar: 0,
    }
  ) => props
)

in typescript

const props = defineProps(
  (
    props: {
      foo: boolean,
      bar: number,
    } = {
      foo: false,
      bar: 0,
    }
  ) => props
)

Correlation Between Editor Theme and Headache Frequency

chbyb — Mon, 24 May 2021 10:54:35 +0000

Do you want to know what theme correlated to more frequent headache statistically?
Click the tweet below and find out, so you have yet another argument when someone brings it up.

// Detect dark theme var iframe = document.getElementById('tweet-1396780228781871107-236'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1396780228781871107&theme=dark" }

To .value or not to .value. That is the vuestion.

chbyb — Wed, 14 Oct 2020 05:54:50 +0000

Vue 3 with composition api introduces some new ways to create reactive or observable value. There are reactive, ref, and computed. They have quirk in terms of their syntax. Let's use hot food to show it.

Reactive Object

import { reactive, computed } from 'vue'

const coolTemperature = 22

export function useHotFood({ temperatureInCelcius }) {  
  const state = reactive({
    temperatureInCelcius,
    isHot: computed(
      () => state.temperatureInCelcius > coolTemperature
    ),
  })

  function blow() {
    state.temperatureInCelcius -= 10
  }

  // ...

  return {
    state,
    blow,
  }
}

State would lost reactivity if destructured, so it have to be returned as is.

// Using reactive object named state
const hotFood = useHotFood({ temperatureInCelcius: 100 })
hotfood.state.temperatureInCelcius
hotfood.state.isHot
hotfood.blow()

Ref/Computed Object

import { ref, computed } from 'vue'

const coolTemperature = 22

export function useHotFood(args) {  
  const temperatureInCelcius = ref(args.temperatureInCelcius)
  const isHot = computed(
    () => temperatureInCelcius.value > coolTemperature
  )

  function blow() {
    temperatureInCelcius.value -= 10
  }

  // ...

  return {
    temperatureInCelcius,
    isHot,
    blow,
  }
}

Ref value have to be accessed through its value property. Ref may be unwrapped in template, but it causes syntax inconsistency, between template and script block.

// Using ref for each prop of state
const hotFood = useHotFood({ temperatureInCelcius: 100 })
hotFood.temperatureInCelcius.value
hotFood.isHot.value
hotFood.blow()
// or
const {
  temperatureInCelcius, isHot, blow
} = useHotFood({ temperatureInCelcius: 100 })
temperatureInCelcius.value
isHot.value
blow()

This overhead of remembering whether to use .value or not, makes people confused. But it doesn't have to.

Enter vue-extend-reactive

To achieve terser syntax, one way is to extend reactive object, maybe with another reactive object (like getters), or methods.

Reactive object can contain methods when using javascript, but make it more verbose to call it in same block, and create error when using typescript.

And thats why vue-extend-reactive is created,to enable reactive object extension leveraging Proxy object.

Extend reactive object returned from composition function with additional reactive object(such as getters), or additional methods to get these benefits:

Simplify api of object returned by a composition function.
Eliminate overhead thinking of whether to use or not to use value property of ref or computed object to get its value.

Installation

Using NPM

npm install vue-extend-reactive

Using Yarn

yarn add vue-extend-reactive

Usage

import { reactive, computed } from 'vue'
import { extend } from 'vue-extend-reactive'

const coolTemperature = 22

export function useHotFood({ temperatureInCelcius }) {  
  const state = reactive({
    temperatureInCelcius,
    isHot: computed(
      () => state.temperatureInCelcius > coolTemperature
    ),
  })

  function blow() {
    state.temperatureInCelcius -= 10
  }

  // ...  

  return extend(state, { blow })
}

Below is the end result after returning extended reactive object.

const hotFood = useHotFood({ temperatureInCelcius: 100 })
hotFood.temperatureInCelcius
hotFood.isHot
hotFood.blow()

This helper is compatible with both Vue 2 (using @vue/composition-api) and Vue 3.

There is one caveat that returned reactive object cannot be destructured as it will lost reactivity, but that is a sacrifice I am willing to make, to get terser and more consistent syntax.

Lastly, I hope this is the way vue package authors create their composition functions or hooks.

Links: