@colimuca123/nativewind 4.2.2-rc.1

package/src/__tests__/unofficial-plugins.test.ios.tsx

@@ -0,0 +1,171 @@
+/** @jsxImportSource nativewind */
+
+/**
+ * This file has some examples of unofficial plugins used by the community.
+ *
+ * They are not officially supported by NativeWind
+ */
+
+import { Text, View } from "react-native";
+
+import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
+import plugin from "tailwindcss/plugin";
+
+import { render, screen } from "../test";
+
+const testID = "nativewind";
+
+test("tw-colors", async () => {
+  const { createThemes } = require("tw-colors");
+
+  // Render will inject data
+  await render(
+    <View className="theme-light">
+      <View testID={testID} className="text-primary" />
+    </View>,
+    {
+      config: {
+        plugins: [
+          createThemes(
+            {
+              light: {
+                primary: "red",
+              },
+              dark: {
+                primary: "blue",
+              },
+            },
+            {
+              produceThemeClass: (themeName: string) => `theme-${themeName}`,
+            },
+          ),
+        ],
+      },
+    },
+  );
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    color: "hsla(0, 100%, 50%, 1)",
+  });
+
+  screen.rerender(
+    <View className="theme-dark">
+      <View testID={testID} className="text-primary" />
+    </View>,
+  );
+
+  expect(screen.getByTestId(testID)).toHaveStyle({
+    color: "hsla(240, 100%, 50%, 1)",
+  });
+});
+
+test("text-shadow", async () => {
+  const textShadowPlugin = plugin(
+    function ({ addBase, matchUtilities, matchComponents, theme }: any) {
+      addBase({
+        ":root": {
+          "--ts-text-shadow-color": "rgba(0, 0,0,0.50)",
+          "--ts-text-shadow-x": "1px",
+          "--ts-text-shadow-y": "1px",
+          "--ts-text-shadow-blur": "2px",
+        },
+      });
+
+      matchUtilities(
+        {
+          [`text-shadow-x`]: (value: Record<string, string>) => ({
+            "--ts-text-shadow-x": value,
+          }),
+          [`text-shadow-y`]: (value: Record<string, string>) => ({
+            "--ts-text-shadow-y": value,
+          }),
+          [`text-shadow-blur`]: (value: Record<string, string>) => ({
+            "--ts-text-shadow-blur": value,
+          }),
+        },
+        {
+          values: theme("textShadowSteps"),
+          type: "length",
+          supportsNegativeValues: true,
+        },
+      );
+
+      matchUtilities(
+        {
+          [`text-shadow`]: (value: Record<string, string>) => ({
+            "--ts-text-shadow-color": value,
+          }),
+        },
+        {
+          values: flattenColorPalette(theme("colors")),
+          type: "color",
+        },
+      );
+
+      matchComponents(
+        {
+          [`text-shadow`]: (value: number) => ({
+            textShadow:
+              value === 1
+                ? `var(--ts-text-shadow-x) var(--ts-text-shadow-y) var(--ts-text-shadow-blur) var(--ts-text-shadow-color)`
+                : `calc(var(--ts-text-shadow-x) * ${value}) calc(var(--ts-text-shadow-y) * ${value}) var(--ts-text-shadow-blur) var(--ts-text-shadow-color)`,
+          }),
+        },
+        {
+          type: "number",
+          values: theme("textShadowMultiplier"),
+        },
+      );
+    },
+    {
+      theme: {
+        experimental: false,
+        textShadowMultiplier: {
+          DEFAULT: 1,
+          sm: 4,
+          md: 8,
+          lg: 12,
+          xl: 16,
+        },
+        textShadowSteps: {
+          xs: "1px",
+          sm: "2px",
+          md: "3px",
+          lg: "4px",
+          xl: "5px",
+          0: "0",
+          1: "1px",
+          2: "2px",
+          3: "3px",
+          4: "4px",
+          5: "5px",
+          6: "6px",
+          7: "7px",
+          8: "8px",
+          9: "9px",
+          10: "10px",
+        },
+      },
+    },
+  );
+
+  await render(
+    <Text testID={testID} className="text-shadow-lg text-shadow-red-500" />,
+    {
+      config: {
+        plugins: [textShadowPlugin],
+      },
+    },
+  );
+
+  const text = screen.getByTestId(testID);
+
+  expect(text).toHaveStyle({
+    textShadowColor: "#ef4444",
+    textShadowOffset: {
+      height: 12,
+      width: 12,
+    },
+    textShadowRadius: 2,
+  });
+});

