[WIP] feat: add NativeWind plugin

[borisyankov]

Next issues to resolve

1. How to resolve 'react-native-css-interop'

It gets put into /node_modules/nativewind/node_modules/react-native-css-interop

Possible solutions:

• change .npmrc

node-linker=hoisted
enable-pre-post-scripts=true

• install react-native-css-interop as a dependency

2. Make verifyInstallation work

This throws. The error is not necessarily exactly the cause of the issue.

export function verifyJSX() {
  // @ts-expect-error
  return <react-native-css-interop-jsx-pragma-check /> === true;
}

That should indicate that wrapJSX is not being called as this is what makes this code valid:

// This is invalid react code. Its used by the doctor to check if the JSX pragma is set correctly
if ((type as any) === "react-native-css-interop-jsx-pragma-check") {
  return true as any;
}

3. Solve useContext issue thrown with cssInterop

Good: progress, at least cssInterop is integrated to render the JSX.
Bad: throws.

Different dependencies or something else is causing this?

4. Be able to debug and step through compiled code in Dev Tools

[changeset-bot]

⚠️ No Changeset found

Latest commit: 1a31210

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
repack-website	⬜️ Ignored (Inspect)	Visit Preview		Dec 28, 2024 6:19pm

[jbroma]

Regarding 1. How to resolve 'react-native-css-interop' - the issue lies with the nativewind itself and it's package setup - pnpm isolated linker only allows declared dependencies to be imported in the project which is a good thing - setting the node-linker to hoisted is a dirty workaround and should be avoided.

For now let's just go with explicit dependency of react-native-css-interop in the project which also fixes the issue