feat(oxfmt): Support css-in-js substitution

[leaysgur]

Part of #15180

[leaysgur]

• test(oxfmt): Add css-in-js conformance #20020
• feat(oxfmt): Support css-in-js substitution #20019 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• 0-merge - adds this PR to the back of the merge queue
• hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[codspeed-hq]

Merging this PR will not alter performance

✅ 49 untouched benchmarks
⏩ 7 skipped benchmarks¹

---

_{Comparing 03-05-feat_oxfmt_support_css-in-js_substitution (54ddd96) with main (6173e53)²}

Footnotes

1. 7 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

2. No successful run was found on main (d631b31) during the generation of this report, so 6173e53 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

[leaysgur]

Oxfmt Ecosystem CI

suite	oxfmt@latest	94cbdde branch
vuejs/core	✅	✅
eggjs/egg	✅	✅
cnpm/cnpmcore	✅	✅
fuma-nama/fumadocs	❌	✅
monkeytypegame/monkeytype	✅	✅
actualbudget/actual	❌	✅
AmanVarshney01/create-better-t-stack	❌	✅
formatjs/formatjs	❌	✅
fastify/fastify-vite	✅	✅
aidenybai/react-grab	❌	✅
tale/headplane	❌	✅
rolldown/rolldown	✅	❌
mastodon/mastodon	✅	✅
openclaw/openclaw	✅	✅
npmx-dev/npmx.dev	✅	✅
Comfy-Org/ComfyUI_frontend	✅	✅
lichess-org/lila	✅	✅
cloudflare/agents	✅	✅
dyad-sh/dyad	✅	✅
vercel/turborepo	✅	✅
getsentry/sentry-javascript	✅	✅
huggingface/huggingface.js	✅	✅
vuejs/pinia	❌	✅

[leaysgur]

Ecosystem failure for rolldown is expected.

https://github.com/oxc-project/oxc-ecosystem-ci/actions/runs/22744104964/job/65964343172#step:12:16

> --- a/examples/styled-components-native/src/components/Button.jsx
> +++ b/examples/styled-components-native/src/components/Button.jsx
> @@ -32,7 +32,11 @@ const StyledButton = styled.button`
>      height: 0;
>      border-radius: 50%;
>      background: rgba(255, 255, 255, 0.3);
> -    transition: width 0.6s, height 0.6s, top 0.6s, left 0.6s;
> +    transition:
> +      width 0.6s,
> +      height 0.6s,
> +      top 0.6s,
> +      left 0.6s;
>      transform: translate(-50%, -50%);
>      z-index: 0;
>    }

It's reflecting printWidth correctly! A failure worth celebrating. 🤣

[Copilot]

Pull request overview

Adds css-in-js ${...} substitution support to oxfmt’s embedded-language pipeline by switching CSS templates to the Doc→IR formatting path (Prettier printToDoc) and restoring expressions via Prettier-style placeholders.

Changes:

• Implement placeholder-based CSS-in-JS template formatting (Doc→IR) and replace placeholders with ${expr} Docs for correct wrapping.
• Generalize embedded Doc callback output to a new EmbeddedDocResult (multiple IRs for GraphQL; single IR + placeholder counts for CSS).
• Update oxfmt’s Prettier-doc conversion + embedded parser mapping to support the new CSS flow (using scss).

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
crates/oxc_formatter/src/print/template/embed/mod.rs	Routes CSS/styled tagged templates + styled-jsx/Angular styles templates to the new CSS Doc formatter.
crates/oxc_formatter/src/print/template/embed/graphql.rs	Adapts GraphQL embedded-doc handling to the new EmbeddedDocResult return type.
crates/oxc_formatter/src/print/template/embed/css.rs	New placeholder-based CSS template Doc→IR formatting with ${expr} restoration.
crates/oxc_formatter/src/lib.rs	Re-exports EmbeddedDocResult for downstream usage.
crates/oxc_formatter/src/external_formatter.rs	Introduces EmbeddedDocResult and updates embedded-doc callback API to return it.
apps/oxfmt/src/prettier_compat/from_prettier_doc.rs	Converts Prettier Doc JSON into EmbeddedDocResult and adds placeholder counting + Text merging.
apps/oxfmt/src/core/external_formatter.rs	Parses Doc JSON batches once and switches embedded CSS languages to the scss parser.

---

You can also share your feedback on Copilot code review. Take the survey.

[Dunqing]

Cool!

[graphite-app]

Merge activity

• Mar 6, 3:59 AM UTC: Dunqing added this pull request to the Graphite merge queue.
• Mar 6, 4:07 AM UTC: Merged by the Graphite merge queue.