@colimuca123/nativewind 4.2.2-rc.1

package/src/tailwind/safe-area.ts

@@ -0,0 +1,262 @@
+/*
+Modified from: https://github.com/mvllow/tailwindcss-safe-area
+Original License:
+===============================================================================
+MIT License
+
+Copyright (c) 2021 mvllow
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+===============================================================================
+*/
+
+import plugin from "tailwindcss/plugin";
+
+function generateVariantUtilities(
+  utilities: typeof baseUtilities,
+  variant: string,
+  generateValue: (v: string, x: string) => string,
+) {
+  return Object.entries(utilities).reduce(
+    (acc, [selector, propertyValue]) => {
+      const className = selector.slice(1);
+      acc[`${className}-${variant}`] = (x: string) =>
+        Object.entries(propertyValue).reduce(
+          (result, [property, value]) => {
+            if (Array.isArray(value)) {
+              result[property] = value.map((v) =>
+                v === "-webkit-fill-available" ? v : generateValue(v, x),
+              );
+            } else {
+              result[property] = generateValue(value, x);
+            }
+            return result;
+          },
+          {} as Record<string, string | string[]>,
+        );
+      return acc;
+    },
+    {} as Record<string, (x: string) => Record<string, string | string[]>>,
+  );
+}
+
+const baseUtilities = {
+  ".m-safe": {
+    marginTop: "env(safe-area-inset-top)",
+    marginRight: "env(safe-area-inset-right)",
+    marginBottom: "env(safe-area-inset-bottom)",
+    marginLeft: "env(safe-area-inset-left)",
+  },
+  ".mx-safe": {
+    marginRight: "env(safe-area-inset-right)",
+    marginLeft: "env(safe-area-inset-left)",
+  },
+  ".my-safe": {
+    marginTop: "env(safe-area-inset-top)",
+    marginBottom: "env(safe-area-inset-bottom)",
+  },
+  ".ms-safe": {
+    marginInlineStart: "env(safe-area-inset-left)",
+  },
+  ".me-safe": {
+    marginInlineEnd: "env(safe-area-inset-left)",
+  },
+  ".mt-safe": {
+    marginTop: "env(safe-area-inset-top)",
+  },
+  ".mr-safe": {
+    marginRight: "env(safe-area-inset-right)",
+  },
+  ".mb-safe": {
+    marginBottom: "env(safe-area-inset-bottom)",
+  },
+  ".ml-safe": {
+    marginLeft: "env(safe-area-inset-left)",
+  },
+  ".p-safe": {
+    paddingTop: "env(safe-area-inset-top)",
+    paddingRight: "env(safe-area-inset-right)",
+    paddingBottom: "env(safe-area-inset-bottom)",
+    paddingLeft: "env(safe-area-inset-left)",
+  },
+  ".px-safe": {
+    paddingRight: "env(safe-area-inset-right)",
+    paddingLeft: "env(safe-area-inset-left)",
+  },
+  ".py-safe": {
+    paddingTop: "env(safe-area-inset-top)",
+    paddingBottom: "env(safe-area-inset-bottom)",
+  },
+  ".ps-safe": {
+    paddingInlineStart: "env(safe-area-inset-left)",
+  },
+  ".pe-safe": {
+    paddingInlineEnd: "env(safe-area-inset-left)",
+  },
+  ".pt-safe": {
+    paddingTop: "env(safe-area-inset-top)",
+  },
+  ".pr-safe": {
+    paddingRight: "env(safe-area-inset-right)",
+  },
+  ".pb-safe": {
+    paddingBottom: "env(safe-area-inset-bottom)",
+  },
+  ".pl-safe": {
+    paddingLeft: "env(safe-area-inset-left)",
+  },
+  ".scroll-m-safe": {
+    scrollMarginTop: "env(safe-area-inset-top)",
+    scrollMarginRight: "env(safe-area-inset-right)",
+    scrollMarginBottom: "env(safe-area-inset-bottom)",
+    scrollMarginLeft: "env(safe-area-inset-left)",
+  },
+  ".scroll-mx-safe": {
+    scrollMarginRight: "env(safe-area-inset-right)",
+    scrollMarginLeft: "env(safe-area-inset-left)",
+  },
+  ".scroll-my-safe": {
+    scrollMarginTop: "env(safe-area-inset-top)",
+    scrollMarginBottom: "env(safe-area-inset-bottom)",
+  },
+  ".scroll-ms-safe": {
+    scrollMarginInlineStart: "env(safe-area-inset-left)",
+  },
+  ".scroll-me-safe": {
+    scrollMarginInlineEnd: "env(safe-area-inset-left)",
+  },
+  ".scroll-mt-safe": {
+    scrollMarginTop: "env(safe-area-inset-top)",
+  },
+  ".scroll-mr-safe": {
+    scrollMarginRight: "env(safe-area-inset-right)",
+  },
+  ".scroll-mb-safe": {
+    scrollMarginBottom: "env(safe-area-inset-bottom)",
+  },
+  ".scroll-ml-safe": {
+    scrollMarginLeft: "env(safe-area-inset-left)",
+  },
+  ".scroll-p-safe": {
+    scrollPaddingTop: "env(safe-area-inset-top)",
+    scrollPaddingRight: "env(safe-area-inset-right)",
+    scrollPaddingBottom: "env(safe-area-inset-bottom)",
+    scrollPaddingLeft: "env(safe-area-inset-left)",
+  },
+  ".scroll-px-safe": {
+    scrollPaddingRight: "env(safe-area-inset-right)",
+    scrollPaddingLeft: "env(safe-area-inset-left)",
+  },
+  ".scroll-py-safe": {
+    scrollPaddingTop: "env(safe-area-inset-top)",
+    scrollPaddingBottom: "env(safe-area-inset-bottom)",
+  },
+  ".scroll-ps-safe": {
+    scrollPaddingInlineStart: "env(safe-area-inset-left)",
+  },
+  ".scroll-pe-safe": {
+    scrollPaddingInlineEnd: "env(safe-area-inset-left)",
+  },
+  ".scroll-pt-safe": {
+    scrollPaddingTop: "env(safe-area-inset-top)",
+  },
+  ".scroll-pr-safe": {
+    scrollPaddingRight: "env(safe-area-inset-right)",
+  },
+  ".scroll-pb-safe": {
+    scrollPaddingBottom: "env(safe-area-inset-bottom)",
+  },
+  ".scroll-pl-safe": {
+    scrollPaddingLeft: "env(safe-area-inset-left)",
+  },
+  ".inset-safe": {
+    top: "env(safe-area-inset-top)",
+    right: "env(safe-area-inset-right)",
+    bottom: "env(safe-area-inset-bottom)",
+    left: "env(safe-area-inset-left)",
+  },
+  ".inset-x-safe": {
+    right: "env(safe-area-inset-right)",
+    left: "env(safe-area-inset-left)",
+  },
+  ".inset-y-safe": {
+    top: "env(safe-area-inset-top)",
+    bottom: "env(safe-area-inset-bottom)",
+  },
+  ".start-safe": {
+    insetInlineStart: "env(safe-area-inset-left)",
+  },
+  ".end-safe": {
+    insetInlineEnd: "env(safe-area-inset-left)",
+  },
+  ".top-safe": {
+    top: "env(safe-area-inset-top)",
+  },
+  ".right-safe": {
+    right: "env(safe-area-inset-right)",
+  },
+  ".bottom-safe": {
+    bottom: "env(safe-area-inset-bottom)",
+  },
+  ".left-safe": {
+    left: "env(safe-area-inset-left)",
+  },
+  ".min-h-screen-safe": {
+    minHeight: [
+      "calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))",
+      "-webkit-fill-available",
+    ],
+  },
+  ".max-h-screen-safe": {
+    maxHeight: [
+      "calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))",
+      "-webkit-fill-available",
+    ],
+  },
+  ".h-screen-safe": {
+    height: [
+      "calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)))",
+      "-webkit-fill-available",
+    ],
+  },
+};
+
+export const safeArea = plugin(({ addUtilities, matchUtilities, theme }) => {
+  addUtilities(baseUtilities);
+
+  const offsetUtilities = generateVariantUtilities(
+    baseUtilities,
+    "offset",
+    (v, x) => `calc(${v} + ${x})`,
+  );
+  matchUtilities(offsetUtilities, {
+    values: theme("spacing"),
+    supportsNegativeValues: true,
+  });
+
+  const orUtilities = generateVariantUtilities(
+    baseUtilities,
+    "or",
+    (v, x) => `max(${v}, ${x})`,
+  );
+  matchUtilities(orUtilities, {
+    values: theme("spacing"),
+    supportsNegativeValues: true,
+  });
+});

