@colimuca123/nativewind 4.2.2-rc.1

package/src/tailwind/color.ts

@@ -0,0 +1,23 @@
+import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
+import toColorValue from "tailwindcss/lib/util/toColorValue";
+import withAlphaVariable from "tailwindcss/lib/util/withAlphaVariable";
+import plugin from "tailwindcss/plugin";
+
+export const color = plugin(function ({ matchUtilities, corePlugins, theme }) {
+  matchUtilities(
+    {
+      color: (value) => {
+        if (!corePlugins("textOpacity")) {
+          return { color: toColorValue(value) };
+        }
+
+        return withAlphaVariable({
+          color: value,
+          property: "color",
+          variable: "--tw-text-opacity",
+        });
+      },
+    },
+    { values: flattenColorPalette(theme("textColor")), type: ["color", "any"] },
+  );
+});

package/src/tailwind/common.ts

@@ -0,0 +1,26 @@
+const denyColors = new Set([
+  "lightBlue",
+  "warmGray",
+  "trueGray",
+  "coolGray",
+  "blueGray",
+]);
+/**
+ * Tailwind shows a deprecated warning if you use colors directly.
+ * So we need to filter out the colors that are not allowed.
+ * The warning is shown on property access, so we need to filter using this method
+ */
+export const allowedColors = ({ colors }: any) => {
+  const _colors: Record<string, unknown> = {};
+  for (const color of Object.keys(colors)) {
+    if (denyColors.has(color)) {
+      continue;
+    }
+    _colors[color] = colors[color];
+  }
+  return _colors;
+};
+
+export const isWeb =
+  process.env.NATIVEWIND_OS === undefined ||
+  process.env.NATIVEWIND_OS === "web";

package/src/tailwind/dark-mode.ts

@@ -0,0 +1,46 @@
+import { Config } from "tailwindcss";
+import plugin from "tailwindcss/plugin";
+
+import { isWeb } from "./common";
+
+export const darkModeAtRule = plugin(function ({ config, addBase }) {
+  const darkMode = config<Config["darkMode"]>("darkMode");
+
+  let type: string | undefined = "media";
+  let value: string | undefined;
+
+  if (darkMode === "media" || !darkMode) {
+    type = "media";
+  } else if (darkMode === "class") {
+    type = "class";
+    value = "dark";
+  } else if (darkMode[0] === "class") {
+    type = "class";
+    value = darkMode[1];
+
+    if (!value) {
+      return;
+    }
+
+    if (value.startsWith("[") && value.endsWith("]")) {
+      type = "attribute";
+      value = value.slice(1, -1);
+    } else if (value.startsWith(".")) {
+      value = value.slice(1);
+    }
+  }
+
+  if (isWeb) {
+    addBase({
+      ":root": {
+        "--css-interop-darkMode": [type, value].filter(Boolean).join(" "),
+      },
+    });
+  } else {
+    const atRule = ["@cssInterop set darkMode", type, value]
+      .filter(Boolean)
+      .join(" ");
+
+    addBase({ [atRule]: "" });
+  }
+});

package/src/tailwind/index.ts

@@ -0,0 +1,15 @@
+module.exports = Object.assign(
+  () => {
+    // Check if this file is being loaded by an editor with Tailwind CSS IntelliSense (e.g., VS Code).
+    // If so, load the `native` part so that features implemented in `native` (like `p-safe`) can be auto-completed in the editor.
+    const isTailwindCSSIntelliSenseMode = "TAILWIND_MODE" in process.env;
+    if (isTailwindCSSIntelliSenseMode) return require("./native").default;
+    return process.env.NATIVEWIND_OS === undefined ||
+      process.env.NATIVEWIND_OS === "web"
+      ? require("./web").default
+      : require("./native").default;
+  },
+  {
+    nativewind: true,
+  },
+);

package/src/tailwind/native.ts

