@mgcrea/react-native-tailwind 0.8.1 → 0.9.1

package/src/parser/sizing.ts

@@ -80,6 +80,7 @@ function parseArbitrarySize(value: string): number | string | null {
 
   // Unsupported units (rem, em, vh, vw, etc.) - warn and reject
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Unsupported arbitrary size unit: ${value}. Only px and % are supported.`,

package/src/parser/spacing.test.ts

@@ -60,6 +60,69 @@ describe("parseSpacing - margin", () => {
   });
 });
 
+describe("parseSpacing - negative margin", () => {
+  it("should parse negative margin all sides", () => {
+    expect(parseSpacing("-m-0")).toEqual({ margin: -0 }); // JavaScript -0 is distinct from +0
+    expect(parseSpacing("-m-4")).toEqual({ margin: -16 });
+    expect(parseSpacing("-m-8")).toEqual({ margin: -32 });
+    expect(parseSpacing("-m-96")).toEqual({ margin: -384 });
+  });
+
+  it("should parse negative margin with fractional values", () => {
+    expect(parseSpacing("-m-0.5")).toEqual({ margin: -2 });
+    expect(parseSpacing("-m-1.5")).toEqual({ margin: -6 });
+    expect(parseSpacing("-m-2.5")).toEqual({ margin: -10 });
+  });
+
+  it("should parse negative margin horizontal", () => {
+    expect(parseSpacing("-mx-4")).toEqual({ marginHorizontal: -16 });
+    expect(parseSpacing("-mx-8")).toEqual({ marginHorizontal: -32 });
+  });
+
+  it("should parse negative margin vertical", () => {
+    expect(parseSpacing("-my-4")).toEqual({ marginVertical: -16 });
+    expect(parseSpacing("-my-8")).toEqual({ marginVertical: -32 });
+  });
+
+  it("should parse negative margin directional", () => {
+    expect(parseSpacing("-mt-4")).toEqual({ marginTop: -16 });
+    expect(parseSpacing("-mr-4")).toEqual({ marginRight: -16 });
+    expect(parseSpacing("-mb-4")).toEqual({ marginBottom: -16 });
+    expect(parseSpacing("-ml-4")).toEqual({ marginLeft: -16 });
+  });
+
+  it("should parse negative margin with arbitrary values", () => {
+    expect(parseSpacing("-m-[16px]")).toEqual({ margin: -16 });
+    expect(parseSpacing("-m-[16]")).toEqual({ margin: -16 });
+    expect(parseSpacing("-m-[100px]")).toEqual({ margin: -100 });
+    expect(parseSpacing("-m-[100]")).toEqual({ margin: -100 });
+  });
+
+  it("should parse negative margin directional with arbitrary values", () => {
+    expect(parseSpacing("-mt-[24px]")).toEqual({ marginTop: -24 });
+    expect(parseSpacing("-mr-[32]")).toEqual({ marginRight: -32 });
+    expect(parseSpacing("-mb-[16px]")).toEqual({ marginBottom: -16 });
+    expect(parseSpacing("-ml-[48]")).toEqual({ marginLeft: -48 });
+  });
+
+  it("should parse negative margin horizontal/vertical with arbitrary values", () => {
+    expect(parseSpacing("-mx-[20px]")).toEqual({ marginHorizontal: -20 });
+    expect(parseSpacing("-my-[30]")).toEqual({ marginVertical: -30 });
+  });
+
+  it("should not parse negative padding (invalid)", () => {
+    expect(parseSpacing("-p-4")).toBeNull();
+    expect(parseSpacing("-px-4")).toBeNull();
+    expect(parseSpacing("-pt-4")).toBeNull();
+    expect(parseSpacing("-p-[16px]")).toBeNull();
+  });
+
+  it("should not parse negative gap (invalid)", () => {
+    expect(parseSpacing("-gap-4")).toBeNull();
+    expect(parseSpacing("-gap-[16px]")).toBeNull();
+  });
+});
+
 describe("parseSpacing - padding", () => {
   it("should parse padding all sides", () => {
     expect(parseSpacing("p-0")).toEqual({ padding: 0 });

package/src/parser/spacing.ts

@@ -55,6 +55,7 @@ function parseArbitrarySpacing(value: string): number | null {
 
   // Warn about unsupported formats
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Unsupported arbitrary spacing value: ${value}. Only px values are supported (e.g., [16px] or [16]).`,
@@ -68,24 +69,28 @@ function parseArbitrarySpacing(value: string): number | null {
 
 /**
  * Parse spacing classes (margin, padding, gap)
- * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4, m-[16px]
+ * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4, m-[16px], -m-4, -mt-[10px]
  */
 export function parseSpacing(cls: string): StyleObject | null {
-  // Margin: m-4, mx-2, mt-8, m-[16px], etc.
-  const marginMatch = cls.match(/^m([xytrbls]?)-(.+)$/);
+  // Margin: m-4, mx-2, mt-8, m-[16px], -m-4, -mt-2, etc.
+  // Supports negative values for margins (but not padding or gap)
+  const marginMatch = cls.match(/^(-?)m([xytrbls]?)-(.+)$/);
   if (marginMatch) {
-    const [, dir, valueStr] = marginMatch;
+    const [, negativePrefix, dir, valueStr] = marginMatch;
+    const isNegative = negativePrefix === "-";
 
     // Try arbitrary value first
     const arbitraryValue = parseArbitrarySpacing(valueStr);
     if (arbitraryValue !== null) {
-      return getMarginStyle(dir, arbitraryValue);
+      const finalValue = isNegative ? -arbitraryValue : arbitraryValue;
+      return getMarginStyle(dir, finalValue);
     }
 
     // Try preset scale
     const scaleValue = SPACING_SCALE[valueStr];
     if (scaleValue !== undefined) {
-      return getMarginStyle(dir, scaleValue);
+      const finalValue = isNegative ? -scaleValue : scaleValue;
+      return getMarginStyle(dir, finalValue);
     }
   }
 

package/src/parser/transforms.ts

@@ -70,6 +70,7 @@ function parseArbitraryScale(value: string): number | null {
 
   // Unsupported format
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Invalid arbitrary scale value: ${value}. Only numbers are supported (e.g., [1.5], [0.75]).`,
@@ -93,6 +94,7 @@ function parseArbitraryRotation(value: string): string | null {
 
   // Unsupported format
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Invalid arbitrary rotation value: ${value}. Only deg unit is supported (e.g., [45deg], [-15deg]).`,
@@ -123,6 +125,7 @@ function parseArbitraryTranslation(value: string): number | string | null {
 
   // Unsupported units
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Unsupported arbitrary translation unit: ${value}. Only px and % are supported.`,
@@ -146,6 +149,7 @@ function parseArbitraryPerspective(value: string): number | null {
 
   // Unsupported format
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Invalid arbitrary perspective value: ${value}. Only integers are supported (e.g., [1500]).`,
@@ -164,6 +168,7 @@ function parseArbitraryPerspective(value: string): number | null {
 export function parseTransform(cls: string): StyleObject | null {
   // Transform origin warning (not supported in React Native)
   if (cls.startsWith("origin-")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] transform-origin is not supported in React Native. Class "${cls}" will be ignored.`,

package/src/parser/typography.ts

@@ -125,6 +125,7 @@ function parseArbitraryFontSize(value: string): number | null {
 
   // Warn about unsupported formats
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Unsupported arbitrary font size value: ${value}. Only px values are supported (e.g., [18px] or [18]).`,
@@ -149,6 +150,7 @@ function parseArbitraryLineHeight(value: string): number | null {
 
   // Warn about unsupported formats
   if (value.startsWith("[") && value.endsWith("]")) {
+    /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
         `[react-native-tailwind] Unsupported arbitrary line height value: ${value}. Only px values are supported (e.g., [24px] or [24]).`,

package/src/runtime.test.ts

@@ -45,6 +45,33 @@ describe("runtime", () => {
       });
     });
 
+    it("should preserve zero values in template literals", () => {
+      // Issue #1 fix: 0 should be treated as valid value, not filtered out
+      const result = tw`opacity-${0} m-4`;
+      expect(result?.style).toEqual({
+        opacity: 0,
+        margin: 16,
+      });
+    });
+
+    it("should preserve empty string values in template literals", () => {
+      // Empty strings should be preserved (even though they don't contribute to className)
+      const result = tw`m-4 ${""}p-2`;
+      expect(result?.style).toEqual({
+        margin: 16,
+        padding: 8,
+      });
+    });
+
+    it("should handle mixed falsy and truthy numeric values", () => {
+      const spacing = 0;
+      const result = tw`m-${spacing} p-4`;
+      expect(result?.style).toEqual({
+        margin: 0,
+        padding: 16,
+      });
+    });
+
     it("should return empty style object for empty className", () => {
       const result = tw``;
       expect(result).toEqual({ style: {} });

package/src/runtime.ts

@@ -211,8 +211,9 @@ export function tw<T extends NativeStyle = NativeStyle>(
   const className = strings.reduce((acc, str, i) => {
     const value = values[i];
     // Handle falsy values (false, null, undefined) - don't add them
+    // Note: 0 and empty string are preserved as they may be valid values
     // eslint-disable-next-line @typescript-eslint/no-base-to-string
-    const valueStr = value ? String(value) : "";
+    const valueStr = value != null && value !== false ? String(value) : "";
     return acc + str + valueStr;
   }, "");
 

package/src/stubs/tw.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { tw, twStyle } from "./tw";
+
+describe("tw stub", () => {
+  it("should throw error when tw() is called without Babel transformation", () => {
+    expect(() => tw`bg-blue-500`).toThrow(
+      "tw() must be transformed by the Babel plugin. " +
+        "Ensure @mgcrea/react-native-tailwind/babel is configured in your babel.config.js. " +
+        "For runtime parsing, use: import { tw } from '@mgcrea/react-native-tailwind/runtime'",
+    );
+  });
+
+  it("should throw error when twStyle() is called without Babel transformation", () => {
+    expect(() => twStyle("bg-blue-500")).toThrow(
+      "twStyle() must be transformed by the Babel plugin. " +
+        "Ensure @mgcrea/react-native-tailwind/babel is configured in your babel.config.js. " +
+        "For runtime parsing, use: import { twStyle } from '@mgcrea/react-native-tailwind/runtime'",
+    );
+  });
+
+  it("should throw error with template literal interpolation", () => {
+    const dynamic = "active";
+    expect(() => tw`bg-blue-500 ${dynamic}:bg-blue-700`).toThrow(
+      "tw() must be transformed by the Babel plugin",
+    );
+  });
+});