diff --git a/__tests__/custom-tailwindcss/elevation.ts b/__tests__/custom-tailwindcss/elevation.ts new file mode 100644 index 0000000..b045d84 --- /dev/null +++ b/__tests__/custom-tailwindcss/elevation.ts @@ -0,0 +1,16 @@ +import { ViewStyle } from "react-native"; +import { createTests, tailwindRunner } from "../tailwindcss/runner"; + +const scenarios: Record = { + sm: 1.5, + "": 3, + lg: 7.5, + xl: 12.5, + "2xl": 25, + none: 0, +}; + +tailwindRunner( + "Custom - Elevation", + createTests("elevation", scenarios, (n) => ({ elevation: n })) +); diff --git a/__tests__/tailwindcss/runner/tests.ts b/__tests__/tailwindcss/runner/tests.ts index cde2efd..517f99b 100644 --- a/__tests__/tailwindcss/runner/tests.ts +++ b/__tests__/tailwindcss/runner/tests.ts @@ -31,11 +31,10 @@ export function createTests( ); } - styles[normaliseSelector(`${prefix}-${suffix}`)] = valueFunction( - value, - suffix - ); + const key = suffix ? `${prefix}-${suffix}` : prefix; - return [`${prefix}-${suffix}`, { styles }]; + styles[normaliseSelector(key)] = valueFunction(value, suffix); + + return [key, { styles }]; }); } diff --git a/src/plugin/native/elevation.ts b/src/plugin/native/elevation.ts new file mode 100644 index 0000000..756aef1 --- /dev/null +++ b/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"), + } + ); +}; diff --git a/src/plugin/native/index.ts b/src/plugin/native/index.ts index d1fcc90..2dd9889 100644 --- a/src/plugin/native/index.ts +++ b/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( divide(helpers, notSupported); fontSize(helpers); lineHeight(helpers, notSupported); + elevation(helpers, notSupported); }; }, function ({ rem = 16 } = {}) { - const config: Partial = { + const config: Partial< + TailwindConfig & { theme: { elevation: TailwindThemeValue } } + > = { theme: { aspectRatio: { auto: "0", @@ -147,6 +154,14 @@ export const nativePlugin = plugin.withOptions( prose: "65ch", ...breakpoints(theme("screens")), }), + elevation: { + sm: "1.5", + DEFAULT: "3", + lg: "7.5", + xl: "12.5", + "2xl": "25", + none: "0", + }, }, corePlugins: { space: false,