StyleX and TYPO3: Better Styling Results with AI

StyleX is currently getting a lot of attention, especially in connection with AI-powered front-end development (see, for example, Tailwind CSS vs. StyleX: Why People Are Switching). 
StyleX itself is a system developed by Meta for writing styles in JavaScript or TypeScript. 
In December 2023, StyleX was finally released as open source, after having been in use since 2019 across all Meta platforms, such as Facebook, Instagram, WhatsApp (Web / surfaces), Messenger, Threads, etc.
But now, more and more other companies, such as Figma, Snowflake, HubSpot, Linear and Polar are migrating their applications to StyleX.

This naturally raises the question: Why? 

What are the advantages of StyleX?

The biggest advantage is likely that AI assistants can handle StyleX much better than classic CSS, Bootstrap, or Tailwind. This is due to the clear, simple rules: Your assistant finds the intended design values in the code, and the combination of styles becomes easier to understand. A small example is the best way to show exactly how this works.

Understanding StyleX, from design tokens to the finished HTML

In the tokens.stylex.js file, you first define the design values—or “variables”—for your website:

import * as stylex from ‘@stylexjs/stylex’;

export const tokens = stylex.defineVars({
    ‘--site-color-accent’: ‘#5b35d5’,
    ‘--site-color-surface’: ‘#ffffff’,
    ‘--site-space-sm’: ‘1.5rem’,
    ‘--site-space-md’: ‘2.5 rem’,
	'--site-space-lg': ‘3.5 rem’,
    ‘--site-radius-sm’: ‘0.75 rem’,
});

These are design tokens. Each token assigns a name to a design value. For example, `--site-space-sm` describes a small inner spacing. I deliberately chose names starting with `--` so that standard CSS can use these exact variables later on. StyleX explicitly supports such named CSS custom properties—more on that later. Variable API.

The small card component uses these tokens in Card.stylex.js:

import * as stylex from ‘@stylexjs/stylex’;
import { tokens } from ‘./tokens.stylex.js’;

export const styles = stylex.create({
    root: {
		backgroundColor: tokens[‘--site-color-surface’],
        padding: tokens[‘--site-space-sm’],
        borderRadius: tokens[‘--site-radius-sm’],
    },
    title: {
        color: tokens[‘--site-color-accent’],
    },
});

root contains the styling for the card container, while title contains the styling for the heading. The values come from the shared token file. Styles define.

During the build process, StyleX generates CSS variables and individual classes for the declarations. The following snippet is based on the compiled example. Note that each class contains only a single declaration.:

:root {
    --site-color-accent: #5b35d5;
	--site-color-surface: #ffffff;
    --site-space-sm: 1.5rem;
    --site-radius-sm: 0.75rem;
}
.xff6u3m { background-color: var(--site-color-surface); }
.xv27a3v { padding: var(--site-space-sm); }
.x1vopvgf { border-radius: var(--site-radius-sm); }
.x15ao89e { color: var(--site-color-accent); }

In TYPO3, you use the named styles via the StyleX Connector’s ViewHelper:

<article class="{stylex:class(styles: ‘Card.root’)}">
    <h2 class="{stylex:class(styles: ‘Card.title’)}">
		Your Next Idea
    </h2>
</article>

The generated classes will then appear in the output HTML:

<article class="xff6u3m xv27a3v x1vopvgf">
	<h2 class="x15ao89e">Your next idea</h2>
</article>

This explains the basic principle. You define design values as tokens and use them in named style objects. StyleX generates CSS from them. The connector maps the names in your Fluid templates to the generated classes. Connector-ViewHelper.

For the use case shown here in TYPO3, you don’t need React. Your frontend continues to work with server-side rendered HTML and CSS. StyleX Basics,