feat(transformer): support styled components plugin by Dunqing · Pull Request #12066 · oxc-project/oxc

Dunqing · 2025-07-04T02:18:25Z

This plugin adds comprehensive support for styled-components with server-side rendering, style minification, and enhanced debugging capabilities. The implementation is ported from the official Babel plugin to ensure compatibility and feature parity.

Current Limitations

⚠️ Import Support: This plugin currently only supports styled-components imported via ES modules (import statements). CommonJS imports using require("styled-components") are not yet supported.

Feature Support

Options:

✅ Fully Supported:

displayName: Adds display names for debugging
fileName: Controls filename prefixing in display names
ssr: Adds unique component IDs for server-side rendering
transpileTemplateLiterals: Converts template literals to function calls
minify: Minifies CSS content in template literals
namespace: Adds namespace prefixes to component IDs
meaninglessFileNames: Controls which filenames are considered meaningless

⚠️ Partially Supported:

pure: Only supports call expressions, not tagged template expressions (bundler limitation)

❌ Not Yet Implemented:

cssProp: JSX css prop transformation
topLevelImportPaths: Custom import path handling

Testing

The test suite is adapted from the official Babel plugin tests with modifications to integrate with our testing infrastructure.

Note: Some test outputs differ from the original due to our different hashing algorithm for component IDs. This is intentional and follows the same approach used by SWC's implementation.

Dunqing · 2025-07-04T02:18:39Z

feat(transformer): support styled components plugin #12066 : 2 dependent PRs (#12155 , #12169 ) 👈 (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 · 2025-07-04T02:23:45Z

CodSpeed Instrumentation Performance Report

Merging #12066 will not alter performance

_{Comparing 07-04-feat_transformer_support_styled_components_plugin (19b97c0) with main (4c35f4a)}

Summary

✅ 34 untouched benchmarks

crates/oxc_transformer/src/plugins/styled_components.rs

overlookmotel · 2025-07-09T21:54:51Z

I've pushed a commit to enable this plugin in benchmarks, so we can see what impact it has.

crates/oxc_transformer/src/plugins/styled_components.rs

overlookmotel · 2025-07-09T22:00:19Z

Not too bad!

overlookmotel

I've tried to review this properly, but it's hard because I don't understand what any of it is doing! I know we're keen to get this merged ASAP, but afterwards could you possibly add some comments, and I'll read through it again?

Please feel free to merge in the meantime. I'll do a few follow-up PRs with suggested refactoring and perf, and my comments below could also be addressed in follow-ups.

Another thought: Are we able to disable this plugin on files which aren't JSX/TSX? Or does it need to run on JS files too? The loop through all top-level statements is probably quite costly for long files, and it'd be ideal to skip it if we can.

crates/oxc_transformer/src/plugins/mod.rs

crates/oxc_transformer/src/plugins/styled_components.rs

overlookmotel · 2025-07-09T23:14:05Z

crates/oxc_transformer/src/plugins/styled_components.rs

+        fn base36_encode<'a>(mut num: u64, ctx: &TraverseCtx<'a>) -> &'a str {
+            const BASE36_BYTES: &[u8] = b"abcdefghijklmnopqrstuvwxyz0123456789";
+
+            num %= 36_u64.pow(6); // 36^6, to ensure the result is <= 6 characters long.
+
+            let mut result = Vec::with_capacity(6);
+
+            while num != 0 {
+                result.push(BASE36_BYTES[(num % 36) as usize]);
+                num /= 36;
+            }
+
+            ctx.ast.allocator.alloc_str(
+                // SAFETY: the bytes are valid UTF-8 as they are ASCII characters.
+                unsafe { std::str::from_utf8_unchecked(&result) },
+            )
+        }


Is there a reason for using base 36 here? Couldn't we use base 64 (A-Z, a-z, 0-9, _, $)?

Division by numbers which aren't a power of 2 is quite expensive, and it'd give a larger range of possibilities in 6 chars (less chance of collisions).

Also, building the string with InlineString would be be more performant than Vec. Like in mangler:

https://github.com/oxc-project/oxc/blob/fe843806ece40a19adca3a7c6366abfb6f8662bb/crates/oxc_mangler/src/base54.rs

I guess we can use base64. Using base36 is to align with its Babel plugin.

https://github.com/styled-components/babel-plugin-styled-components/blob/4e2eb388d9c90f2921c306c760657d059d01a518/src/utils/hash.js#L54-L55.

Ok, I will follow this kind of optimization.

It's not a big thing! Was just asking if there was a reason because base36 is unusual. Odd choice from styled-components authors!

@Dunqing I realized now that maybe there is a reason. Maybe class names are case insensitive in some browsers?

Dunqing · 2025-07-09T23:47:12Z

Not too bad!

