fix: update borderWidth default, add borderWidth 0.5

.changeset/pre.json

@@ -1,13 +0,0 @@
-{
-  "mode": "exit",
-  "tag": "next",
-  "initialVersions": {
-    "benchmarks": "0.0.0",
-    "demo-compiler": "1.0.0",
-    "website": "0.0.0",
-    "nativewind": "2.0.1"
-  },
-  "changesets": [
-    "selfish-flowers-push"
-  ]
-}

.changeset/selfish-flowers-push.md

@@ -1,5 +0,0 @@
----
-"nativewind": patch
----
-
-support loading tailwind.config.cjs

.changeset/tasty-eyes-invent.md

@@ -0,0 +1,5 @@
+---
+"nativewind": patch
+---
+
+Keep borderWidth default as 1px. Add borderWidth 0.5 as hairlineWidth()

packages/nativewind/__tests__/babel/children/code.tsx

@@ -2,7 +2,7 @@ import { Text, View } from "react-native";
 
 export function Test() {
   return (
-    <View className="divide-y">
+    <View className="divide-y-0.5">
       <Text className="font-bold">Hello world!</Text>
       <Text className="font-bold">Hello world!</Text>
     </View>

packages/nativewind/__tests__/babel/children/output.tsx

@@ -3,7 +3,7 @@ import { StyledComponent as _StyledComponent } from "nativewind";
 import { Text, View } from "react-native";
 export function Test() {
   return (
-    <_StyledComponent className="divide-y" component={View}>
+    <_StyledComponent className="divide-y-0.5" component={View}>
       <_StyledComponent className="font-bold" component={Text}>
         Hello world!
       </_StyledComponent>
@@ -19,15 +19,21 @@ _NativeWindStyleSheet.create({
     "font-bold": {
       fontWeight: "700",
     },
-    "divide-y.children@0": {
+    "divide-y-0.5.children@0": {
       borderBottomWidth: 0,
       borderTopWidth: _NativeWindStyleSheet.hairlineWidth(),
     },
+    "divide-y-0.children@0": {
+      borderBottomWidth: 0,
+      borderTopWidth: 0,
+    },
   },
   atRules: {
-    "divide-y.children": [[["selector", "(> *:not(:first-child))"]]],
+    "divide-y-0.5.children": [[["selector", "(> *:not(:first-child))"]]],
+    "divide-y-0.children": [[["selector", "(> *:not(:first-child))"]]],
   },
   childClasses: {
-    "divide-y": ["divide-y.children"],
+    "divide-y-0.5": ["divide-y-0.5.children"],
+    "divide-y-0": ["divide-y-0.children"],
   },
 });

packages/nativewind/__tests__/tailwindcss/__snapshots__/border-width.tsx.snap

@@ -5,10 +5,10 @@ exports[`Border - Border Width divide-x 1`] = `
   style={
     [
       {
-        "borderBottomWidth": 0.5,
-        "borderLeftWidth": 0.5,
-        "borderRightWidth": 0.5,
-        "borderTopWidth": 0.5,
+        "borderBottomWidth": 1,
+        "borderLeftWidth": 1,
+        "borderRightWidth": 1,
+        "borderTopWidth": 1,
       },
     ]
   }

packages/nativewind/__tests__/tailwindcss/__snapshots__/divide-width.tsx.snap

@@ -9,7 +9,7 @@ exports[`Border - Divide Width divide-x 1`] = `
     style={
       [
         {
-          "borderLeftWidth": 0.5,
+          "borderLeftWidth": 1,
           "borderRightWidth": 0,
         },
       ]
@@ -40,6 +40,26 @@ exports[`Border - Divide Width divide-x-0 1`] = `
 </View>
 `;
 
+exports[`Border - Divide Width divide-x-0.5 1`] = `
+<View>
+  <Text>
+    A
+  </Text>
+  <Text
+    style={
+      [
+        {
+          "borderLeftWidth": 0.5,
+          "borderRightWidth": 0,
+        },
+      ]
+    }
+  >
+    B
+  </Text>
+</View>
+`;
+
 exports[`Border - Divide Width divide-x-2 1`] = `
 <View>
   <Text>
@@ -110,7 +130,7 @@ exports[`Border - Divide Width divide-y 1`] = `
       [
         {
           "borderBottomWidth": 0,
-          "borderTopWidth": 0.5,
+          "borderTopWidth": 1,
         },
       ]
     }
@@ -140,6 +160,26 @@ exports[`Border - Divide Width divide-y-0 1`] = `
 </View>
 `;
 
+exports[`Border - Divide Width divide-y-0.5 1`] = `
+<View>
+  <Text>
+    A
+  </Text>
+  <Text
+    style={
+      [
+        {
+          "borderBottomWidth": 0,
+          "borderTopWidth": 0.5,
+        },
+      ]
+    }
+  >
+    B
+  </Text>
+</View>
+`;
+
 exports[`Border - Divide Width divide-y-2 1`] = `
 <View>
   <Text>

packages/nativewind/__tests__/tailwindcss/border-width.tsx

@@ -1,4 +1,3 @@
-import { Style } from "css-to-react-native";
 import { render } from "@testing-library/react-native";
 import { Text, View, ViewStyle } from "react-native";
 import { createTests, tailwindRunner } from "./runner";
@@ -7,6 +6,9 @@ import { StyledComponent } from "../../src";
 
 const scenarios: Record<string, ViewStyle["borderWidth"]> = {
   0: 0,
+  "": 1,
+  "0.5":
+    '__{"name":"hairlineWidth","args":[]}' as unknown as ViewStyle["borderWidth"],
   2: 2,
   4: 4,
   8: 8,
@@ -28,83 +30,6 @@ describe("Border - Border Width", () => {
 
 tailwindRunner(
   "Border - Border Width",
-  [
-    [
-      "border",
-      {
-        styles: {
-          border: {
-            borderBottomWidth: '__{"name":"hairlineWidth","args":[]}',
-            borderTopWidth: '__{"name":"hairlineWidth","args":[]}',
-            borderLeftWidth: '__{"name":"hairlineWidth","args":[]}',
-            borderRightWidth: '__{"name":"hairlineWidth","args":[]}',
-          } as Style,
-        },
-      },
-    ],
-    [
-      "border-x",
-      {
-        styles: {
-          "border-x": {
-            borderLeftWidth: '__{"name":"hairlineWidth","args":[]}',
-            borderRightWidth: '__{"name":"hairlineWidth","args":[]}',
-          } as Style,
-        },
-      },
-    ],
-    [
-      "border-y",
-      {
-        styles: {
-          "border-y": {
-            borderTopWidth: '__{"name":"hairlineWidth","args":[]}',
-            borderBottomWidth: '__{"name":"hairlineWidth","args":[]}',
-          } as Style,
-        },
-      },
-    ],
-    [
-      "border-t",
-      {
-        styles: {
-          "border-t": {
-            borderTopWidth: '__{"name":"hairlineWidth","args":[]}',
-          } as Style,
-        },
-      },
-    ],
-    [
-      "border-b",
-      {
-        styles: {
-          "border-b": {
-            borderBottomWidth: '__{"name":"hairlineWidth","args":[]}',
-          } as Style,
-        },
-      },
-    ],
-    [
-      "border-l",
-      {
-        styles: {
-          "border-l": {
-            borderLeftWidth: '__{"name":"hairlineWidth","args":[]}',
-          } as Style,
-        },
-      },
-    ],
-    [
-      "border-r",
-      {
-        styles: {
-          "border-r": {
-            borderRightWidth: '__{"name":"hairlineWidth","args":[]}',
-          } as Style,
-        },
-      },
-    ],
-  ],
   createTests("border", scenarios, (n) => ({
     borderBottomWidth: n,
     borderRightWidth: n,

packages/nativewind/__tests__/tailwindcss/divide-width.tsx

@@ -3,7 +3,7 @@ import { render } from "@testing-library/react-native";
 import { TestProvider } from "./runner";
 import { StyledComponent } from "../../src";
 
-const cases: Array<ViewStyle["borderWidth"][]> = [[0], [2], [4], [8]];
+const cases: Array<ViewStyle["borderWidth"][]> = [[0], [0.5], [2], [4], [8]];
 
 describe("Border - Divide Width", () => {
   test("divide-x", () => {

packages/nativewind/src/tailwind/native/index.ts

@@ -100,8 +100,9 @@ export const nativePlugin = plugin.withOptions<NativePluginOptions>(
           widest: "1px",
         },
         borderWidth: {
-          DEFAULT: hairlineWidth(),
+          DEFAULT: "1px",
           0: "0px",
+          0.5: hairlineWidth(),
           2: "2px",
           4: "4px",
           8: "8px",