feat: elevation

__tests__/custom-tailwindcss/elevation.ts

@@ -0,0 +1,16 @@
+import { ViewStyle } from "react-native";
+import { createTests, tailwindRunner } from "../tailwindcss/runner";
+
+const scenarios: Record<string, ViewStyle["elevation"]> = {
+  sm: 1.5,
+  "": 3,
+  lg: 7.5,
+  xl: 12.5,
+  "2xl": 25,
+  none: 0,
+};
+
+tailwindRunner(
+  "Custom - Elevation",
+  createTests("elevation", scenarios, (n) => ({ elevation: n }))
+);

__tests__/tailwindcss/runner/tests.ts

@@ -31,11 +31,10 @@ export function createTests<T extends string | number | undefined>(
       );
     }
 
-    styles[normaliseSelector(`${prefix}-${suffix}`)] = valueFunction(
+    const key = suffix ? `${prefix}-${suffix}` : prefix;
-      value,
-      suffix
-    );
 
-    return [`${prefix}-${suffix}`, { styles }];
+    styles[normaliseSelector(key)] = valueFunction(value, suffix);
+
+    return [key, { styles }];
   });
 }

src/plugin/native/elevation.ts

@@ -0,0 +1,16 @@
+import { CustomPluginFunction } from "./types";
+
+export const elevation: CustomPluginFunction = ({ matchUtilities, theme }) => {
+  matchUtilities(
+    {
+      elevation(value: string) {
+        return {
+          elevation: value,
+        };
+      },
+    },
+    {
+      values: theme("elevation"),
+    }
+  );
+};

src/plugin/native/index.ts

@@ -1,7 +1,11 @@
 import plugin from "tailwindcss/plugin";
-import { TailwindConfig } from "tailwindcss/tailwind-config";
+import {
+  TailwindConfig,
+  TailwindThemeValue,
+} from "tailwindcss/tailwind-config";
 import { StyleError } from "../../types/common";
 import { divide } from "./divide";
+import { elevation } from "./elevation";
 import { fontSize } from "./font-size";
 import { lineHeight } from "./line-height";
 import { space } from "./space";
@@ -29,10 +33,13 @@ export const nativePlugin = plugin.withOptions<NativePluginOptions | undefined>(
       divide(helpers, notSupported);
       fontSize(helpers);
       lineHeight(helpers, notSupported);
+      elevation(helpers, notSupported);
     };
   },
   function ({ rem = 16 } = {}) {
-    const config: Partial<TailwindConfig> = {
+    const config: Partial<
+      TailwindConfig & { theme: { elevation: TailwindThemeValue } }
+    > = {
       theme: {
         aspectRatio: {
           auto: "0",
@@ -147,6 +154,14 @@ export const nativePlugin = plugin.withOptions<NativePluginOptions | undefined>(
           prose: "65ch",
           ...breakpoints(theme("screens")),
         }),
+        elevation: {
+          sm: "1.5",
+          DEFAULT: "3",
+          lg: "7.5",
+          xl: "12.5",
+          "2xl": "25",
+          none: "0",
+        },
       },
       corePlugins: {
         space: false,