package/src/tailwind/shadows.ts

@@ -0,0 +1,100 @@
+import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
+import { parseBoxShadowValue } from "tailwindcss/lib/util/parseBoxShadowValue";
+import toColorValue from "tailwindcss/lib/util/toColorValue";
+import transformThemeValue from "tailwindcss/lib/util/transformThemeValue";
+import plugin from "tailwindcss/plugin";
+
+export const shadows = plugin(({ matchUtilities, theme, ...rest }) => {
+  const { addDefaults } = rest as any;
+  const boxShadowEntries = Object.entries(theme("boxShadow") ?? {});
+
+  function getElevation(value: any) {
+    let elevationKey: any = boxShadowEntries.find(
+      (entry) => entry[1] === value,
+    )?.[0];
+
+    let elevation = theme("elevation")?.[elevationKey];
+
+    if (elevation === undefined) {
+      elevation = Number.parseFloat(value.split(" ")[2]);
+    }
+
+    if (elevation === undefined || Number.isNaN(elevation)) {
+      elevation = 0;
+    }
+
+    return elevation;
+  }
+
+  addDefaults("box-shadow", {
+    "--tw-ring-offset-shadow": "0 0 #0000",
+    "--tw-ring-shadow": "0 0 #0000",
+    "--tw-shadow": "0 0 #0000",
+    "--tw-shadow-colored": "0 0 #0000",
+  });
+
+  if (process.env.NATIVEWIND_OS === "android") {
+    matchUtilities(
+      {
+        elevation: (value) => {
+          return {
+            "-rn-elevation": value,
+          } as any;
+        },
+      },
+      { values: theme("elevation") },
+    );
+  }
+
+  matchUtilities(
+    {
+      shadow: (value) => {
+        const elevation = getElevation(value);
+
+        let transformValue = transformThemeValue("boxShadow");
+        value = transformValue(value);
+        let ast = parseBoxShadowValue(value);
+
+        const firstValid = ast.find((shadow: any) => shadow.valid);
+
+        if (!firstValid) {
+          return;
+        }
+
+        const { x, y, blur, color } = firstValid;
+
+        const shadow = {
+          "--tw-shadow-color": value === "none" ? "#0000" : color,
+          "-rn-shadow-color": "var(--tw-shadow-color)",
+          "@rn-move -rn-shadow-offset-width \\&shadow-offset\\.width": "true",
+          "-rn-shadow-offset-width": x,
+          "@rn-move -rn-shadow-offset-height \\&shadow-offset\\.height": "true",
+          "-rn-shadow-offset-height": y,
+          "-rn-shadow-radius": blur ?? 0,
+          "-rn-shadow-opacity": 1,
+        } as any;
+
+        if (process.env.NATIVEWIND_OS === "android") {
+          shadow["-rn-elevation"] = elevation;
+        }
+
+        return shadow;
+      },
+    },
+    { values: theme("boxShadow"), type: ["shadow"] },
+  );
+
+  matchUtilities(
+    {
+      shadow: (value) => {
+        return {
+          "--tw-shadow-color": toColorValue(value),
+        };
+      },
+    },
+    {
+      values: flattenColorPalette(theme("boxShadowColor")),
+      type: ["color", "any"],
+    },
+  );
+});