I guess we don't have a benchmark that can cover all the features that this plugin has, so we don't see much performance change.

Dunqing · 2025-07-09T23:53:21Z

Another thought: Are we able to disable this plugin on files which aren't JSX/TSX? Or does it need to run on JS files too? The loop through all top-level statements is probably quite costly for long files, and it'd be ideal to skip it if we can.

It needs to run in all files. One possible case that we need to consider is that they would like to define all of the styled components in a utility file (.js or .ts), and use them in the JSX/TSX files.

Another serious performance hit if we need to support CJS, we need to go through the whole AST to find whether there is a const variable = require('styled-components'). This is the reason I don't support it at this stage.

graphite-app · 2025-07-10T00:38:51Z

Merge activity

Jul 10, 12:38 AM UTC: Dunqing added this pull request to the Graphite merge queue.
Jul 10, 12:47 AM UTC: Merged by the Graphite merge queue.

close: #11876 This plugin adds comprehensive support for styled-components with server-side rendering, style minification, and enhanced debugging capabilities. The implementation is ported from the [official Babel plugin](https://github.com/styled-components/babel-plugin-styled-components) to ensure compatibility and feature parity. ## Current Limitations ⚠️ **Import Support**: This plugin currently only supports styled-components imported via ES modules (`import` statements). CommonJS imports using `require("styled-components")` are not yet supported. ## Feature Support ### Options: **✅ Fully Supported:** - `displayName`: Adds display names for debugging - `fileName`: Controls filename prefixing in display names - `ssr`: Adds unique component IDs for server-side rendering - `transpileTemplateLiterals`: Converts template literals to function calls - `minify`: Minifies CSS content in template literals - `namespace`: Adds namespace prefixes to component IDs - `meaninglessFileNames`: Controls which filenames are considered meaningless **⚠️ Partially Supported:** - `pure`: Only supports call expressions, not tagged template expressions (bundler limitation) **❌ Not Yet Implemented:** - `cssProp`: JSX css prop transformation - `topLevelImportPaths`: Custom import path handling ## Testing The test suite is adapted from the [official Babel plugin tests](https://github.com/styled-components/babel-plugin-styled-components) with modifications to integrate with our testing infrastructure. **Note**: Some test outputs differ from the original due to our different hashing algorithm for component IDs. This is intentional and follows the same approach used by SWC's implementation.

Follow-on after #12066. Tiny refactor. Move clippy exception to cover just the place it's needed, rather than the whole file.

Follow-on after #12066. `helpers` was an `FxHashMap<String, SymbolId>`, but we know all the possible keys, and there's only 6 of them. So use a small array `[Option<SymbolId>; 6]` instead, and convert from strings to indexes into that array via a `StyledComponentsHelper` enum. Array (24 bytes) is smaller than an `FxHashMap`, and involves no allocations, as well as avoiding hashing strings. Note: Using an enum rather than an untyped `usize` index, as with an enum, compiler can statically prove indexing into the array can never be out of bounds, so it skips bounds checks.

Dunqing · 2025-07-10T00:41:38Z

Consider this stack of PR to be huge, so I am merging this stack and following your suggestion and finishing some missing work in the follow-up PRs later.

Follow-on after #12066. Pure refactor. Just make the code less deeply nested.

Follow-on after #12066. Pure refactor. Simplify and shorten code.

overlookmotel · 2025-07-10T07:55:55Z

Another serious performance hit if we need to support CJS, we need to go through the whole AST to find whether there is a const variable = require('styled-components'). This is the reason I don't support it at this stage.

Argh! Maybe we need to include require in the module record that parser produces, and use that in transformer.

I suppose we could more easily support require('styled-components') at top level only - which is the common use case.

close: #12066 (comment)