package/src/doctor.ts

@@ -0,0 +1,28 @@
+import { verifyData, verifyFlag, verifyJSX } from "react-native-css-interop";
+
+export function verifyInstallation() {
+  if (process.env.NODE_ENV !== "development") {
+    console.warn(
+      "verifyInstallation() was called in a non-development environment()",
+    );
+  }
+
+  if (!verifyJSX()) {
+    throw new Error(
+      "jsxImportSource was not set to 'nativewind'. Please refer to http://nativewind.dev/troubleshooting#jsxImportSource",
+    );
+  }
+  if (!verifyData()) {
+    throw new Error(
+      "Nativewind received no data. Please refer to http://nativewind.dev/troubleshooting#no-data",
+    );
+  }
+  if (!verifyFlag("nativewind")) {
+    throw new Error(
+      "Nativewind: was unable to detect the 'nativewind/preset'. Please refer to http://nativewind.dev/troubleshooting#tailwind-preset",
+    );
+  }
+
+  console.log("NativeWind verifyInstallation() found no errors");
+  return true;
+}

package/src/index.tsx

@@ -0,0 +1,16 @@
+export { verifyInstallation } from "./doctor";
+
+export {
+  StyleSheet,
+  colorScheme,
+  createInteropElement,
+  cssInterop,
+  rem,
+  remapProps,
+  useSafeAreaEnv,
+  useUnstableNativeVariable,
+  vars,
+} from "react-native-css-interop";
+
+export { useColorScheme } from "./stylesheet";
+export { createElement } from "react";

package/src/metro/common.ts

@@ -0,0 +1,11 @@
+// This is separated so it can be used in tests
+// Importing `withTailwind` will cause Jest to fail
+export const cssToReactNativeRuntimeOptions = {
+  /*
+   * Ignore all warnings from `--tw` variables.
+   * These are set by a number of Tailwind classes (and by @base) and
+   * will flood the user with invalid warnings
+   */
+  ignorePropertyWarningRegex: ["^--tw-"],
+  grouping: ["^group(/.*)?"],
+};

package/src/metro/index.ts

@@ -0,0 +1,77 @@
+import path from "path";
+
+import { debug as debugFn } from "debug";
+import type { MetroConfig } from "metro-config";
+import {
+  withCssInterop,
+  WithCssInteropOptions,
+} from "react-native-css-interop/metro";
+
+import { cssToReactNativeRuntimeOptions } from "./common";
+import { tailwindCli, tailwindConfig } from "./tailwind";
+import { setupTypeScript } from "./typescript";
+
+interface WithNativeWindOptions extends WithCssInteropOptions {
+  input: string;
+  projectRoot?: string;
+  outputDir?: string;
+  configPath?: string;
+  cliCommand?: string;
+  browserslist?: string | null;
+  browserslistEnv?: string | null;
+  typescriptEnvPath?: string;
+  disableTypeScriptGeneration?: boolean;
+}
+
+const debug = debugFn("nativewind");
+
+export function withNativeWind(
+  config: MetroConfig,
+  {
+    input,
+    inlineRem = 14,
+    configPath: tailwindConfigPath = "tailwind.config",
+    browserslist = "last 1 version",
+    browserslistEnv = "native",
+    typescriptEnvPath = "nativewind-env.d.ts",
+    disableTypeScriptGeneration = false,
+    ...options
+  }: WithNativeWindOptions = {} as WithNativeWindOptions,
+): MetroConfig {
+  if (input) input = path.resolve(input);
+
+  debug(`input: ${input}`);
+
+  const { important } = tailwindConfig(path.resolve(tailwindConfigPath));
+
+  debug(`important: ${important}`);
+
+  const cli = tailwindCli(debug);
+
+  if (!disableTypeScriptGeneration) {
+    debug(`checking TypeScript setup`);
+    setupTypeScript(typescriptEnvPath);
+  }
+
+  return withCssInterop(config, {
+    ...cssToReactNativeRuntimeOptions,
+    ...options,
+    inlineRem,
+    selectorPrefix: typeof important === "string" ? important : undefined,
+    input,
+    parent: {
+      name: "nativewind",
+      debug: "nativewind",
+    },
+    getCSSForPlatform: (platform, onChange) => {
+      debug(`getCSSForPlatform: ${platform}`);
+      return cli.getCSSForPlatform({
+        platform,
+        input,
+        browserslist,
+        browserslistEnv,
+        onChange,
+      });
+    },
+  });
+}

