@mgcrea/react-native-tailwind 0.9.0 → 0.10.0

package/src/babel/utils/styleTransforms.test.ts

@@ -347,3 +347,59 @@ describe("Style merging - edge cases", () => {
     expect(output).not.toContain("className");
   });
 });
+
+describe("Style function merging - mergeStyleFunctionAttribute", () => {
+  it("should merge modifier className with existing function style prop", () => {
+    const input = `
+      import { Pressable } from 'react-native';
+      export function Component() {
+        return (
+          <Pressable
+            className="bg-blue-500 active:bg-blue-700"
+            style={({ pressed }) => pressed && { opacity: 0.8 }}
+          />
+        );
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should create wrapper function that merges both style functions
+    expect(output).toContain("_state");
+    expect(output).toMatch(/_state\s*=>/);
+
+    // Should call both the new style function and existing style function
+    expect(output).toContain("_bg_blue_500");
+    expect(output).toContain("_active_bg_blue_700");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+
+  it("should merge modifier className with static existing style when using Pressable", () => {
+    const input = `
+      import { Pressable } from 'react-native';
+      export function Component() {
+        return (
+          <Pressable
+            className="p-4 active:bg-gray-100"
+            style={{ borderRadius: 8 }}
+          />
+        );
+      }
+    `;
+
+    const output = transform(input);
+
+    // Should create function that wraps className styles
+    expect(output).toContain("_state");
+
+    // Should include both the className styles and the static style
+    expect(output).toContain("_p_4");
+    expect(output).toContain("_active_bg_gray_100");
+    expect(output).toContain("borderRadius");
+
+    // Should not have className in output
+    expect(output).not.toContain("className");
+  });
+});

package/src/babel/utils/twProcessing.ts

@@ -5,6 +5,8 @@
 import type { NodePath } from "@babel/core";
 import type * as BabelTypes from "@babel/types";
 import type { ModifierType, ParsedModifier } from "../../parser/index.js";
+import { expandSchemeModifier, isSchemeModifier } from "../../parser/index.js";
+import type { SchemeModifierConfig } from "../../types/config.js";
 import type { StyleObject } from "../../types/core.js";
 
 /**
@@ -14,6 +16,7 @@ import type { StyleObject } from "../../types/core.js";
 export interface TwProcessingState {
   styleRegistry: Map<string, StyleObject>;
   customColors: Record<string, string>;
+  schemeModifierConfig: SchemeModifierConfig;
   stylesIdentifier: string;
 }
 
@@ -30,7 +33,25 @@ export function processTwCall(
   splitModifierClasses: (className: string) => { baseClasses: string[]; modifierClasses: ParsedModifier[] },
   t: typeof BabelTypes,
 ): void {
-  const { baseClasses, modifierClasses } = splitModifierClasses(className);
+  const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(className);
+
+  // Expand scheme: modifiers into dark: and light: modifiers
+  const modifierClasses: ParsedModifier[] = [];
+  for (const modifier of rawModifierClasses) {
+    if (isSchemeModifier(modifier.modifier)) {
+      // Expand scheme: into dark: and light:
+      const expanded = expandSchemeModifier(
+        modifier,
+        state.customColors,
+        state.schemeModifierConfig.darkSuffix ?? "-dark",
+        state.schemeModifierConfig.lightSuffix ?? "-light",
+      );
+      modifierClasses.push(...expanded);
+    } else {
+      // Keep other modifiers as-is
+      modifierClasses.push(modifier);
+    }
+  }
 
   // Build TwStyle object properties
   const objectProperties: BabelTypes.ObjectProperty[] = [];

package/src/parser/aspectRatio.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import { ASPECT_RATIO_PRESETS, parseAspectRatio } from "./aspectRatio";
+import { parseClassName } from "./index";
 
 describe("ASPECT_RATIO_PRESETS", () => {
   it("should export aspect ratio presets", () => {
@@ -29,8 +30,8 @@ describe("parseAspectRatio - preset values", () => {
   });
 
   it("should parse aspect-auto", () => {
-    // aspect-auto removes the aspect ratio constraint
-    expect(parseAspectRatio("aspect-auto")).toEqual({});
+    // aspect-auto removes the aspect ratio constraint by explicitly setting to undefined
+    expect(parseAspectRatio("aspect-auto")).toEqual({ aspectRatio: undefined });
   });
 });
 
@@ -131,6 +132,28 @@ describe("parseAspectRatio - type validation", () => {
   });
 });
 
+describe("parseAspectRatio - override behavior", () => {
+  it("should allow aspect-auto to override previously set aspect ratios", () => {
+    // This tests the fix for issue #3 - aspect-auto must explicitly set aspectRatio: undefined
+    // to override previous aspect ratio values when using Object.assign
+    const result = parseClassName("aspect-square aspect-auto");
+    expect(result).toEqual({ aspectRatio: undefined });
+  });
+
+  it("should allow aspect ratios to override aspect-auto", () => {
+    const result = parseClassName("aspect-auto aspect-square");
+    expect(result).toEqual({ aspectRatio: 1 });
+  });
+
+  it("should apply last aspect ratio in sequence", () => {
+    const result = parseClassName("aspect-square aspect-video aspect-auto");
+    expect(result).toEqual({ aspectRatio: undefined });
+
+    const result2 = parseClassName("aspect-auto aspect-square aspect-video");
+    expect(result2).toEqual({ aspectRatio: 16 / 9 });
+  });
+});
+
 describe("parseAspectRatio - comprehensive coverage", () => {
   it("should parse all preset variants without errors", () => {
     const presets = ["aspect-auto", "aspect-square", "aspect-video"];

package/src/parser/aspectRatio.ts

@@ -52,10 +52,10 @@ export function parseAspectRatio(cls: string): StyleObject | null {
   // Check for preset values
   if (cls in ASPECT_RATIO_PRESETS) {
     const aspectRatio = ASPECT_RATIO_PRESETS[cls];
-    // aspect-auto removes the aspect ratio constraint by returning empty object
-    // (this effectively unsets the aspectRatio property)
+    // aspect-auto removes the aspect ratio constraint by explicitly setting to undefined
+    // This ensures it overrides any previously set aspectRatio in Object.assign
     if (aspectRatio === undefined) {
-      return {};
+      return { aspectRatio: undefined };
     }
     return { aspectRatio };
   }

package/src/parser/index.ts

@@ -84,10 +84,21 @@ export { parseTypography } from "./typography";
 
 // Re-export modifier utilities
 export {
+  expandSchemeModifier,
   hasModifier,
+  isColorClass,
+  isColorSchemeModifier,
   isPlatformModifier,
+  isSchemeModifier,
   isStateModifier,
   parseModifier,
   splitModifierClasses,
 } from "./modifiers";
-export type { ModifierType, ParsedModifier, PlatformModifierType, StateModifierType } from "./modifiers";
+export type {
+  ColorSchemeModifierType,
+  ModifierType,
+  ParsedModifier,
+  PlatformModifierType,
+  SchemeModifierType,
+  StateModifierType,
+} from "./modifiers";

package/src/parser/modifiers.test.ts

@@ -1,6 +1,13 @@
 import { describe, expect, it } from "vitest";
 import type { ModifierType, ParsedModifier } from "./modifiers";
-import { hasModifier, parseModifier, splitModifierClasses } from "./modifiers";
+import {
+  expandSchemeModifier,
+  hasModifier,
+  isColorClass,
+  isSchemeModifier,
+  parseModifier,
+  splitModifierClasses,
+} from "./modifiers";
 
 describe("parseModifier - basic functionality", () => {
   it("should parse active modifier", () => {
@@ -373,3 +380,146 @@ describe("type safety", () => {
     }
   });
 });
+
+describe("isSchemeModifier", () => {
+  it("should return true for scheme modifier", () => {
+    expect(isSchemeModifier("scheme")).toBe(true);
+  });
+
+  it("should return false for non-scheme modifiers", () => {
+    expect(isSchemeModifier("dark")).toBe(false);
+    expect(isSchemeModifier("light")).toBe(false);
+    expect(isSchemeModifier("active")).toBe(false);
+    expect(isSchemeModifier("ios")).toBe(false);
+  });
+});
+
+describe("isColorClass", () => {
+  it("should return true for text color classes", () => {
+    expect(isColorClass("text-red-500")).toBe(true);
+    expect(isColorClass("text-systemGray")).toBe(true);
+    expect(isColorClass("text-blue-50")).toBe(true);
+  });
+
+  it("should return true for background color classes", () => {
+    expect(isColorClass("bg-red-500")).toBe(true);
+    expect(isColorClass("bg-systemGray")).toBe(true);
+    expect(isColorClass("bg-transparent")).toBe(true);
+  });
+
+  it("should return true for border color classes", () => {
+    expect(isColorClass("border-red-500")).toBe(true);
+    expect(isColorClass("border-systemGray")).toBe(true);
+    expect(isColorClass("border-black")).toBe(true);
+  });
+
+  it("should return false for non-color classes", () => {
+    expect(isColorClass("m-4")).toBe(false);
+    expect(isColorClass("p-2")).toBe(false);
+    expect(isColorClass("flex")).toBe(false);
+    expect(isColorClass("rounded-lg")).toBe(false);
+    expect(isColorClass("font-bold")).toBe(false);
+  });
+});
+
+describe("expandSchemeModifier", () => {
+  const customColors = {
+    "systemGray-dark": "#333333",
+    "systemGray-light": "#CCCCCC",
+    "primary-dark": "#1E40AF",
+    "primary-light": "#BFDBFE",
+    "accent-dark": "#DC2626",
+    "accent-light": "#FECACA",
+  };
+
+  it("should expand text color scheme modifier with default suffixes", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "text-systemGray" };
+    const result = expandSchemeModifier(modifier, customColors);
+
+    expect(result).toHaveLength(2);
+    expect((result as [ParsedModifier, ParsedModifier])[0]).toEqual({
+      modifier: "dark",
+      baseClass: "text-systemGray-dark",
+    });
+    expect((result as [ParsedModifier, ParsedModifier])[1]).toEqual({
+      modifier: "light",
+      baseClass: "text-systemGray-light",
+    });
+  });
+
+  it("should expand background color scheme modifier", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "bg-primary" };
+    const result = expandSchemeModifier(modifier, customColors);
+
+    expect(result).toHaveLength(2);
+    expect((result as [ParsedModifier, ParsedModifier])[0]).toEqual({
+      modifier: "dark",
+      baseClass: "bg-primary-dark",
+    });
+    expect((result as [ParsedModifier, ParsedModifier])[1]).toEqual({
+      modifier: "light",
+      baseClass: "bg-primary-light",
+    });
+  });
+
+  it("should expand border color scheme modifier", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "border-accent" };
+    const result = expandSchemeModifier(modifier, customColors);
+
+    expect(result).toHaveLength(2);
+    expect((result as [ParsedModifier, ParsedModifier])[0]).toEqual({
+      modifier: "dark",
+      baseClass: "border-accent-dark",
+    });
+    expect((result as [ParsedModifier, ParsedModifier])[1]).toEqual({
+      modifier: "light",
+      baseClass: "border-accent-light",
+    });
+  });
+
+  it("should use custom suffixes when provided", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "text-systemGray" };
+    const _result = expandSchemeModifier(modifier, customColors, "-darkMode", "-lightMode");
+
+    const expectedColors = {
+      "systemGray-darkMode": "#333333",
+      "systemGray-lightMode": "#CCCCCC",
+    };
+
+    expect(expandSchemeModifier(modifier, expectedColors, "-darkMode", "-lightMode")).toHaveLength(2);
+  });
+
+  it("should return empty array for non-color classes", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "m-4" };
+    const result = expandSchemeModifier(modifier, customColors);
+
+    expect(result).toEqual([]);
+  });
+
+  it("should return empty array when dark color variant is missing", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "text-missing" };
+    const incompleteColors = {
+      "missing-light": "#FFFFFF",
+    };
+    const result = expandSchemeModifier(modifier, incompleteColors);
+
+    expect(result).toEqual([]);
+  });
+
+  it("should return empty array when light color variant is missing", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "text-missing" };
+    const incompleteColors = {
+      "missing-dark": "#000000",
+    };
+    const result = expandSchemeModifier(modifier, incompleteColors);
+
+    expect(result).toEqual([]);
+  });
+
+  it("should return empty array when both color variants are missing", () => {
+    const modifier = { modifier: "scheme" as const, baseClass: "text-missing" };
+    const result = expandSchemeModifier(modifier, customColors);
+
+    expect(result).toEqual([]);
+  });
+});

package/src/parser/modifiers.ts

@@ -1,12 +1,19 @@
 /**
- * Modifier parsing utilities for state-based and platform-specific class names
+ * Modifier parsing utilities for state-based, platform-specific, and color scheme class names
  * - State modifiers: active:, hover:, focus:, disabled:, placeholder:
  * - Platform modifiers: ios:, android:, web:
+ * - Color scheme modifiers: dark:, light:
  */
 
 export type StateModifierType = "active" | "hover" | "focus" | "disabled" | "placeholder";
 export type PlatformModifierType = "ios" | "android" | "web";
-export type ModifierType = StateModifierType | PlatformModifierType;
+export type ColorSchemeModifierType = "dark" | "light";
+export type SchemeModifierType = "scheme";
+export type ModifierType =
+  | StateModifierType
+  | PlatformModifierType
+  | ColorSchemeModifierType
+  | SchemeModifierType;
 
 export type ParsedModifier = {
   modifier: ModifierType;
@@ -30,9 +37,24 @@ const STATE_MODIFIERS: readonly StateModifierType[] = [
 const PLATFORM_MODIFIERS: readonly PlatformModifierType[] = ["ios", "android", "web"] as const;
 
 /**
- * All supported modifiers (state + platform)
+ * Supported color scheme modifiers that map to Appearance.colorScheme values
  */
-const SUPPORTED_MODIFIERS: readonly ModifierType[] = [...STATE_MODIFIERS, ...PLATFORM_MODIFIERS] as const;
+const COLOR_SCHEME_MODIFIERS: readonly ColorSchemeModifierType[] = ["dark", "light"] as const;
+
+/**
+ * Scheme modifier that expands to both dark: and light: modifiers
+ */
+const SCHEME_MODIFIERS: readonly SchemeModifierType[] = ["scheme"] as const;
+
+/**
+ * All supported modifiers (state + platform + color scheme + scheme)
+ */
+const SUPPORTED_MODIFIERS: readonly ModifierType[] = [
+  ...STATE_MODIFIERS,
+  ...PLATFORM_MODIFIERS,
+  ...COLOR_SCHEME_MODIFIERS,
+  ...SCHEME_MODIFIERS,
+] as const;
 
 /**
  * Parse a class name to detect and extract modifiers
@@ -107,6 +129,119 @@ export function isPlatformModifier(modifier: ModifierType): modifier is Platform
   return PLATFORM_MODIFIERS.includes(modifier as PlatformModifierType);
 }
 
+/**
+ * Check if a modifier is a color scheme modifier (dark, light)
+ *
+ * @param modifier - Modifier type to check
+ * @returns true if modifier is a color scheme modifier
+ */
+export function isColorSchemeModifier(modifier: ModifierType): modifier is ColorSchemeModifierType {
+  return COLOR_SCHEME_MODIFIERS.includes(modifier as ColorSchemeModifierType);
+}
+
+/**
+ * Check if a modifier is a scheme modifier (scheme)
+ *
+ * @param modifier - Modifier type to check
+ * @returns true if modifier is a scheme modifier
+ */
+export function isSchemeModifier(modifier: ModifierType): modifier is SchemeModifierType {
+  return SCHEME_MODIFIERS.includes(modifier as SchemeModifierType);
+}
+
+/**
+ * Check if a class name is a color-based utility class
+ *
+ * @param className - Class name to check
+ * @returns true if class is color-based (text-*, bg-*, border-*)
+ */
+export function isColorClass(className: string): boolean {
+  return className.startsWith("text-") || className.startsWith("bg-") || className.startsWith("border-");
+}
+
+/**
+ * Expand scheme modifier into dark and light modifiers
+ *
+ * @param schemeModifier - Parsed scheme modifier
+ * @param customColors - Custom colors from config
+ * @param darkSuffix - Suffix for dark variant (default: "-dark")
+ * @param lightSuffix - Suffix for light variant (default: "-light")
+ * @returns Array of expanded modifiers (dark: and light:), or empty array if validation fails
+ *
+ * @example
+ * expandSchemeModifier(
+ *   { modifier: "scheme", baseClass: "text-systemGray" },
+ *   { "systemGray-dark": "#333", "systemGray-light": "#ccc" },
+ *   "-dark",
+ *   "-light"
+ * )
+ * // Returns: [
+ * //   { modifier: "dark", baseClass: "text-systemGray-dark" },
+ * //   { modifier: "light", baseClass: "text-systemGray-light" }
+ * // ]
+ */
+export function expandSchemeModifier(
+  schemeModifier: ParsedModifier,
+  customColors: Record<string, string>,
+  darkSuffix = "-dark",
+  lightSuffix = "-light",
+): ParsedModifier[] {
+  const { baseClass } = schemeModifier;
+
+  // Only process color-based classes
+  if (!isColorClass(baseClass)) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[react-native-tailwind] scheme: modifier only supports color classes (text-*, bg-*, border-*). ` +
+          `Found: "${baseClass}". This modifier will be ignored.`,
+      );
+    }
+    return [];
+  }
+
+  // Extract the color name from the class
+  // e.g., "text-systemGray" -> "systemGray"
+  const match = baseClass.match(/^(text|bg|border)-(.+)$/);
+  if (!match) {
+    return [];
+  }
+
+  const [, prefix, colorName] = match;
+
+  // Build variant class names
+  const darkColorName = `${colorName}${darkSuffix}`;
+  const lightColorName = `${colorName}${lightSuffix}`;
+
+  // Validate that both color variants exist
+  const darkColorExists = customColors[darkColorName] !== undefined;
+  const lightColorExists = customColors[lightColorName] !== undefined;
+
+  if (!darkColorExists || !lightColorExists) {
+    if (process.env.NODE_ENV !== "production") {
+      const missing = [];
+      if (!darkColorExists) missing.push(`${colorName}${darkSuffix}`);
+      if (!lightColorExists) missing.push(`${colorName}${lightSuffix}`);
+      console.warn(
+        `[react-native-tailwind] scheme:${baseClass} requires both color variants to exist. ` +
+          `Missing: ${missing.join(", ")}. This modifier will be ignored.`,
+      );
+    }
+    return [];
+  }
+
+  // Expand to dark: and light: modifiers
+  return [
+    {
+      modifier: "dark" as ColorSchemeModifierType,
+      baseClass: `${prefix}-${darkColorName}`,
+    },
+    {
+      modifier: "light" as ColorSchemeModifierType,
+      baseClass: `${prefix}-${lightColorName}`,
+    },
+  ];
+}
+
 /**
  * Split a space-separated className string into base and modifier classes
  *

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

@@ -69,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/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/types/config.ts

@@ -0,0 +1,7 @@
+/**
+ * Configuration for the scheme: modifier
+ */
+export type SchemeModifierConfig = {
+  darkSuffix?: string;
+  lightSuffix?: string;
+};