transformer: babel-plugin-styled-components

[rakleed]

It would be nice to have a plugin with styled-components support like those for babel or swc. Maybe it will be possible to make a wrapper for the swc plugin, like rsbuild did.

This plugin allows, for example, to display the name of the components in classes, which greatly simplifies debugging via developer tools in the browser.

[Dunqing]

We have no bandwidth to support third-party plugins yet. If anyone is interested in this, you can reference the plugins we've implemented, which are used in the Rolldown.

Note: Current support for transformer plugins in the Rust side is incomplete and is likely to be redesigned in the future.

[Dunqing]

After discussing with the team, we decided to start supporting the plugin.

[Dunqing]

We have completed basic support for this plugin in #12066. This plugin currently only supports styled-components and its child path imported via ES modules (import statements). CommonJS imports using require("styled-components") are not yet supported. Besides that, two options haven't been supported yet.

Unsupported features tasks

• Support collecting bindings from require('styled-components') (Which would seriously hurt performance)
• cssProp option
• topLevelImportPaths option

The above feature would be supported, but the priority would be lower. We will increase the priority depending on how many users need to use it.

[overlookmotel]

• Support collecting bindings from require('styled-components') (Which would seriously hurt performance)

I suggest:

1. Find any const x = require('styled-components'); top-level statements in enter_program, in the same loop where we search for import statements.
2. During traversal, check for any deeper-nested require('styled-components').
3. If any found in step (2), re-run the whole transform again in exit_program.

It should be very rare that people use require('styled-components') in a nested position. So this would cover the very common case without much perf impact. But steps (2) and (3) mean that the transform will work even when there's a deeply nested require('styled-components'), it'll just be slower.

If nested require('styled-components') is more common than I think, I assume the require would usually be at the top of its scope. We could also support patterns like this, without doing a full extra AST pass:

function lazyStyled() {
    const styled = require('styled-components');
    return styled.div`width: 100%`.
}

[overlookmotel]

Edge case: Do we need to support this?

import styled from 'styled-components';
import primitive from 'styled-components/primitive';

const WideDiv = styled.div`width: 100%`;
const ThinPrimitiveDiv = primitive.div`width: 20%`;

At present the transform assumes there's only a single import of 'styled-components' in the file.

(I have no idea what difference between 'styled-components' and 'styled-components/primitive' etc is, so not sure if this pattern is realistic usage)