fix: Ensure Windows path compatibility in web platform transformation

[dmitryshostak]

This PR fixes an issue where Windows paths were not correctly handled in the Metro transformer's web platform transformation, causing incorrect runtime module resolution.

It's a duplicate of https://github.com/marklawlor/nativewind/pull/854, but with a better naming so we don't break it again. ❗

@marklawlor could you please merge it ASAP as we're using nativewind in production and we hate to patch it :)

The related issue - https://github.com/marklawlor/nativewind/issues/784#issuecomment-2018604499

[vercel[bot]]

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

Name	Status	Preview	Updated (UTC)
nativewind	✅ Ready (Inspect)	Visit Preview	Mar 29, 2024 8:05pm

[yjose]

@marklawlor We encountered the same issue on Windows as well, and the fix appears to be working as expected. 🙏

[Alejandro-M-Cruz]

Same here. It would be great if it could be merged soon. By the way, great work by @marklawlor and all contributors, Nativewind is amazing

[aaronksaunders]

@dmitryshostak how can i use this branch in my project now? I am blocked.

[Alejandro-M-Cruz]

Hi, @aaronksaunders. I think there are ways to install a dependency from a pull request / fork, but at least it didn't seem to work for me. I created this simple PHP script that applies the fix once the nativewind package has been installed. I run it whenever I install my front-end dependencies. You can easily translate the script to whatever language you prefer.

<?php

$filePath = 'front-end/node_modules/nativewind/dist/metro/transformer.js';
$content = file_get_contents($filePath);

$issue = '`require(\'${config.nativewind.output}\');`';

if (! str_contains($content, $issue)) {
    echo 'NativeWind fix already applied!';
    return;
}

$fix = '`require(\'${config.nativewind.output.replace(/\\\\/g, \'\\\\\\\\\')}\');`';

$result = str_replace($issue, $fix, $content);

file_put_contents($filePath, $result);

echo 'NativeWind fix applied successfully!';

[rickychan0611]

Inspired by @Alejandro-M-Cruz, I've created JavaScript instead. You can place it in the root directory of your project.

To integrate this script with your application, add the following entry to your package.json. This will ensure the script runs every time you start your program:

 "scripts": {
    "start": "node fix.js && expo start"
  },

Here is the JavaScript script:

// fix.js
const fs = require('fs');
const path = require('path');

const filePath = path.join('.', 'node_modules', 'nativewind', 'dist', 'metro', 'transformer.js');

fs.readFile(filePath, 'utf8', (err, content) => {
    if (err) {
        console.error(err);
        return;
    }

    const issue = '`require(\'${config.nativewind.output}\');`';

    if (!content.includes(issue)) {
        console.log('NativeWind fix already applied!');
        return;
    }

    const fix = '`require(\'${config.nativewind.output.replace(/\\\\/g, \'\\\\\\\\\')}\');`';
    const result = content.replace(issue, fix);

    fs.writeFile(filePath, result, 'utf8', (err) => {
        if (err) {
            console.error(err);
            return;
        }
        console.log('NativeWind fix applied successfully!');
    });
});

This setup allows the fix.js script to batch process necessary adjustments automatically whenever you initiate your project with expo start.