package/src/metro/picocolors.ts

@@ -0,0 +1,76 @@
+// ISC License
+
+// Copyright (c) 2021 Alexey Raspopov, Kostiantyn Denysov, Anton Verinov
+
+// Permission to use, copy, modify, and/or distribute this software for any
+// purpose with or without fee is hereby granted, provided that the above
+// copyright notice and this permission notice appear in all copies.
+
+// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+//
+// https://github.com/alexeyraspopov/picocolors/blob/b6261487e7b81aaab2440e397a356732cad9e342/picocolors.js#L1
+
+const { env, stdout } = globalThis?.process ?? {};
+
+const enabled =
+  env &&
+  !env.NO_COLOR &&
+  (env.FORCE_COLOR || (stdout?.isTTY && !env.CI && env.TERM !== "dumb"));
+
+const replaceClose = (
+  str: string,
+  close: string,
+  replace: string,
+  index: number,
+): string => {
+  const start = str.substring(0, index) + replace;
+  const end = str.substring(index + close.length);
+  const nextIndex = end.indexOf(close);
+  return ~nextIndex
+    ? start + replaceClose(end, close, replace, nextIndex)
+    : start + end;
+};
+
+const formatter = (open: string, close: string, replace = open) => {
+  if (!enabled) return String;
+  return (input: string) => {
+    const string = "" + input;
+    const index = string.indexOf(close, open.length);
+    return ~index
+      ? open + replaceClose(string, close, replace, index) + close
+      : open + string + close;
+  };
+};
+
+export const reset = enabled ? (s: string) => `\x1b[0m${s}\x1b[0m` : String;
+export const bold = formatter("\x1b[1m", "\x1b[22m", "\x1b[22m\x1b[1m");
+export const dim = formatter("\x1b[2m", "\x1b[22m", "\x1b[22m\x1b[2m");
+export const italic = formatter("\x1b[3m", "\x1b[23m");
+export const underline = formatter("\x1b[4m", "\x1b[24m");
+export const inverse = formatter("\x1b[7m", "\x1b[27m");
+export const hidden = formatter("\x1b[8m", "\x1b[28m");
+export const strikethrough = formatter("\x1b[9m", "\x1b[29m");
+export const black = formatter("\x1b[30m", "\x1b[39m");
+export const red = formatter("\x1b[31m", "\x1b[39m");
+export const green = formatter("\x1b[32m", "\x1b[39m");
+export const yellow = formatter("\x1b[33m", "\x1b[39m");
+export const blue = formatter("\x1b[34m", "\x1b[39m");
+export const magenta = formatter("\x1b[35m", "\x1b[39m");
+export const purple = formatter("\x1b[38;2;173;127;168m", "\x1b[39m");
+export const cyan = formatter("\x1b[36m", "\x1b[39m");
+export const white = formatter("\x1b[37m", "\x1b[39m");
+export const gray = formatter("\x1b[90m", "\x1b[39m");
+export const bgBlack = formatter("\x1b[40m", "\x1b[49m");
+export const bgRed = formatter("\x1b[41m", "\x1b[49m");
+export const bgGreen = formatter("\x1b[42m", "\x1b[49m");
+export const bgYellow = formatter("\x1b[43m", "\x1b[49m");
+export const bgBlue = formatter("\x1b[44m", "\x1b[49m");
+export const bgMagenta = formatter("\x1b[45m", "\x1b[49m");
+export const bgCyan = formatter("\x1b[46m", "\x1b[49m");
+export const bgWhite = formatter("\x1b[47m", "\x1b[49m");

package/src/metro/tailwind/index.ts

@@ -0,0 +1,22 @@
+import { Debugger } from "debug";
+import tailwindPackage from "tailwindcss/package.json";
+
+import { tailwindCliV3, tailwindConfigV3 } from "./v3";
+
+const isV3 = tailwindPackage.version.split(".")[0].includes("3");
+
+export function tailwindCli(debug: Debugger) {
+  if (isV3) {
+    return tailwindCliV3(debug);
+  }
+
+  throw new Error("NativeWind only supports Tailwind CSS v3");
+}
+
+export function tailwindConfig(path: string) {
+  if (isV3) {
+    return tailwindConfigV3(path);
+  } else {
+    throw new Error("NativeWind only supports Tailwind CSS v3");
+  }
+}