package/src/tailwind/switch.ts

@@ -0,0 +1,59 @@
+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 nativeSwitch = plugin(function ({ matchUtilities, theme }) {
+  matchUtilities(
+    {
+      thumb: (value) => {
+        return {
+          "&": {
+            "@rn-move caret-color thumbColor": "true",
+            "caret-color": toColorValue(value),
+          },
+        };
+      },
+    },
+    {
+      values: flattenColorPalette(theme("thumbColor")),
+      type: ["color", "any"],
+    },
+  );
+});
+
+export const webSwitch = plugin(function ({
+  matchUtilities,
+  theme,
+  corePlugins,
+}) {
+  matchUtilities(
+    {
+      thumb: (value) => {
+        if (!corePlugins("backgroundOpacity")) {
+          return {
+            "& > div:nth-child(2)": {
+              backgroundColor: toColorValue(value) + " !important",
+            },
+          };
+        }
+
+        const output = withAlphaVariable({
+          color: value,
+          property: "background-color",
+          variable: "--tw-bg-opacity",
+        });
+
+        output["background-color"] += " !important";
+
+        return {
+          "& > div:nth-child(2)": output,
+        };
+      },
+    },
+    {
+      values: flattenColorPalette(theme("thumbColor")),
+      type: ["color", "any"],
+    },
+  );
+});

