Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
leaysgur merged 9 commits into from
Jan 16, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ae389fa
feat(formatter): support `styled.div` tagged templates
magic-akari Jan 14, 2026
93ff60a
feat(formatter): support css prop and styled jsx
magic-akari Jan 14, 2026
f7856f7
chore(formatter): update get_tag_name function signature to return a …
magic-akari Jan 14, 2026
3f48c95
fix(tests): add missing semicolon in styledJsx declaration
magic-akari Jan 14, 2026
a311b5c
fix(formatter): make linter happy
magic-akari Jan 14, 2026
a7ed491
refactor(formatter): remove template_literal_context_stack
magic-akari Jan 15, 2026
e8089ea
refactor: clean code
magic-akari Jan 15, 2026
d5e88fb
up
Dunqing Jan 16, 2026
a210d8a
fix(formatter): correct logic in try_format_css_template function
magic-akari Jan 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 214 additions & 0 deletions apps/oxfmt/test/cli/embedded_languages/__snapshots__/embedded_languages.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,26 @@ const styles = css\`.button{color:red;background:blue;padding:10px 20px;}.contai

const styledComponent = styled\`background-color:#ffffff;border-radius:4px;padding:8px;\`;

// ============================================================================
// Member Expression Tags - styled.div, styled.button, etc.
// ============================================================================

const cssGlobal = css.global\`.reset{margin:0;padding:0;box-sizing:border-box;}\`;

const styledDiv = styled.div\`width:100%;height:100vh;background-color:#f0f0f0;\`;

const styledLink = styled["a"]\`text-decoration:none;color:#007bff;font-weight:bold;\`;

const styledButton = styled(Button)\`font-size:16px;color:#333;padding:12px 24px;\`;

// ============================================================================
// Plain template strings within css props or styled-jsx
// ============================================================================

const cssProp = <div css={\`display: flex; align-items: center; justify-content: center; height: 100vh;\`}>Hello World</div>;

const styledJsx = <style jsx>{\`display: flex; align-items: center; justify-content: center; height: 100vh;\`}</style>;

// ============================================================================
// GraphQL - Tagged template literals with gql and graphql tags
// ============================================================================
Expand Down Expand Up @@ -48,6 +68,8 @@ npm install package

const mixedStyles = css\`.button{color:red;}\`;

const mixedStyled = styled.button\`padding:10px;\`;

const mixedQuery = gql\`query{users{name}}\`;

const mixedTemplate = html\`<div><h1>Title</h1></div>\`;
Expand Down Expand Up @@ -157,6 +179,62 @@ const styledComponent = styled\`
padding: 8px;
\`;

// ============================================================================
// Member Expression Tags - styled.div, styled.button, etc.
// ============================================================================

const cssGlobal = css.global\`
.reset {
margin: 0;
padding: 0;
box-sizing: border-box;
}
\`;

const styledDiv = styled.div\`
width: 100%;
height: 100vh;
background-color: #f0f0f0;
\`;

const styledLink = styled["a"]\`
text-decoration: none;
color: #007bff;
font-weight: bold;
\`;

const styledButton = styled(Button)\`
font-size: 16px;
color: #333;
padding: 12px 24px;
\`;

// ============================================================================
// Plain template strings within css props or styled-jsx
// ============================================================================

const cssProp = (
<div
css={\`
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
\`}
>
Hello World
</div>
);

const styledJsx = (
<style jsx>{\`
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
\`}</style>
);

// ============================================================================
// GraphQL - Tagged template literals with gql and graphql tags
// ============================================================================
Expand Down Expand Up @@ -225,6 +303,10 @@ const mixedStyles = css\`
}
\`;

const mixedStyled = styled.button\`
padding: 10px;
\`;

const mixedQuery = gql\`
query {
users {
Expand Down Expand Up @@ -348,6 +430,26 @@ const styles = css\`.button{color:red;background:blue;padding:10px 20px;}.contai

const styledComponent = styled\`background-color:#ffffff;border-radius:4px;padding:8px;\`;

// ============================================================================
// Member Expression Tags - styled.div, styled.button, etc.
// ============================================================================

const cssGlobal = css.global\`.reset{margin:0;padding:0;box-sizing:border-box;}\`;

const styledDiv = styled.div\`width:100%;height:100vh;background-color:#f0f0f0;\`;

const styledLink = styled["a"]\`text-decoration:none;color:#007bff;font-weight:bold;\`;

const styledButton = styled(Button)\`font-size:16px;color:#333;padding:12px 24px;\`;

// ============================================================================
// Plain template strings within css props or styled-jsx
// ============================================================================

const cssProp = <div css={\`display: flex; align-items: center; justify-content: center; height: 100vh;\`}>Hello World</div>;

const styledJsx = <style jsx>{\`display: flex; align-items: center; justify-content: center; height: 100vh;\`}</style>;

// ============================================================================
// GraphQL - Tagged template literals with gql and graphql tags
// ============================================================================
Expand Down Expand Up @@ -384,6 +486,8 @@ npm install package

const mixedStyles = css\`.button{color:red;}\`;

const mixedStyled = styled.button\`padding:10px;\`;

const mixedQuery = gql\`query{users{name}}\`;

const mixedTemplate = html\`<div><h1>Title</h1></div>\`;
Expand Down Expand Up @@ -493,6 +597,62 @@ const styledComponent = styled\`
padding: 8px;
\`;

// ============================================================================
// Member Expression Tags - styled.div, styled.button, etc.
// ============================================================================

const cssGlobal = css.global\`
.reset {
margin: 0;
padding: 0;
box-sizing: border-box;
}
\`;

const styledDiv = styled.div\`
width: 100%;
height: 100vh;
background-color: #f0f0f0;
\`;

const styledLink = styled["a"]\`
text-decoration: none;
color: #007bff;
font-weight: bold;
\`;

const styledButton = styled(Button)\`
font-size: 16px;
color: #333;
padding: 12px 24px;
\`;

// ============================================================================
// Plain template strings within css props or styled-jsx
// ============================================================================

const cssProp = (
<div
css={\`
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
\`}
>
Hello World
</div>
);

const styledJsx = (
<style jsx>{\`
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
\`}</style>
);

// ============================================================================
// GraphQL - Tagged template literals with gql and graphql tags
// ============================================================================
Expand Down Expand Up @@ -561,6 +721,10 @@ const mixedStyles = css\`
}
\`;

const mixedStyled = styled.button\`
padding: 10px;
\`;

const mixedQuery = gql\`
query {
users {
Expand Down Expand Up @@ -684,6 +848,26 @@ const styles = css\`.button{color:red;background:blue;padding:10px 20px;}.contai

const styledComponent = styled\`background-color:#ffffff;border-radius:4px;padding:8px;\`;

// ============================================================================
// Member Expression Tags - styled.div, styled.button, etc.
// ============================================================================

const cssGlobal = css.global\`.reset{margin:0;padding:0;box-sizing:border-box;}\`;

const styledDiv = styled.div\`width:100%;height:100vh;background-color:#f0f0f0;\`;

const styledLink = styled["a"]\`text-decoration:none;color:#007bff;font-weight:bold;\`;

const styledButton = styled(Button)\`font-size:16px;color:#333;padding:12px 24px;\`;

// ============================================================================
// Plain template strings within css props or styled-jsx
// ============================================================================

const cssProp = <div css={\`display: flex; align-items: center; justify-content: center; height: 100vh;\`}>Hello World</div>;

const styledJsx = <style jsx>{\`display: flex; align-items: center; justify-content: center; height: 100vh;\`}</style>;

// ============================================================================
// GraphQL - Tagged template literals with gql and graphql tags
// ============================================================================
Expand Down Expand Up @@ -720,6 +904,8 @@ npm install package

const mixedStyles = css\`.button{color:red;}\`;

const mixedStyled = styled.button\`padding:10px;\`;

const mixedQuery = gql\`query{users{name}}\`;

const mixedTemplate = html\`<div><h1>Title</h1></div>\`;
Expand Down Expand Up @@ -815,6 +1001,32 @@ const styles = css\`.button{color:red;background:blue;padding:10px 20px;}.contai

const styledComponent = styled\`background-color:#ffffff;border-radius:4px;padding:8px;\`;

// ============================================================================
// Member Expression Tags - styled.div, styled.button, etc.
// ============================================================================

const cssGlobal = css.global\`.reset{margin:0;padding:0;box-sizing:border-box;}\`;

const styledDiv = styled.div\`width:100%;height:100vh;background-color:#f0f0f0;\`;

const styledLink = styled["a"]\`text-decoration:none;color:#007bff;font-weight:bold;\`;

const styledButton = styled(Button)\`font-size:16px;color:#333;padding:12px 24px;\`;

// ============================================================================
// Plain template strings within css props or styled-jsx
// ============================================================================

const cssProp = (
<div css={\`display: flex; align-items: center; justify-content: center; height: 100vh;\`}>
Hello World
</div>
);

const styledJsx = (
<style jsx>{\`display: flex; align-items: center; justify-content: center; height: 100vh;\`}</style>
);

// ============================================================================
// GraphQL - Tagged template literals with gql and graphql tags
// ============================================================================
Expand Down Expand Up @@ -851,6 +1063,8 @@ npm install package

const mixedStyles = css\`.button{color:red;}\`;

const mixedStyled = styled.button\`padding:10px;\`;

const mixedQuery = gql\`query{users{name}}\`;

const mixedTemplate = html\`<div><h1>Title</h1></div>\`;
Expand Down
22 changes: 22 additions & 0 deletions apps/oxfmt/test/cli/embedded_languages/fixtures/embedded_languages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,26 @@ const styles = css`.button{color:red;background:blue;padding:10px 20px;}.contain

