feat(formatter): support css prop, styled jsx, and member/computed styled.tags

[magic-akari]

This PR adds support for embedded language formatting in styled-components and styled-jsx patterns:

Changes

• Support styled.div`...` tagged templates: Allow formatting of tagged templates with member expressions like styled.div, enabling better support for styled-components
• Support styled["computed"]`...` : Handle static computed member expressions in styled tags
• Support styled(Component)`...` : Handle styled calls with component arguments for styled-components
• Support <div css={`...`} />: Format CSS content in JSX css prop
• Support <style jsx>{`...`}</style>: Format Styled JSX content in JSX elements

Related Issues

• Part of oxfmt: Improve xxx-in-js support #15180

Known Limitations

• Template substitution is not supported: Expressions inside template literals like css`color: ${THIS_VAR};` are not yet supported

[codspeed-hq]

CodSpeed Performance Report

Merging this PR will not alter performance

_{Comparing magic-akari:feat/embedded-formatting-full-support (a210d8a) with main (125962d)}

Summary

✅ 38 untouched benchmarks
⏩ 7 skipped benchmarks¹

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. ↩

[Copilot]

Pull request overview

This PR extends the formatter's embedded language support to handle CSS in styled-components and styled-jsx patterns, building on existing embedded language formatting infrastructure.

Changes:

• Extended tag name extraction to support member expressions (styled.div) and computed members (styled["a"])
• Added context tracking for template literals in CSS props and styled-jsx elements
• Implemented formatting for CSS content in JSX css props and <style jsx> elements

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
crates/oxc_formatter/src/print/template.rs	Added get_tag_name function to extract tag names from complex expressions; added try_format_css_template to format template literals in CSS contexts
crates/oxc_formatter/src/print/jsx/mod.rs	Added context management for css prop and styled-jsx template literals with helper functions to detect these patterns
crates/oxc_formatter/src/formatter/context.rs	Added TemplateLiteralContext enum and stack management methods for tracking template literal formatting contexts
crates/oxc_formatter/src/formatter/mod.rs	Exported new TemplateLiteralContext type
apps/oxfmt/test/cli/embedded_languages/fixtures/embedded_languages.js	Added test cases for member expression tags, css props, and styled-jsx
apps/oxfmt/test/cli/embedded_languages/__snapshots__/embedded_languages.test.ts.snap	Updated snapshots with formatted output for new test cases

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Dunqing]

Looks good, just some refactoring needed.

[Dunqing]

Thank you! I pushed a commit to rename get_template_literal_context and add comments

[Dunqing]

@leaysgur, would you mind reviewing this last round? If okay, merge it!

[leaysgur]

Thanks, I will take a look soon. 🙆🏻

[leaysgur]

Thank you so much! LGMT this time. 🙆🏻