package/src/metro/tailwind/types.ts

@@ -0,0 +1,9 @@
+import { GetCSSForPlatformOnChange } from "react-native-css-interop/metro";
+
+export interface TailwindCliOptions {
+  input: string;
+  platform: string;
+  browserslist?: string | null;
+  browserslistEnv?: string | null;
+  onChange?: GetCSSForPlatformOnChange;
+}

package/src/metro/tailwind/v3/child.ts

@@ -0,0 +1,61 @@
+/**
+ * This is a hack around Tailwind CSS v3, please read tailwind/v3/index.ts for more information.
+ */
+(async function () {
+  const fs = require("fs");
+
+  const fakeOutput = "FAKE_OUTPUT";
+  let currentContents = "";
+
+  const originalReadFile = fs.promises.readFile;
+  fs.promises.readFile = async (path: string, encoding: string) => {
+    if (path === fakeOutput) {
+      return currentContents;
+    }
+    return originalReadFile(path, encoding);
+  };
+
+  const originalMkdir = fs.promises.mkdir.bind(fs.promises.mkdir);
+  fs.promises.mkdir = async (path: string, ...args: any) => {
+    if (path === fakeOutput) {
+      return;
+    }
+    return originalMkdir(path, ...args);
+  };
+
+  let previousData = "";
+  fs.promises.writeFile = async (
+    path: string,
+    data: string | Buffer,
+    ...args: any
+  ) => {
+    if (path !== fakeOutput) {
+      throw new Error(`Tailwind CLI attempted to write file ${path}`);
+    }
+
+    if (!process.send) {
+      process.exit(42);
+    }
+
+    const newData = data.toString();
+
+    if (previousData !== newData) {
+      previousData = newData;
+      process.send(newData);
+    }
+
+    return;
+  };
+
+  const { build } = require("tailwindcss/lib/cli/build");
+  const args: Record<string, string | boolean | undefined> = {
+    "--input": process.env.NATIVEWIND_INPUT,
+    "--output": fakeOutput,
+  };
+
+  if (process.env.NATIVEWIND_WATCH === "true") {
+    args["--watch"] = true;
+  }
+
+  await build(args);
+})();

package/src/metro/tailwind/v3/index.ts

@@ -0,0 +1,103 @@
+import { fork } from "child_process";
+
+import { Debugger } from "debug";
+import { type Config } from "tailwindcss";
+
+import { TailwindCliOptions } from "../types";
+
+/**
+ * Tailwind CLI v3 is not very well suited for programmatic usage.
+ * The recommended usage is PostCSS, but then we need to rebuild the plugin array/watcher/etc
+ *
+ * We also can't invoke the CLI directly as it writes to the file system/process.stdout/console.error
+ * in hard to capture ways.
+ *
+ * Our hack is simply to fork a child process (allows us to capture the terminal output)
+ * and override the fs (allows us to capture the output file)
+ *
+ * This is all a bad idea, but gives us full control over the output
+ */
+
+const child_file = __dirname + "/child.js";
+
+const getEnv = (options: TailwindCliOptions) => {
+  return {
+    ...process.env,
+    NATIVEWIND_INPUT: options.input,
+    NATIVEWIND_OS: options.platform,
+    NATIVEWIND_WATCH: options.onChange ? "true" : "false",
+    BROWSERSLIST: options.browserslist ?? undefined,
+    BROWSERSLIST_ENV: options.browserslistEnv ?? undefined,
+  };
+};
+
+export const tailwindCliV3 = function (debug: Debugger) {
+  return {
+    getCSSForPlatform(options: TailwindCliOptions) {
+      debug("Start development Tailwind CLI");
+      return new Promise<string>((resolve, reject) => {
+        try {
+          const child = fork(child_file, {
+            stdio: "pipe",
+            env: getEnv(options),
+          });
+
+          let initialMessage = true;
+          let initialDoneIn = true;
+
+          child.stderr?.on("data", (data) => {
+            data = data.toString();
+            if (data.includes("Done in")) {
+              if (initialDoneIn) {
+                initialDoneIn = false;
+              }
+            } else if (data.includes("warn -")) {
+              console.warn(data);
+            }
+          });
+
+          child.stdout?.on("data", (data) => {
+            data = data.toString();
+          });
+
+          child.on("message", (message) => {
+            if (initialMessage) {
+              resolve(message.toString());
+              initialMessage = false;
+              debug("Finished initial development Tailwind CLI");
+            } else if (options.onChange) {
+              debug("Tailwind CLI detected new styles");
+              options.onChange(message.toString());
+            }
+          });
+        } catch (e) {
+          reject(e);
+        }
+      });
+    },
+  };
+};
+
+const flattenPresets = (configs: Partial<Config>[] = []): Partial<Config>[] => {
+  if (!configs) return [];
+  return configs.flatMap((config) => [
+    config,
+    ...flattenPresets(config.presets),
+  ]);
+};
+
+export function tailwindConfigV3(path: string) {
+  const config: Config = require("tailwindcss/loadConfig")(path);
+
+  const hasPreset = flattenPresets(config.presets).some((preset) => {
+    return preset.nativewind;
+  });
+
+  if (!hasPreset) {
+    throw new Error(
+      "Tailwind CSS has not been configured with the NativeWind preset",
+    );
+  }
+
+  return config;
+}

