Update webpack.ts for NativeWind v4

[panzacoder]

Added an option to pass in custom options for babel/preset-react, which is required in order to set the importSource for Nativewind v4.

I believe this is the root of these issues:

• V4: NativeWind Storybook Web Example - (Expo) (React Native Web)  nativewind/nativewind#659
• [Bug]: Unwanted Emotion classNames added to components storybook#24949

[panzacoder]

👋 You very much may want to solve this in a different way. After finding this I was able to equally solve the problem by updating my babelPlugins config like this:

{
      name: getAbsolutePath('@storybook/addon-react-native-web'),
      options: {
        projectRoot,
        modulesToTranspile: [
          'app', // this is my local monorepo package
          'react-native',
          'react-native-web',
          'solito',
          'moti',
          'react-native-reanimated',
          'react-native-css-interop',
          'nativewind',
          'react-native-gesture-handler',
        ],
        babelPlugins: [
          'react-native-reanimated/plugin',
          [
            '@babel/plugin-transform-react-jsx',
            {
              runtime: 'automatic',
              importSource: 'nativewind',
            },
          ],
        ],
      },
    },

The key line being the change to the @babel/plugin-transform-react-jsx. I tried MANY ways of configuring this for babel otherwise, but this is the only method that would work in order to make the transformation keep the NativeWind classNames intact.

[dannyhw]

@panzacoder I've updated this pr with some more changes to now allow babel presets and also to pass options to the react native preset

[socket-security]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@alloc/[email protected]	None	0	14.1 kB	aleclarson
npm/[email protected]	None	0	22.2 kB	kevinbeaty
npm/[email protected]	environment Transitive: filesystem, shell	+12	2.91 MB	ai
npm/[email protected]	Transitive: environment, eval, filesystem, shell, unsafe	+56	12.2 MB	xunnamius
npm/[email protected]	None	0	4.05 kB	stevenvachon
npm/[email protected]	environment, eval, filesystem	0	1.21 MB	zloirock
npm/[email protected]	None	0	17.3 kB	dcporter
npm/[email protected]	None	0	5.8 kB	developit
npm/[email protected]	None	0	86.2 kB	infusion
npm/[email protected]	environment, filesystem, unsafe	0	1.91 MB	pi0
npm/[email protected]	None	0	9.62 MB	devongovett
npm/[email protected]	filesystem	0	16.6 kB	antonk52
npm/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	+618	715 MB	marklawlor
npm/[email protected]	None	0	7.77 kB	james.talmage
npm/[email protected]	None	0	58.9 kB	addaleax
npm/[email protected]	Transitive: environment, filesystem	+12	527 kB	ryanzim
npm/[email protected]	Transitive: environment	+4	240 kB	ai
npm/[email protected]	environment, unsafe Transitive: filesystem, shell	+39	445 MB	ai
npm/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	+103	52.9 MB	ai, evilebottnawi, jhnns, ...1 more
npm/[email protected]	Transitive: environment	+6	450 kB	ai
npm/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	+617	715 MB	marklawlor
npm/[email protected]	filesystem	+1	10.2 kB	trysound
npm/[email protected]	environment, filesystem Transitive: shell, unsafe	+106	456 MB	adamwathan
npm/[email protected]	None	+2	36.7 kB	dead_horse
npm/[email protected]	None	+1	30.1 kB	dead_horse

🚮 Removed packages: npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎

[socket-security]

👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

Ignoring: npm/@alloc/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎

Next steps

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of ecosystem/package-name@version specifiers. e.g. @SocketSecurity ignore npm/[email protected] or ignore all packages with @SocketSecurity ignore-all

[panzacoder]

@panzacoder I've updated this pr with some more changes to now allow babel presets and also to pass options to the react native preset

@dannyhw Just looked through the changes, looks good to me, and looks like you added nativewind support to the .storybook/main.js. Is that for your example or are you planning to ship that support zero-config?

[dannyhw]

@panzacoder thats just adding it to the example so that its tested

[dannyhw]

@SocketSecurity ignore-all