[atoms] support for inline styles by mellyeliu · Pull Request #1406 · facebook/stylex

mellyeliu · 2025-12-22T09:17:13Z

Implementation

Adding support for inline styles authoring with a new @stylexjs/atoms package. This allows you to write styles inline in stylex.props() that are pre-compiled within the props visitor using much of the create logic for static and dynamic styles.

This is something we went back and forth on a few times, but ultimately felt that it's good to provide the optionality. We still recommend (and want to bake in enough friction) for people to use stylex.create namespaces for the majority of usecases for readability/maintainability reasons.

import * as stylex from '@stylexjs/stylex';
import x from '@stylexjs/atoms';

<div {...stylex.props(
  x.display.flex,
  x.padding._16px,
  x.width['calc(100% - 20cqi)'],
  x.color(color),
)} />

The naming of all the above is up for discussion, as well as what styles we should build into this API. I'm also using Properties type from estree for type checking for a first pass, but there might be something better we can use.

Testing

Style types:

Tested within docs page the above +

Different merges of dynamic, regular, and inline styles
Named imports

Integration work:

Make work with valid-styles / some way to add linter validation
Double check minified keys (maybe should default disable this option) and other babel configs
Add docs
Fix types
Cleanup + refactor
Rethink package name + standard import alias
figure out import and package naming?

github-actions · 2025-12-22T09:23:16Z

workflow: benchmarks/perf

Comparison of performance test results, measured in operations per second. Larger is better.
yarn workspace v1.22.22
yarn run v1.22.22
$ node ./compare.js /tmp/tmp.6Uz9Jggl8R /tmp/tmp.8FgANGxIWa

Results	Base	Patch	Ratio

babel-plugin: stylex.create
· basic create	541	548	1.01	+
· complex create	63	64	1.02	+

babel-plugin: stylex.createTheme
· basic themes	424	427	1.01	+
· complex themes	33	32	0.97	-
Done in 0.10s.
Done in 0.33s.

github-actions · 2025-12-22T09:23:28Z

workflow: benchmarks/size

Comparison of minified (terser) and compressed (brotli) size results, measured in bytes. Smaller is better.
yarn workspace v1.22.22
yarn run v1.22.22
$ node ./compare.js /tmp/tmp.FWmM8L9Ax9 /tmp/tmp.pyrmuqoEAD

Results	Base	Patch	Ratio

@stylexjs/stylex/lib/cjs/stylex.js
· compressed	1,311	1,523	1.16	!!
· minified	4,150	4,794	1.16	!!

@stylexjs/stylex/lib/cjs/inject.js
· compressed	1,793	1,793	1.00
· minified	4,915	4,915	1.00

benchmarks/size/.build/bundle.js
· compressed	496,650	496,650	1.00
· minified	4,847,840	4,847,840	1.00

benchmarks/size/.build/stylex.css
· compressed	99,853	99,853	1.00
· minified	747,541	747,541	1.00
Done in 0.08s.
Done in 0.31s.

henryqdineen · 2025-12-22T15:53:28Z

packages/@stylexjs/inline-css/src/index.d.ts