package/src/metro/typescript.ts

@@ -0,0 +1,69 @@
+import { existsSync, readFileSync, writeFileSync } from "fs";
+
+import { CommentArray, parse, stringify } from "comment-json";
+
+import { bold, cyan } from "./picocolors";
+
+export function setupTypeScript(envPath: string) {
+  try {
+    const ts = require("typescript");
+    if (!ts) {
+      return;
+    }
+
+    const configFileName = ts.findConfigFile(
+      "./",
+      ts.sys.fileExists,
+      "tsconfig.json",
+    );
+
+    const userConfig = parse(
+      readFileSync(configFileName, {
+        encoding: "utf-8",
+      }),
+    );
+
+    if (
+      typeof userConfig !== "object" ||
+      !userConfig ||
+      Array.isArray(userConfig)
+    ) {
+      return;
+    }
+
+    const output: string[] = [];
+    let updatedConfig = false;
+
+    if (!existsSync(envPath)) {
+      writeFileSync(
+        envPath,
+        `/// <reference types="nativewind/types" />
+
+// NOTE: This file should not be edited and should be committed with your source code. It is generated by NativeWind.`,
+      );
+      output.push(`Created ${cyan(envPath)}`);
+    }
+
+    userConfig.include ??= new CommentArray(envPath);
+    if (
+      Array.isArray(userConfig.include) &&
+      !userConfig.include.includes(envPath)
+    ) {
+      userConfig.include.push(envPath);
+      updatedConfig = true;
+      output.push(
+        `Updated ${configFileName} to include the ${cyan(envPath)} file`,
+      );
+    }
+
+    if (updatedConfig) {
+      writeFileSync(configFileName, stringify(userConfig, null, 2));
+    }
+
+    if (output.length) {
+      console.log(
+        `${cyan(bold("NativeWind"))} made the following changes to your project to support TypeScript:\n  - ${output.join("\n  - ")}`,
+      );
+    }
+  } catch {}
+}

package/src/stylesheet.ts

@@ -0,0 +1,31 @@
+import {
+  StyleSheet,
+  useColorScheme as useCSSColorScheme,
+} from "react-native-css-interop";
+
+export function useColorScheme() {
+  const colorScheme = useCSSColorScheme();
+  return {
+    ...colorScheme,
+    setColorScheme(scheme: Parameters<typeof colorScheme.setColorScheme>[0]) {
+      const darkMode = StyleSheet.getFlag("darkMode") ?? "media";
+      if (darkMode === "media") {
+        throw new Error(
+          "Unable to manually set color scheme without using darkMode: class. See: https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually",
+        );
+      }
+
+      colorScheme?.setColorScheme(scheme);
+    },
+    toggleColorScheme() {
+      const darkMode = StyleSheet.getFlag("darkMode") ?? "media";
+      if (darkMode === "media") {
+        throw new Error(
+          "Unable to manually set color scheme without using darkMode: class. See: https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually",
+        );
+      }
+
+      colorScheme?.toggleColorScheme();
+    },
+  };
+}