union-web
experimental web port of the Union style engine + adapters
styling theming css solidjs react union kde
Star
Fork
Watch
union-web docs index.md
2.5 kB · 27 lines
Markdown
at main

Union Web #

Union Web is a web implementation of the Union style engine. It 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.

For documentation on Union itself (concepts, CSS format, properties), refer to the official Union documentation at https://api.kde.org/union-index.html. This documentation focuses on how Union Web differs from native Union and how the web-specific packages work.

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 (@union-web/solid-plugin). The React plugin (@union-web/react-plugin) may lag behind in architecture and correctness until a future ratchet pass brings it up to parity.

Packages #

Package Description Status
@union-web/core CSS parser, selector matching, property resolution, color scheme resolver. Port of Union's C++ core types and algorithms. Active
@union-web/vite-plugin Vite plugin for build-time CSS parsing, variable resolution, and virtual:union-ir module. Extracted from react-plugin so both framework plugins can share it. Active
@union-web/solid-plugin SolidJS hooks (useUnion) and context (UnionIRProvider) for runtime style resolution. Typed UnionStyleProps + StyledRect preserves Union's semantic property model. Active (current focus)
@union-web/react-plugin React hooks (useUnion) and context (UnionIRProvider) for runtime style resolution. Uses flattened styleGroupToCss approach — may diverge from solid-plugin in architecture. Active (may lag)

Documentation #

  • Core — @union-web/core API reference and native-union parity table.
  • CSS Input Support — What CSS features from Union's input format are supported.
  • Solid Plugin — @union-web/solid-plugin API (current focus).
  • React Plugin — @union-web/react-plugin API (may lag behind solid).
  • Upstream Architecture — How native Union's pieces fit together (Positioner, StyledRectangle, element architecture, CSS alignment groups).
  • Pitfalls — Hard-won lessons from developing the plugin architecture.