No commit message

examples/one-tailwind/app/base.css

@@ -1,3 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;

examples/one-tailwind/app/index.tsx

@@ -3,9 +3,9 @@ import { Text, View } from 'react-native'
 import './base.css'
 
 export default function Index() {
-  const out = (
-    <div className="bg-red-500 p-4 border uppercase">this is bg should be red by tailwind</div>
-  )
+  // const out = (
+  //   <div className="bg-red-500 p-4 border uppercase">this is bg should be red by tailwind</div>
+  // )
 
   console.log('what is', typeof out.props.children, typeof out.props.children?.props)
 
@@ -19,11 +19,11 @@ export default function Index() {
         minHeight: '100%',
       }}
     >
-      <Text className="bg-red-500 p-4">Hello world, from One</Text>
+      {/* <Text className="bg-red-500 p-4">Hello world, from One</Text>
 
-      {/* <View style={{ $$css: true, test: 'w-10 h-10 bg-blue-500' }} /> */}
+      <View style={{ $$css: true, test: 'w-10 h-10 bg-blue-500' }} /> */}
 
-      {out}
+      {/* {out} */}
     </View>
   )
 }

examples/one-tailwind/tailwind.config.js

@@ -1,12 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-    "./app/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './app/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {},
   },
-  plugins: [require("tailwindcss-animate"), require("tailwindcss-motion")],
-};
+  resets: [require('nativewind/preset')],
+  plugins: [require('tailwindcss-animate'), require('tailwindcss-motion')],
+}

packages/compiler/src/index.ts

@@ -12,6 +12,8 @@ import { debug, runtimePublicPath, validParsers } from './constants'
 import { getBabelOptions, transformBabel } from './transformBabel'
 import { transformSWC } from './transformSWC'
 import type { Environment, GetTransformProps, Options } from './types'
+import { cssToReactNativeRuntime } from 'react-native-css-interop/css-to-rn/index.js'
+import { configuration } from './configure'
 
 export * from './configure'
 export * from './transformBabel'
@@ -51,6 +53,23 @@ export async function createVXRNCompilerPlugin(
           : undefined,
     },
 
+    {
+      name: `one:compiler-css-to-js`,
+      enforce: 'post',
+      transform(code, id) {
+        const environment = getEnvName(this.environment.name)
+        if (configuration.enableNativeCSS && (environment === 'ios' || environment === 'android')) {
+          if (extname(id) === '.css') {
+            const data = JSON.stringify(cssToReactNativeRuntime(code, { inlineRem: 16 }))
+            return {
+              code: `require("nativewind").StyleSheet.registerCompiled(${data})`,
+              map: null,
+            }
+          }
+        }
+      },
+    },
+
     {
       name: 'one:compiler',
       enforce: 'pre',
@@ -61,6 +80,10 @@ export async function createVXRNCompilerPlugin(
           optimizeDeps: {
             noDiscovery: true,
           },
+
+          define: {
+            'process.env.NATIVEWIND_OS': 'native',
+          },
         } satisfies UserConfig
 
         return {
@@ -93,10 +116,8 @@ export async function createVXRNCompilerPlugin(
           const production = process.env.NODE_ENV === 'production'
 
           if (extension === '.css') {
-            console.warn('EXTENSION CSS')
-            if (environment === 'ios' || environment === 'android') {
-              return null
-            }
+            // handled in separate post plugin
+            return
           }
 
           let id = _id.split('?')[0]

packages/compiler/src/transformSWC.ts

@@ -37,9 +37,8 @@ export async function transformSWC(
     return
   }
 
-  const enableNativeCSS =
-    configuration.enableNativeCSS &&
-    (options.environment === 'ios' || options.environment === 'android')
+  const enableNativeCSS = configuration.enableNativeCSS
+
   // temp fix idk why  this error:
   // node_modules/react-native-reanimated/src/component/LayoutAnimationConfig.tsx (19:9): "createInteropElement" is not exported by "../../node_modules/react-native-css-interop/dist/runtime/jsx-dev-runtime.js", imported by "node_modules/react-native-reanimated/src/component/LayoutAnimationConfig.tsx
   !id.includes('node_modules')

packages/compiler/types/transformSWC.d.ts

@@ -2,6 +2,8 @@ import { type Output, type Options as SWCOptions } from '@swc/core';
 import type { Options } from './types';
 export declare function transformSWC(id: string, code: string, options: Options & {
     es5?: boolean;
-}, swcOptions?: SWCOptions): Promise<Output | undefined>;
+}, swcOptions?: SWCOptions): Promise<{
+    code: string;
+} | undefined>;
 export declare const transformSWCStripJSX: (id: string, code: string) => Promise<Output | undefined>;
 //# sourceMappingURL=transformSWC.d.ts.map

packages/vxrn/src/utils/getOptimizeDeps.ts

@@ -5,6 +5,7 @@ import { webExtensions } from '../constants'
 
 export function getOptimizeDeps(mode: 'build' | 'serve') {
   const needsInterop = [
+    'nativewind/jsx-dev-runtime',
     '@vxrn/safe-area',
     '@vxrn/vendor/react-19-prod',
     '@vxrn/vendor/react-19',