@@ -0,0 +1,374 @@
+// cSpell:ignore borderless
+import { AtRule } from "postcss";
+import { Config } from "tailwindcss";
+import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
+import toColorValue from "tailwindcss/lib/util/toColorValue";
+import plugin from "tailwindcss/plugin";
+import { PluginUtils } from "tailwindcss/types/config";
+
+import { hairlineWidth, platformSelect } from "../theme";
+import { color } from "./color";
+import { allowedColors } from "./common";
+import { darkModeAtRule } from "./dark-mode";
+import { safeArea } from "./safe-area";
+import { shadows } from "./shadows";
+import { nativeSwitch } from "./switch";
+import { translateX, translateY } from "./translate";
+import { verify } from "./verify";
+
+const kebabCase = (str: string) => {
+  return str.replace(
+    /[A-Z]+(?![a-z])|[A-Z]/g,
+    ($, ofs) => (ofs ? "-" : "") + $.toLowerCase(),
+  );
+};
+
+const nativePlugins = plugin(function ({
+  addBase,
+  addUtilities,
+  addVariant,
+  config,
+  matchUtilities,
+  matchVariant,
+  theme,
+  ...other
+}) {
+  const nativePlatforms = ["android", "ios", "windows", "macos", "harmony"];
+
+  // RN requires the unit, so reset the defaults
+  // This is an undocumented feature of Tailwind that allows you to modify the @default layer
+  (other as any).addDefaults("transform", {
+    "--tw-rotate": "0deg",
+    "--tw-skew-x": "0deg",
+    "--tw-skew-y": "0deg",
+  });
+
+  /**
+   * `display-mode` is a valid media query, but the ${platform} values are not.
+   *
+   * We need to either add a new Media Condition or hijack an existing one,
+   * display-mode seems good enough?
+   *
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode
+   */
+  for (const platform of nativePlatforms) {
+    addVariant(platform, `@media (display-mode: ${platform})`);
+  }
+
+  addVariant(
+    "native",
+    nativePlatforms.map((platform) => `@media (display-mode: ${platform})`),
+  );
+
+  /**
+   * The native module requires the `.dark` selector to pickup darkMode variables
+   * when using darkMode: 'class'
+   *
+   * If the user never uses the word 'dark' the selector will never be processed
+   * This is an edge case, but one we often encounter in testing (where .dark)
+   * will only contain CSS variables and never referenced directly
+   */
+  config("safelist").push("dark");
+
+  /**
+   * Change the visible/invisible classes
+   *
+   */
+  addUtilities({
+    ".visible": { opacity: 1 },
+    ".invisible": { opacity: 0 },
+  } as any);
+
+  /**
+   * move-[]:
+   */
+  matchVariant(
+    "{}",
+    (value = "", { modifier, container }: any) => {
+      value = kebabCase(value.replace(/&/, "\\&").replaceAll(".", "\\."));
+
+      if (modifier) {
+        modifier = modifier.replace(/&/, "\\&").replaceAll(".", "\\.");
+      }
+
+      if (modifier && !value) {
+        value = modifier;
+        modifier = undefined;
+      }
+
+      container.walkRules((rule: any) => {
+        rule.append(
+          new AtRule({
+            name: "rn-move",
+            params: `${modifier ?? "\\*"} ${value}`,
+          }),
+        );
+      });
+      return `&`;
+    },
+    { values: { DEFAULT: undefined } },
+  );
+
+  /**
+   * Native Prop remapping
+   */
+  addVariant("selection", (({ container }: any) => {
+    container.walkRules((rule: any) => {
+      rule.append(
+        new AtRule({ name: "rn-move", params: "color selectionColor" }),
+      );
+    });
+    return "&";
+  }) as any);
+
+  addVariant("placeholder", (({ container }: any) => {
+    container.walkRules((rule: any) => {
+      rule.append(
+        new AtRule({ name: "rn-move", params: "color placeholderTextColor" }),
+      );
+    });
+    return "&";
+  }) as any);
+
+  // https://github.com/tailwindlabs/tailwindcss/blob/eb2fe9494b638c3b67194f3ddf3c040f064e060d/src/corePlugins.js#L624-L629
+  addUtilities({
+    ".pointer-events-none": { "pointer-events": "none" },
+    ".pointer-events-auto": { "pointer-events": "auto" },
+    ".pointer-events-box-none": { "pointer-events": "box-none" },
+    ".pointer-events-box-only": { "pointer-events": "box-only" },
+  });
+
+  // https://github.com/tailwindlabs/tailwindcss/blob/eb2fe9494b638c3b67194f3ddf3c040f064e060d/src/corePlugins.js#L729C3-L750C5
+  matchUtilities(
+    {
+      "line-clamp": (value) => ({
+        "&": {
+          "@rn-move -rn-number-of-lines number-of-lines": "true",
+          overflow: "hidden",
+          "-rn-number-of-lines": value,
+        },
+      }),
+    },
+    { values: theme("lineClamp") },
+  );
+
+  matchUtilities(
+    {
+      elevation: (value) => ({
+        "-rn-elevation": value,
+      }),
+    },
+    { values: theme("elevation") },
+  );
+
+  addUtilities({
+    ".line-clamp-none": {
+      "&": {
+        "@rn-move -rn-number-of-lines number-of-lines": "true",
+        overflow: "visible",
+        "-rn-number-of-lines": "0",
+      },
+    },
+  });
+
+  /**
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  matchUtilities(
+    {
+      ripple: (value) => {
+        return {
+          "&": {
+            "@rn-move color android_ripple\\.color": "true",
+            color: toColorValue(value),
+          },
+        };
+      },
+    },
+    {
+      values: flattenColorPalette(theme("rippleColor")),
+      type: ["color", "any"],
+    },
+  );
+  matchUtilities(
+    {
+      ripple: (value) => {
+        return {
+          "&": {
+            "@rn-move -rn-borderless android_ripple\\.borderless": "true",
+            "-rn-borderless": value,
+          },
+        };
+      },
+    },
+    {
+      values: {
+        borderless: "true",
+        bordered: "false",
+      },
+      type: "any",
+    },
+  );
+
+  matchUtilities(
+    {
+      caret: (value) => {
+        return {
+          "&": {
+            "@rn-move caret-color cursor-color": "true",
+            "caret-color": toColorValue(value),
+          },
+        };
+      },
+    },
+    {
+      values: flattenColorPalette(theme("caretColor")),
+      type: ["color", "any"],
+    },
+  );
+
+  /**
+   * SVG Prop remapping
+   */
+  matchUtilities(
+    {
+      fill: (value) => {
+        return {
+          "&": {
+            "@rn-move fill": "true",
+            fill: `${toColorValue(value)}`,
+          },
+        };
+      },
+    },
+    { values: flattenColorPalette(theme("fill")), type: ["color", "any"] },
+  );
+
+  matchUtilities(
+    {
+      stroke: (value) => ({
+        "&": {
+          "@rn-move stroke": "true",
+          stroke: toColorValue(value),
+        },
+      }),
+    },
+    { values: flattenColorPalette(theme("stroke")), type: ["color", "any"] },
+  );
+
+  matchUtilities(
+    {
+      stroke: (value) => ({
+        "&": {
+          "@rn-move stroke-width": "true",
+          strokeWidth: toColorValue(value),
+        },
+      }),
+    },
+    { values: theme("strokeWidth"), type: ["length", "number", "percentage"] },
+  );
+});
+
+const preset: Config = {
+  content: [],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: platformSelect({ android: "san-serif", ios: "'system font'", harmony: "san-serif" }),
+        serif: platformSelect({ android: "serif", ios: "Georgia", harmony: "serif" }),
+        mono: platformSelect({ android: "mono", ios: "'Courier New'", harmony: "mono" }),
+      },
+      elevation: {
+        sm: "1",
+        DEFAULT: "3",
+        md: "6",
+        lg: "8",
+        xl: "13",
+        "2xl": "24",
+        none: "0",
+      },
+      boxShadow: {
+        sm: " 0px 1px 1px rgba(0, 0, 0, 0.35)",
+        DEFAULT: "0px 1px 4px rgba(0, 0, 0, 0.35)",
+        md: "0px 3px 10px rgba(0, 0, 0, 0.35)",
+        lg: "0px 4px 10px rgba(0, 0, 0, 0.35)",
+        xl: "0px 6px 19px rgba(0, 0, 0, 0.35)",
+        "2xl": "0px 12px 38px rgba(0, 0, 0, 0.35) ",
+        none: "0 0 #0000",
+      },
+      translateX: ({ theme }: PluginUtils) => ({
+        ...theme("spacing"),
+        "1/2": "50rnw",
+        "1/3": "33.333333rnw",
+        "2/3": "66.666667rnw",
+        "1/4": "25rnw",
+        "2/4": "50rnw",
+        "3/4": "75rnw",
+        full: "100rnw",
+      }),
+      translateY: ({ theme }: PluginUtils) => ({
+        ...theme("spacing"),
+        "1/2": "50rnh",
+        "1/3": "33.333333rnh",
+        "2/3": "66.666667rnh",
+        "1/4": "25rnh",
+        "2/4": "50rnh",
+        "3/4": "75rnh",
+        full: "100rnh",
+      }),
+      borderWidth: {
+        hairline: hairlineWidth(),
+      },
+      letterSpacing: {
+        tighter: "-0.5px",
+        tight: "-0.25px",
+        normal: "0px",
+        wide: "0.25px",
+        wider: "0.5px",
+        widest: "1px",
+      },
+      transitionProperty: {
+        DEFAULT:
+          "color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, perspective, rotate, rotateX, rotateY, rotateZ, scale, scaleX, scaleY, translateX, translateY, skewX, skewY, filter, backdrop-filter",
+        all: "background-color, border-bottom-color, border-bottom-left-radius, border-bottom-right-radius, border-bottom-width, border-color, border-left-color, border-left-width, border-radius, border-right-color, border-right-width, border-top-color, border-top-width, border-width, color, fill, font-size, font-weight, gap, letter-spacing, line-height, margin, margin-bottom, margin-left, margin-right, margin-top, object-position, opacity, order, padding, padding-bottom, padding-left, padding-right, padding-top, rotate, scale, stroke, text-decoration, text-decoration-color, perspective, rotate, rotateX, rotateY, rotateZ, scale, scaleX, scaleY, translateX, translateY, skewX, skewY, transform-origin, translate, vertical-align, visibility, word-spacing, z-index",
+        transform:
+          "perspective, rotate, rotateX, rotateY, rotateZ, scale, scaleX, scaleY, translateX, translateY, skewX, skewY",
+      },
+      trackColor: allowedColors,
+      thumbColor: allowedColors,
+      rippleColor: allowedColors,
+    },
+  },
+  plugins: [
+    safeArea,
+    color,
+    darkModeAtRule,
+    shadows,
+    translateX,
+    translateY,
+    verify,
+    nativePlugins,
+    nativeSwitch,
+  ],
+  corePlugins: {
+    preflight: false,
+    backgroundOpacity: false,
+    borderOpacity: false,
+    boxShadow: false,
+    caretColor: false,
+    divideOpacity: false,
+    fill: false,
+    placeholderColor: false,
+    placeholderOpacity: false,
+    lineClamp: false,
+    ringOpacity: false,
+    stroke: false,
+    strokeWidth: false,
+    textOpacity: false,
+    translate: false,
+    pointerEvents: false,
+    visibility: false,
+  },
+};
+
+export default preset;

package/src/tailwind/prop-modifier.ts

@@ -0,0 +1,7 @@
+import plugin from "tailwindcss/plugin";
+
+export const webPropModifierPlugin = plugin(function ({ matchVariant, e }) {
+  matchVariant("prop", () => {
+    return `&`;
+  });
+});