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",