+} & ((value: V) => StyleXStyles);
+
+type InlineCSS = {
+  [Key in keyof Properties<string | number>]: InlineValue<


It looks like everything in Properties is optional and the Required utility type can help.

Suggested change

[Key in keyof Properties<string | number>]: InlineValue<

[Key in keyof Required<Properties<string | number>>]: InlineValue<

It would be cool if StyleXCSSTypes.js also used csstype or at least the same thing.

nmn

Good start, but a few changes are needed.

nmn · 2025-12-26T00:27:40Z

packages/@stylexjs/atoms/src/index.js

+const valueProxy = (_propName) =>
+  new Proxy(function () {}, {
+    get() {
+      return valueProxy('');
+    },
+    apply() {
+      return undefined;
+    },
+  });


It should probably not be a recursive proxy and the get() should throw an error similar to the stylex package saying you need to compile this away.

nmn · 2025-12-26T00:28:27Z

packages/@stylexjs/atoms/src/index.js

+    if (typeof prop === 'string') {
+      return valueProxy(prop);
+    }
+    return undefined;


You can probably just throw here directly and not define valueProxy at all.

Also, let's add Flow types to this and auto-generate the TS types from that.

nmn · 2025-12-26T00:32:29Z

packages/@stylexjs/babel-plugin/src/visitors/imports.js

+      if (specifier.type === 'ImportNamespaceSpecifier') {
+        state.inlineCSSImports.set(specifier.local.name, '*');
+      } else if (specifier.type === 'ImportDefaultSpecifier') {
+        state.inlineCSSImports.set(specifier.local.name, '*');


ESM doesn't allow an arbitrary proxy for exports from a package. So maybe we ONLY allow a named or default import here?

I think limiting this to a named import makes the most sense right now.

nmn · 2025-12-26T00:34:26Z

packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js

+          import * as css from '@stylexjs/inline-css';
+          stylex.props(css.display.flex);


Suggested change

import * as css from '@stylexjs/inline-css';

stylex.props(css.display.flex);

import {css} from '@stylexjs/inline-css';

stylex.props(css.display.flex);

packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js

henryqdineen · 2025-12-26T17:24:01Z

packages/@stylexjs/inline-css/src/index.js

+module.exports = inlineCSS;
+module.exports.default = inlineCSS;


I feel like it's rare at this point to see frontend code be published CJS-only. Could this be written in ESM and then use babel at build time to create a CJS version?

I have a similar nitpick about styleq but I see there is an open PR for that. One advantage is that it would make the @stylexjs/stylex rollup bundle slightly smaller.

- Rename package from inline-css to utility-styles - Update package.json, README, types, and source files - Update stylex package dependency and re-export

vercel · 2026-01-18T17:43:21Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
stylex	Ready	Preview, Comment	Jan 21, 2026 10:23am

nmn · 2026-01-19T23:44:08Z

packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js

+        expect(output).toContain('.x78zum5{display:flex}');
+        expect(output).toContain('.x14rh7hd{color:var(--x-color)}');
+        expect(output).toContain('--x-color');
+        expect(output).toContain('_v != null ? "x14rh7hd" : _v');


Can we stick to snapshot tests here? You can keep these checks in addition if you want to, but I think this is a bad pattern than LLMs generate.

nmn · 2026-01-19T23:47:29Z

packages/@stylexjs/babel-plugin/__tests__/transform-stylex-props-test.js

+            k1xSpc: "x78zum5",
+            $$css: true
+          };
+          stylex.props(_temp, styles.opacity(0.5));"


Can you add a few more tests with this kind of pattern. I want to see what happens to inline styles when applied conditionally but stylex.props cannot be pre-compiled more.

Also, to validate the hoisting logic, can you make add some examples where the stylex.props() exists inside of a function and not the top level.

packages/@stylexjs/babel-plugin/__tests__/validation-stylex-create-test.js

packages/@stylexjs/babel-plugin/rollup.config.mjs

packages/@stylexjs/babel-plugin/src/utils/state-manager.js

nmn · 2026-01-19T23:51:39Z

packages/@stylexjs/babel-plugin/src/utils/state-manager.js

  // `stylex.create` calls
  +styleMap: Map<string, CompiledNamespaces> = new Map();
  +styleVars: Map<string, NodePath<>> = new Map();
+  +inlineStylesCache: Map<string, FlatCompiledStyles> = new Map();


What is this? Why is it needed?

packages/@stylexjs/babel-plugin/src/visitors/imports.js

- utility-styles/babel-transform.js: transforms css.display.flex → { display: 'flex' } - babel-plugin/stylex-props.js: compiles raw objects using styleXCreateSet - No dependency on @stylexjs/shared refactor (uses ../shared) - All 797 tests pass

- Rename package from @stylexjs/utility-styles to @stylexjs/atoms - Update all imports and references in babel-plugin - Update stylex package dependency and re-export - Fix type definitions to be compatible with stylex.props() - Update test descriptions and imports

mellyeliu requested review from ezzak, necolas, nmn and vincentriemer as code owners December 22, 2025 09:17

meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Dec 22, 2025

mellyeliu marked this pull request as draft December 22, 2025 09:17

vercel bot deployed to Preview December 22, 2025 09:20 View deployment

mellyeliu changed the title ~~[inline-css] add support for inline styles~~ [inline-css] support for inline styles Dec 22, 2025

vercel bot deployed to Preview December 22, 2025 10:21 View deployment

vercel bot deployed to Preview December 22, 2025 10:51 View deployment

mellyeliu force-pushed the inline-styles branch from 52d003a to 4d0f089 Compare December 22, 2025 12:29

vercel bot deployed to Preview December 22, 2025 12:31 View deployment

henryqdineen reviewed Dec 22, 2025

View reviewed changes

nmn requested changes Dec 26, 2025

View reviewed changes

henryqdineen reviewed Dec 26, 2025

View reviewed changes

mellyeliu added 6 commits January 15, 2026 02:14

[inline-css] create new inline styles package

63e0616

add dynamic inline styles support

bc271fa

add dedupe tests and flow fix

a61d115

fix named imports

5903162

new imports

74d21bd

Rename @stylexjs/inline-css to @stylexjs/utility-styles

67dec13

- Rename package from inline-css to utility-styles - Update package.json, README, types, and source files - Update stylex package dependency and re-export

mellyeliu force-pushed the inline-styles branch from 4d0f089 to fc6cd07 Compare January 18, 2026 17:43

vercel bot deployed to Preview January 18, 2026 17:47 View deployment

nmn reviewed Jan 19, 2026

View reviewed changes

mellyeliu added 2 commits January 21, 2026 04:50

mellyeliu force-pushed the inline-styles branch from fc6cd07 to fb5a7ae Compare January 21, 2026 10:19

mellyeliu changed the title ~~[inline-css] support for inline styles~~ [stylex/atoms] support for inline styles Jan 21, 2026

mellyeliu changed the title ~~[stylex/atoms] support for inline styles~~ [atoms] support for inline styles Jan 21, 2026

vercel bot deployed to Preview January 21, 2026 10:23 View deployment

	[Key in keyof Properties<string \| number>]: InlineValue<
	[Key in keyof Required<Properties<string \| number>>]: InlineValue<

		import * as css from '@stylexjs/inline-css';
		stylex.props(css.display.flex);

		module.exports = inlineCSS;
		module.exports.default = inlineCSS;

Conversation

mellyeliu commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Implementation

Testing

Uh oh!

github-actions bot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

workflow: benchmarks/perf

Uh oh!

github-actions bot commented Dec 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

workflow: benchmarks/size

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nmn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

henryqdineen Dec 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Jan 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mellyeliu commented Dec 22, 2025 •

edited

Loading

github-actions bot commented Dec 22, 2025 •

edited

Loading

github-actions bot commented Dec 22, 2025 •

edited

Loading

henryqdineen Dec 26, 2025 •

edited

Loading

vercel bot commented Jan 18, 2026 •

edited

Loading