…sions is part of `ComputedMemberExpression` (#12181) close: #12066 (comment) We haven't supported transform `ComputedMemberExpression`, because I found that Babel plugin support for `styled['div']` is also incomplete. Anyway, short-circuiting for this is still a good improvement.

github-actions bot added A-transformer Area - Transformer / Transpiler C-enhancement Category - New feature or request labels Jul 4, 2025

Dunqing force-pushed the 07-04-feat_transformer_support_styled_components_plugin branch 3 times, most recently from 8bcb0f1 to 85dd4eb Compare July 9, 2025 06:52

Dunqing marked this pull request as ready for review July 9, 2025 06:56

Dunqing requested a review from overlookmotel as a code owner July 9, 2025 06:56

graphite-app bot reviewed Jul 9, 2025

View reviewed changes

crates/oxc_transformer/src/plugins/styled_components.rs Show resolved Hide resolved

Dunqing force-pushed the 07-04-feat_transformer_support_styled_components_plugin branch from 85dd4eb to 3fee05b Compare July 9, 2025 07:42

Dunqing mentioned this pull request Jul 9, 2025

feat(napi/transform): support enabling StyledComponent plugin #12155

Merged

Dunqing force-pushed the 07-04-feat_transformer_support_styled_components_plugin branch from 3fee05b to 44bd320 Compare July 9, 2025 10:06

graphite-app bot reviewed Jul 9, 2025

View reviewed changes

crates/oxc_transformer/src/plugins/styled_components.rs Show resolved Hide resolved

overlookmotel reviewed Jul 9, 2025

View reviewed changes

crates/oxc_transformer/src/plugins/mod.rs Show resolved Hide resolved

crates/oxc_transformer/src/plugins/styled_components.rs Show resolved Hide resolved

crates/oxc_transformer/src/plugins/styled_components.rs Show resolved Hide resolved

overlookmotel reviewed Jul 9, 2025

View reviewed changes

graphite-app bot added the 0-merge Merge with Graphite Merge Queue label Jul 10, 2025

graphite-app bot force-pushed the 07-04-feat_transformer_support_styled_components_plugin branch from 94ec753 to 19b97c0 Compare July 10, 2025 00:39

graphite-app bot pushed a commit that referenced this pull request Jul 10, 2025

refactor(transformer/styled_components): move clippy attr (#12169)

e222e26

Follow-on after #12066. Tiny refactor. Move clippy exception to cover just the place it's needed, rather than the whole file.

graphite-app bot pushed a commit that referenced this pull request Jul 10, 2025

style(transformer/styled_components): reduce indentation (#12174)

a45d749

Follow-on after #12066. Pure refactor. Just make the code less deeply nested.

graphite-app bot pushed a commit that referenced this pull request Jul 10, 2025

refactor(transformer/styled_components): simplify code (#12175)

466241d

Follow-on after #12066. Pure refactor. Simplify and shorten code.

graphite-app bot merged commit 19b97c0 into main Jul 10, 2025
25 checks passed

graphite-app bot deleted the 07-04-feat_transformer_support_styled_components_plugin branch July 10, 2025 00:47

graphite-app bot removed the 0-merge Merge with Graphite Merge Queue label Jul 10, 2025

This was referenced Jul 10, 2025

refactor(transformer/plugins): don't store PluginOptions #12180

Merged

refactor(transformer/plugins): short-circuit early when a call expressions is part of ComputedMemberExpression #12181

Merged

transformer: babel-plugin-styled-components #11876

Closed

graphite-app bot pushed a commit that referenced this pull request Jul 10, 2025

refactor(transformer/plugins): don't store PluginOptions (#12180)

a6ee13a

close: #12066 (comment)

oxc-bot mentioned this pull request Jul 12, 2025

release(crates): v0.77.0 #12234

Merged

TheAlexLichter mentioned this pull request Jul 14, 2025

Create example with "native" styled components rolldown/rolldown#5278

Closed

Copilot AI mentioned this pull request Jul 29, 2025

Add documentation for React Refresh and Styled Components transformer plugins oxc-project/website#429

Merged

Uh oh!

Comments

Conversation

Dunqing commented Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current Limitations

Feature Support

Options:

Testing

Uh oh!

Dunqing commented Jul 4, 2025 • edited by overlookmotel Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How to use the Graphite Merge Queue

Uh oh!

codspeed-hq bot commented Jul 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CodSpeed Instrumentation Performance Report

Merging #12066 will not alter performance

Summary

Uh oh!

Uh oh!

overlookmotel commented Jul 9, 2025

Uh oh!

Uh oh!

overlookmotel commented Jul 9, 2025

Uh oh!

overlookmotel left a comment • 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!

Uh oh!

Uh oh!

Uh oh!

overlookmotel Jul 9, 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!

Dunqing Jul 9, 2025

Choose a reason for hiding this comment

Uh oh!

overlookmotel Jul 9, 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!

overlookmotel Jul 10, 2025

Choose a reason for hiding this comment

Uh oh!

Dunqing commented Jul 9, 2025

Uh oh!

Dunqing commented Jul 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

graphite-app bot commented Jul 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merge activity

Uh oh!

Dunqing commented Jul 10, 2025

Uh oh!

Uh oh!

overlookmotel commented Jul 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Dunqing commented Jul 4, 2025 •

edited

Loading

Dunqing commented Jul 4, 2025 •

edited by overlookmotel

Loading

codspeed-hq bot commented Jul 4, 2025 •

edited

Loading

overlookmotel left a comment •

edited

Loading

overlookmotel Jul 9, 2025 •

edited

Loading

overlookmotel Jul 9, 2025 •

edited

Loading

Dunqing commented Jul 9, 2025 •

edited

Loading

graphite-app bot commented Jul 10, 2025 •

edited

Loading