[Css] Add the CSS component

[Kocal]

Q	A
Bug fix?	no
New feature?	yes
Deprecations?	no
Documentation?	yes
Issues
License	MIT

This PR adds a new package, symfony/ux-css. It gives Twig a css() function in the spirit of Panda CSS (https://panda-css.com/): you pass a hash of style properties and get back atomic class names built from design tokens. The hash is checked when Twig compiles the template, so a misspelled property or an unknown token shows up as a Twig syntax error pointing to the template line, not as a silent CSS bug.

PHP writes one CSS file (var/ux_css/styles.css). There is no Node.js involved. AssetMapper serves the file directly, and Webpack Encore or Symfony Reprise can import it like any other stylesheet. Class names and generated CSS match what Panda CSS produces (a pinned version) for the supported syntax, checked against test cases recorded from Panda's own test suite.

<div class="{{ css({ p: 'md', color: 'fg', _hover: { color: 'primary' }, md: { p: 'lg' } }) }}">

This renders class="p_md c_fg hover:c_primary md:p_lg".

This PR complements #3932 (Simon's "[DesignTokens] Add the Design Tokens component") and does not compete with it. DesignTokens is where tokens are defined, CSS is a styling layer that uses them.

I wrote the first commit on September 24 and 25, before #3932 was opened, with its own token config in Panda's format. The second commit replaces that: CSS now reads every token from DesignTokens' DTCG files, and the generated rules use DesignTokens' --dt-* CSS variables. That means this PR now depends on #3932, and CI stays red until it's merged. I'm keeping this as a draft so both approaches can be compared side by side.

	DesignTokens (#3932)	CSS (this PR)
Role	Reads design tokens and exposes their values	Styles templates with tokens
Tokens written in	DTCG 2025.10 JSON files, plus a Resolver document for themes	Nothing of its own: it reads the DTCG files from DesignTokens
Output	CSS variables (--dt-*), typed token objects in PHP, exports to CSS, JavaScript, DTCG, Tailwind and DESIGN.md	Atomic classes in one CSS file; rules read DesignTokens' --dt-* variables, no token variable declared here
Use in a template	var(--dt-...) in your own CSS, and ux_token() where CSS variables cannot go (emails, PDF, SVG)	class="{{ css({ ... }) }}"
Hover, breakpoints, dark mode	Written in your own CSS; light and dark variables generated from a Resolver modifier	Written in the hash (_hover, md, _dark, custom conditions): _dark reuses DesignTokens' dark selectors, breakpoints come from breakpoint.* tokens
Errors	lint:design-tokens; an unknown token path fails the render	At compile time, for each css() call, with suggestions
Theme per request	Yes, with Resolver inputs	Yes, through DesignTokens: its variables change per request, the classes from css() stay the same

Most of the diff, about 64,000 of the 114,000 lines, is test fixtures recorded from Panda CSS: reviewers can skip src/Css/tests/Fixtures/Panda/.

Note

css({}) auto-completion requires a modification on the Symfony Plugin for PHPStorm (EDIT: Haehnchen/idea-php-symfony2-plugin#2889), and Symfony Language Tools for VSCode (EDIT: symfony/language-tools#108)

Current limitations

For the moment, it's not possible to generate a uber array-shaped PHPDoc type, because of PHPStan and PHPStorm limitations, given Opus 5.5.

It means it's not possible to have support for (| represents the cursor) :

• key with { base: '', ...states} as value, for examples: { color: { |, color: { base : '|, and { _hover: { |
• have auto-completion for values with brackets, ex: [blue.500/20], which equals NB colors variants * 101 (100 because opacity can go from 0 to 100), which means making the array-shaped PHPDoc type much biger

[Kocal]

Some updates:

• Pushed integration with DesignTokens from [DesignTokens] Add the Design Tokens component #3932 - not really testable for the moment.
• Opened Complete Twig function hash keys and values from the PHP parameter array shape Haehnchen/idea-php-symfony2-plugin#2889
• Added Current limitations section in PR description

[Kocal]

New updates, the following PRs on PHPStan will helps to get better performances when dealing with the reference_css.php file:

• Add TypeTraverser::mapMemoized() phpstan/phpstan-src#6652
• Lazier verbosity in ConstantArrayType->checkOurKeys() phpstan/phpstan-src#6649
• Memoize recursive type queries on ConstantArrayType phpstan/phpstan-src#6671
• Skip conditional type search on types without late-resolvable types phpstan/phpstan-src#6672
• Skip the generic object type search on types without classes phpstan/phpstan-src#6673
• Skip non-template keys when a constant offset misses ConstantArrayType's key index phpstan/phpstan-src#6674
• Check original type for unresolvable types only when resolved type has one phpstan/phpstan-src#6675