Union Web (Experimental) #

Experimental web implementation of Union, KDE's style engine. Reuses Union's CSS input format and matching semantics but replaces Union's C++ core and Qt output plugins with TypeScript packages for web applications.

Documentation: docs/index.md

Development Status #

This project uses a ratcheting development style — only one output runtime is actively maintained at a time. Currently that is the SolidJS plugin. See docs/index.md for details.

Packages #

Package	Description
@union-web/core	CSS parser, selector matching, property resolution, UnionStyleProps output, KColorScheme resolver, variable resolver
@union-web/vite-plugin	Vite plugin for build-time CSS parsing, variable resolution, and virtual:union-ir module
@union-web/solid-plugin	SolidJS hooks (useUnion) and context (UnionIRProvider) for runtime style resolution via StyledRect — currently active
@union-web/react-plugin	React hooks (useUnion) and context (UnionIRProvider) for runtime style resolution via inline styles — may lag behind
@union-web/positioner-sandbox	Port of Union's PositionerLayout engine — study/sandbox tool with CLI and browser dev modes. npm run dev:pos

Quick Start #

npm install
npm run build          # compile TypeScript packages
npm run dev:solid      # start Vite dev server (solid-demo)
npm run dev:pos        # start Vite dev server (positioner-sandbox)
npm run dev            # start Vite dev server (react-demo)

Input Structure #

input/
  themes/      -- union CSS theme files (e.g. breeze/)
  colors/      -- KDE .colors files (e.g. BreezeLight.colors)
  defaults/    -- base default CSS