SYSTEM Cited by 1 source
StyleX¶
StyleX is Meta's open-source cross-platform CSS library. It works alongside react-strict-dom to provide design tokens (font sizes, colours, borders, spacing) and CSS-in-JS-style component styling that compiles down to platform-appropriate output: regular CSS on web, native style objects on React Native.
What it does¶
- Tokens — named styling variables (e.g.
tokens.colorBackgroundDefault,tokens.borderWidthS,tokens.colorBorderSecondary) that behave like CSS variables and resolve to per-platform values. - Polyfilled CSS subset — pseudo-classes (
:hover) and media queries on platforms where they aren't native. - Compile-time CSS emission on web — styles are hoisted into a static CSS file; no runtime styling cost in the browser.
Example usage (Zalando's design-system component library)¶
import { tokens } from "@zds/tokens/tokens.stylex";
export const DefaultMessage = ({ style, ...props }: MessageProps) => {
const defaultStyle = [styles.primaryStyle, style];
return <BaseMessage {...props} style={defaultStyle} />;
};
const styles = css.create({
primaryStyle: {
backgroundColor: tokens.colorBackgroundDefault,
borderWidth: tokens.borderWidthS,
borderColor: tokens.colorBorderSecondary,
borderStyle: "solid",
},
});
Every token resolves to the right value on the target platform: CSS variable on web, RN style primitive on mobile. This is the substrate for Zalando's cross-platform design-token theming.
Seen in¶
- sources/2025-10-02-zalando-accelerating-mobile-app-development-with-rendering-engine-and-react-native — Zalando's styling layer for their cross-platform (web + iOS + Android) design system. Pairs with react-strict-dom; provides tokens + pseudo-class + media-query polyfills. On web, StyleX compiles to a regular CSS file — no runtime styling cost in the browser.