diff --git a/__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap b/__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap index ef0535b..175e190 100644 --- a/__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap +++ b/__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap @@ -1,5 +1,34 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Border - Divide Width divide-x 1`] = ` + + + A + + + B + + +`; + exports[`Border - Divide Width divide-x-0 1`] = ` ({ borderBottomWidth: n, @@ -57,7 +90,4 @@ tailwindRunner( createTests("border-r", scenarios, (n) => ({ borderRightWidth: n, })) - // ...createTests("border-bl", scenarios, (n) => ({ - // borderBottomWidth: n, - // })), ); diff --git a/__tests__/tailwindcss/divide-width.tsx b/__tests__/tailwindcss/divide-width.tsx index 5e463a4..40d9233 100644 --- a/__tests__/tailwindcss/divide-width.tsx +++ b/__tests__/tailwindcss/divide-width.tsx @@ -6,6 +6,32 @@ import { StyledComponent } from "../../src"; const cases: Array = [[0], [2], [4], [8]]; describe("Border - Divide Width", () => { + test("divide-x", () => { + const tree = render( + + + A + B + + + ).toJSON(); + + expect(tree).toMatchSnapshot(); + }); + + test("divide-y", () => { + const tree = render( + + + A + B + + + ).toJSON(); + + expect(tree).toMatchSnapshot(); + }); + test.each(cases)("divide-x-%s", (unit) => { const tree = render( diff --git a/__tests__/tailwindcss/runner/index.tsx b/__tests__/tailwindcss/runner/index.tsx index 6eea553..4e7de86 100644 --- a/__tests__/tailwindcss/runner/index.tsx +++ b/__tests__/tailwindcss/runner/index.tsx @@ -53,6 +53,8 @@ export function TestProvider({ css, ...props }: PropsWithChildren) { + globalThis.hairlineWidthValue = 1; + const { styles } = extractStyles({ theme: {}, plugins: [plugin, nativePlugin()], diff --git a/src/babel/transforms/append-variables.ts b/src/babel/transforms/append-variables.ts index d3d749b..34de305 100644 --- a/src/babel/transforms/append-variables.ts +++ b/src/babel/transforms/append-variables.ts @@ -60,6 +60,13 @@ function serialize(literal: unknown): Expression { case "number": return numericLiteral(literal); case "string": + if (literal === "hairlineWidth") { + return memberExpression( + identifier("StyleSheet"), + identifier("hairlineWidth") + ); + } + return stringLiteral(literal); case "boolean": return booleanLiteral(literal); diff --git a/src/postcss/plugin.ts b/src/postcss/plugin.ts index b5498c3..a8a4b82 100644 --- a/src/postcss/plugin.ts +++ b/src/postcss/plugin.ts @@ -89,9 +89,13 @@ export const plugin: PluginCreator = ({ writeFileSync( output, `// This file was generated by tailwindcss-react-native. Do not edit! +const { StyleSheet } = require("react-native") module.exports = { platform: '${platform}', - styles: ${JSON.stringify(serialised.styles)}, + styles: ${JSON.stringify(serialised.styles).replace( + new RegExp('"hairlineWidth"', "g"), + "StyleSheet.hairlineWidth" + )}, media: ${JSON.stringify(serialised.media)}, }` ); diff --git a/src/postcss/to-react-native/properties/only.ts b/src/postcss/to-react-native/properties/only.ts index c209677..0942e49 100644 --- a/src/postcss/to-react-native/properties/only.ts +++ b/src/postcss/to-react-native/properties/only.ts @@ -1,6 +1,11 @@ import { getStylesForProperty, Style } from "css-to-react-native"; import { ImageStyle, TextStyle, ViewStyle } from "react-native"; +declare global { + // eslint-disable-next-line no-var + var hairlineWidthValue: number | undefined; +} + export type PropertyGuard = ( value: string, name: string @@ -52,6 +57,15 @@ export function only< const isNaN = Number.isNaN(Number.parseInt(value)); if (number) { + if (value === "hairlineWidth") { + return JSON.parse( + JSON.stringify(getStylesForProperty(name, "1px")).replace( + new RegExp("1", "g"), + globalThis.hairlineWidthValue?.toString() ?? '"hairlineWidth"' + ) + ); + } + if (isNaN) { throw new Error(name); } diff --git a/src/tailwind/native/divide.ts b/src/tailwind/native/divide.ts index 97df8aa..65310f8 100644 --- a/src/tailwind/native/divide.ts +++ b/src/tailwind/native/divide.ts @@ -11,7 +11,6 @@ export const divide: CustomPluginFunction = ({ { "divide-x": (value: string) => { value = value === "0" ? "0px" : value; - return { "&": { "@selector (> *:not(:first-child))": { diff --git a/src/tailwind/native/index.ts b/src/tailwind/native/index.ts index 551fe03..d6f9888 100644 --- a/src/tailwind/native/index.ts +++ b/src/tailwind/native/index.ts @@ -70,6 +70,13 @@ export const nativePlugin = plugin.withOptions( wider: "0.5px", widest: "1px", }, + borderWidth: { + DEFAULT: "hairlineWidth", + 0: "0px", + 2: "2px", + 4: "4px", + 8: "8px", + }, spacing: { px: "1px", 0: "0px",