const styledComponent = styled`background-color:#ffffff;border-radius:4px;padding:8px;`;

// ============================================================================
// Member Expression Tags - styled.div, styled.button, etc.
// ============================================================================

const cssGlobal = css.global`.reset{margin:0;padding:0;box-sizing:border-box;}`;

const styledDiv = styled.div`width:100%;height:100vh;background-color:#f0f0f0;`;

const styledLink = styled["a"]`text-decoration:none;color:#007bff;font-weight:bold;`;

const styledButton = styled(Button)`font-size:16px;color:#333;padding:12px 24px;`;

// ============================================================================
// Plain template strings within css props or styled-jsx
// ============================================================================

const cssProp = <div css={`display: flex; align-items: center; justify-content: center; height: 100vh;`}>Hello World</div>;

const styledJsx = <style jsx>{`display: flex; align-items: center; justify-content: center; height: 100vh;`}</style>;

// ============================================================================
// GraphQL - Tagged template literals with gql and graphql tags
// ============================================================================
Expand Down Expand Up @@ -42,6 +62,8 @@ npm install package

const mixedStyles = css`.button{color:red;}`;

const mixedStyled = styled.button`padding:10px;`;

const mixedQuery = gql`query{users{name}}`;

const mixedTemplate = html`<div><h1>Title</h1></div>`;
Expand Down
Loading
Loading