Building Fluentic Style: Bringing the `css` Prop to SolidJS
This is part of my Building Fluentic Style series, where I’m writing down the design decisions, tradeoffs, and small surprises from building Fluentic Style . Fluentic started as a styling model I was exploring for React web apps. The shape was inspired by the style composition I liked from React Native: < View style = { [ base , active && activeStyle , props . style ] } /> For web JSX, that…
This is part of a series about designing a new styling model called Fluentic, which started as an exploration for React web apps. The concept is similar to how style composition works in React Native. In Fluentic, styles are composed using a base style, conditional styles, and component styles. The styling model is decoupled from React and can be used with other JSX frameworks like SolidJS.
The core idea is to keep the styling model consistent, and only change the final CSS prop handoff to fit the target framework. For SolidJS, Fluentic adapts its CSS prop to work with Solid's DOM elements. The integration process involves using the Fluentic Vite plugin before vite-plugin-solid to ensure Solid compiles Solid JSX, while Fluentic only handles the styling handoff.
This allows Solid apps to use Fluentic's styling model while retaining the familiar SolidJS compiler path.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
