Make strip plugin work with esbuild/rollup bundled code

[youzi]

Currently the strip plugin checks for exact matches of React/CC/CS to replace/remove. Tools like rollup and esbuild often rename imports by adding a number (eg import React from 'react' becomes import React2 from 'react'). This makes it that the plugin does not work with input from these tools.

Example input:

import React4 from "react";
import { ax as ax2, ix as ix2, CC as CC2, CS as CS2 } from "@compiled/react/runtime";
const _2 = "._syaz13q2{color:blue";
const _ = "._1wyb1fwx{font-size:12px";

const Component = () => /*#__PURE__*/React4.createElement(CC2, null, /*#__PURE__*/React4.createElement(CS2, null, [_, _2]), /*#__PURE__*/React4.createElement("div", {
  className: ax2(["_1wyb1fwx _syaz13q2"])
}, "hello world"));

This PR makes the isComponent check less strict by checking if a node name starts with "React" vs checking if it equals "React". It also now stores the imports that it removed and will remove any calls that match one of those imports.

This makes the plugin fully functional in the cases that I have tested (stripping runtime from code bundled with esbuild)

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 1a71ea0aad2a4178aa7594f5414a3366d3aa7605

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[atlassian-cla-bot[bot]]

Hooray! All contributors have signed the CLA.

[itsdouges]

Thanks for the contribution! I've left some comments.

[youzi]

I've updated the PR, now covering automatic runtime as well.

There is one more exact check that I believe needs work, but I'm not familiar enough with the project to know if it should be adjusted. https://github.com/atlassian-labs/compiled/blob/9413477040feb1da8a5299738cc0945f69b803f2/packages/babel-plugin-strip-runtime/src/utils/ast.tsx#L176

Perhaps someone can pick that up.

edit: Actually this is line is checking for a jsx tag. Since bundled code doesn’t include jsx, this can be left as is.

[JakeLane]

Thanks for the contribution @youzi! Looks good to me but I'll wait for @madou to have a look.

Can you also please add a changeset? There are instructions here and that will let us cut a release with your changes.

[itsdouges]

Hey @youzi we'd be keen for this contribution - do you need any help? There are a few conflicts now.

[itsdouges]

Hey @youzi we'd be keen for this contribution - do you need any help? There are a few conflicts now.

[youzi]

@madou Unfortunately I'm not able to work on this at the moment. If someone could implement the requested changes that would be great.

[itsdouges]

Closing a stale, we're more than happy to take a look if anyone in the community wants to pick this up again!