package/src/tailwind/translate.ts

@@ -0,0 +1,51 @@
+import createUtilityPlugin from "tailwindcss/lib/util/createUtilityPlugin";
+
+let cssTransformValue = [
+  "translate(var(--tw-translate-x), var(--tw-translate-y))",
+  "rotate(var(--tw-rotate))",
+  "skewX(var(--tw-skew-x))",
+  "skewY(var(--tw-skew-y))",
+  "scaleX(var(--tw-scale-x))",
+  "scaleY(var(--tw-scale-y))",
+].join(" ");
+
+/**
+ * React Native doesn't support % values for translate styles.
+ * We need to change Tailwindcss to use the `react-native-css-interop` ch and cw units
+ */
+
+// This is identical to the core plugin, except it uses the theme value `translateX` instead of `translate`
+export const translateX = createUtilityPlugin(
+  "translateX",
+  [
+    [
+      [
+        "translate-x",
+        [
+          ["@defaults transform", {}],
+          "--tw-translate-x",
+          ["transform", cssTransformValue],
+        ],
+      ],
+    ],
+  ],
+  { supportsNegativeValues: true },
+);
+
+// This is identical to the core plugin, except it uses the theme value `translateY` instead of `translate`
+export const translateY = createUtilityPlugin(
+  "translateY",
+  [
+    [
+      [
+        "translate-y",
+        [
+          ["@defaults transform", {}],
+          "--tw-translate-y",
+          ["transform", cssTransformValue],
+        ],
+      ],
+    ],
+  ],
+  { supportsNegativeValues: true },
+);

package/src/tailwind/verify.ts

@@ -0,0 +1,16 @@
+import plugin from "tailwindcss/plugin";
+
+import { isWeb } from "./common";
+
+export const verify = plugin(function ({ addBase }) {
+  if (isWeb) {
+    addBase({
+      ":root": {
+        "--css-interop": "true",
+        "--css-interop-nativewind": "true",
+      },
+    });
+  } else {
+    addBase({ "@cssInterop set nativewind": "true" });
+  }
+});

package/src/tailwind/web.ts

@@ -0,0 +1,38 @@
+import { Config } from "tailwindcss";
+import plugin from "tailwindcss/plugin";
+
+import { color } from "./color";
+import { allowedColors } from "./common";
+import { darkModeAtRule } from "./dark-mode";
+import { webPropModifierPlugin } from "./prop-modifier";
+import { webSwitch } from "./switch";
+import { verify } from "./verify";
+
+const preset: Config = {
+  content: [],
+  theme: {
+    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",
+    },
+    extend: {
+      trackColor: allowedColors,
+      thumbColor: allowedColors,
+    },
+  },
+  plugins: [
+    plugin(({ addVariant }) => addVariant("web", "&")),
+    color,
+    darkModeAtRule,
+    verify,
+    webPropModifierPlugin,
+    webSwitch,
+  ],
+};
+
+export default preset;

package/src/tailwindcss-internals.d.ts

@@ -0,0 +1,7 @@
+declare module "tailwindcss/lib/cli/build";
+declare module "tailwindcss/lib/util/createUtilityPlugin";
+declare module "tailwindcss/lib/util/flattenColorPalette";
+declare module "tailwindcss/lib/util/toColorValue";
+declare module "tailwindcss/lib/util/withAlphaVariable";
+declare module "tailwindcss/lib/util/transformThemeValue";
+declare module "tailwindcss/lib/util/parseBoxShadowValue";