@mgcrea/react-native-tailwind 0.11.1 → 0.12.1

package/src/babel/plugin.ts

@@ -276,6 +276,10 @@ export default function reactNativeTailwindBabelPlugin(
           state.twImportNames = new Set();
           state.hasTwImport = false;
           state.functionComponentsNeedingColorScheme = new Set();
+          state.hasColorSchemeImport = false;
+          state.colorSchemeLocalIdentifier = undefined;
+          state.needsPlatformImport = false;
+          state.hasPlatformImport = false;
 
           // Load custom theme from tailwind.config.*
           state.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
@@ -367,7 +371,8 @@ export default function reactNativeTailwindBabelPlugin(
 
         // Track color scheme hook import from the configured source
         // (default: react-native, but can be custom like @/hooks/useColorScheme)
-        if (node.source.value === state.colorSchemeImportSource) {
+        // Only track value imports (not type-only imports which get erased)
+        if (node.source.value === state.colorSchemeImportSource && node.importKind !== "type") {
           const specifiers = node.specifiers;
 
           for (const spec of specifiers) {
@@ -393,7 +398,7 @@ export default function reactNativeTailwindBabelPlugin(
                 // Track the local name (could be renamed: import { tw as customTw })
                 const localName = spec.local.name;
                 state.twImportNames.add(localName);
-                state.hasTwImport = true;
+                // Don't set hasTwImport yet - only set it when we successfully transform a call
               }
             }
           });
@@ -438,13 +443,27 @@ export default function reactNativeTailwindBabelPlugin(
           path.replaceWith(
             t.objectExpression([t.objectProperty(t.identifier("style"), t.objectExpression([]))]),
           );
+          // Mark as successfully transformed (even if empty)
+          state.hasTwImport = true;
           return;
         }
 
         state.hasClassNames = true;
 
         // Process the className with modifiers
-        processTwCall(className, path, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t,
+        );
+
+        // Mark as successfully transformed
+        state.hasTwImport = true;
       },
 
       // Handle twStyle('...') call expressions
@@ -488,13 +507,27 @@ export default function reactNativeTailwindBabelPlugin(
         if (!className) {
           // Replace with undefined
           path.replaceWith(t.identifier("undefined"));
+          // Mark as successfully transformed (even if empty)
+          state.hasTwImport = true;
           return;
         }
 
         state.hasClassNames = true;
 
         // Process the className with modifiers
-        processTwCall(className, path, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t,
+        );
+
+        // Mark as successfully transformed
+        state.hasTwImport = true;
       },
 
       JSXAttribute(path, state) {
@@ -517,20 +550,22 @@ export default function reactNativeTailwindBabelPlugin(
         // Determine target style prop based on attribute name
         const targetStyleProp = getTargetStyleProp(attributeName);
 
-        // Handle static string literals
-        if (t.isStringLiteral(value)) {
-          const className = value.value.trim();
+        /**
+         * Process static className string (handles both direct StringLiteral and StringLiteral in JSXExpressionContainer)
+         */
+        const processStaticClassName = (className: string): boolean => {
+          const trimmedClassName = className.trim();
 
           // Skip empty classNames
-          if (!className) {
+          if (!trimmedClassName) {
             path.remove();
-            return;
+            return true;
           }
 
           state.hasClassNames = true;
 
           // Check if className contains modifiers (active:, hover:, focus:, placeholder:, ios:, android:, web:, dark:, light:, scheme:)
-          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(className);
+          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(trimmedClassName);
 
           // Expand scheme: modifiers into dark: and light: modifiers
           const modifierClasses: ParsedModifier[] = [];
@@ -697,7 +732,7 @@ export default function reactNativeTailwindBabelPlugin(
               } else {
                 replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
               }
-              return;
+              return true;
             } else {
               // Component doesn't support state modifiers, but we can still use platform modifiers
               // Fall through to platform-only handling
@@ -771,7 +806,7 @@ export default function reactNativeTailwindBabelPlugin(
               path.node.name = t.jsxIdentifier(targetStyleProp);
               path.node.value = t.jsxExpressionContainer(styleExpression);
             }
-            return;
+            return true;
           }
 
           // If there are state modifiers (and no platform modifiers), check if this component supports them
@@ -829,12 +864,12 @@ export default function reactNativeTailwindBabelPlugin(
                   } else {
                     replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
                   }
-                  return;
+                  return true;
                 }
               } else {
                 // All modifiers are supported - process normally
                 const styleExpression = processStaticClassNameWithModifiers(
-                  className,
+                  trimmedClassName,
                   state,
                   parseClassName,
                   generateStyleKey,
@@ -851,7 +886,7 @@ export default function reactNativeTailwindBabelPlugin(
                 } else {
                   replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
                 }
-                return;
+                return true;
               }
             } else {
               // Component doesn't support any modifiers
@@ -871,7 +906,7 @@ export default function reactNativeTailwindBabelPlugin(
           if (!classNameForStyle) {
             // No base classes, only had placeholder modifiers - just remove className
             path.remove();
-            return;
+            return true;
           }
 
           const styleObject = parseClassName(classNameForStyle, state.customTheme);
@@ -888,7 +923,14 @@ export default function reactNativeTailwindBabelPlugin(
             // Replace className with style prop
             replaceWithStyleAttribute(path, styleKey, targetStyleProp, state.stylesIdentifier, t);
           }
-          return;
+          return true;
+        };
+
+        // Handle static string literals
+        if (t.isStringLiteral(value)) {
+          if (processStaticClassName(value.value)) {
+            return;
+          }
         }
 
         // Handle dynamic expressions (JSXExpressionContainer)
@@ -900,6 +942,13 @@ export default function reactNativeTailwindBabelPlugin(
             return;
           }
 
+          // Fast path: Support string literals wrapped in JSXExpressionContainer: className={"flex-row"}
+          if (t.isStringLiteral(expression)) {
+            if (processStaticClassName(expression.value)) {
+              return;
+            }
+          }
+
           try {
             // Find component scope for color scheme modifiers
             const componentScope = findComponentScope(path, t);

package/src/babel/utils/styleInjection.ts

@@ -10,24 +10,44 @@ import type { StyleObject } from "../../types/core.js";
  * Add StyleSheet import to the file or merge with existing react-native import
  */
 export function addStyleSheetImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
-  // Check if there's already a react-native import
+  // Check if there's already a value import from react-native
   const body = path.node.body;
-  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+  let existingValueImport: BabelTypes.ImportDeclaration | null = null;
 
   for (const statement of body) {
     if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
-      reactNativeImport = statement;
-      break;
+      // Skip type-only imports (they get erased at runtime)
+      if (statement.importKind === "type") {
+        continue;
+      }
+      // Skip namespace imports (import * as RN) - can't add named specifiers to them
+      const hasNamespaceImport = statement.specifiers.some((spec) => t.isImportNamespaceSpecifier(spec));
+      if (hasNamespaceImport) {
+        continue;
+      }
+      existingValueImport = statement;
+      break; // Found a value import, we can stop
     }
   }
 
-  if (reactNativeImport) {
-    // Add StyleSheet to existing react-native import
-    reactNativeImport.specifiers.push(
-      t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")),
+  if (existingValueImport) {
+    // Check if StyleSheet is already imported
+    const hasStyleSheet = existingValueImport.specifiers.some(
+      (spec) =>
+        t.isImportSpecifier(spec) &&
+        spec.imported.type === "Identifier" &&
+        spec.imported.name === "StyleSheet",
     );
+
+    if (!hasStyleSheet) {
+      // Add StyleSheet to existing value import
+      existingValueImport.specifiers.push(
+        t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet")),
+      );
+    }
   } else {
-    // Create new react-native import with StyleSheet
+    // No value import exists - create a new one
+    // (Don't merge with type-only or namespace imports)
     const importDeclaration = t.importDeclaration(
       [t.importSpecifier(t.identifier("StyleSheet"), t.identifier("StyleSheet"))],
       t.stringLiteral("react-native"),
@@ -40,22 +60,42 @@ export function addStyleSheetImport(path: NodePath<BabelTypes.Program>, t: typeo
  * Add Platform import to the file or merge with existing react-native import
  */
 export function addPlatformImport(path: NodePath<BabelTypes.Program>, t: typeof BabelTypes): void {
-  // Check if there's already a react-native import
+  // Check if there's already a value import from react-native
   const body = path.node.body;
-  let reactNativeImport: BabelTypes.ImportDeclaration | null = null;
+  let existingValueImport: BabelTypes.ImportDeclaration | null = null;
 
   for (const statement of body) {
     if (t.isImportDeclaration(statement) && statement.source.value === "react-native") {
-      reactNativeImport = statement;
-      break;
+      // Skip type-only imports (they get erased at runtime)
+      if (statement.importKind === "type") {
+        continue;
+      }
+      // Skip namespace imports (import * as RN) - can't add named specifiers to them
+      const hasNamespaceImport = statement.specifiers.some((spec) => t.isImportNamespaceSpecifier(spec));
+      if (hasNamespaceImport) {
+        continue;
+      }
+      existingValueImport = statement;
+      break; // Found a value import, we can stop
     }
   }
 
-  if (reactNativeImport) {
-    // Add Platform to existing react-native import
-    reactNativeImport.specifiers.push(t.importSpecifier(t.identifier("Platform"), t.identifier("Platform")));
+  if (existingValueImport) {
+    // Check if Platform is already imported
+    const hasPlatform = existingValueImport.specifiers.some(
+      (spec) =>
+        t.isImportSpecifier(spec) && spec.imported.type === "Identifier" && spec.imported.name === "Platform",
+    );
+
+    if (!hasPlatform) {
+      // Add Platform to existing value import
+      existingValueImport.specifiers.push(
+        t.importSpecifier(t.identifier("Platform"), t.identifier("Platform")),
+      );
+    }
   } else {
-    // Create new react-native import with Platform
+    // No value import exists - create a new one
+    // (Don't merge with type-only or namespace imports)
     const importDeclaration = t.importDeclaration(
       [t.importSpecifier(t.identifier("Platform"), t.identifier("Platform"))],
       t.stringLiteral("react-native"),

package/src/babel/utils/twProcessing.ts

@@ -5,9 +5,16 @@
 import type { NodePath } from "@babel/core";
 import type * as BabelTypes from "@babel/types";
 import type { CustomTheme, ModifierType, ParsedModifier } from "../../parser/index.js";
-import { expandSchemeModifier, isSchemeModifier } from "../../parser/index.js";
+import {
+  expandSchemeModifier,
+  isColorSchemeModifier,
+  isPlatformModifier,
+  isSchemeModifier,
+} from "../../parser/index.js";
 import type { SchemeModifierConfig } from "../../types/config.js";
 import type { StyleObject } from "../../types/core.js";
+import { processColorSchemeModifiers } from "./colorSchemeModifierProcessing.js";
+import { processPlatformModifiers } from "./platformModifierProcessing.js";
 
 /**
  * Plugin state interface (subset needed for tw processing)
@@ -18,11 +25,20 @@ export interface TwProcessingState {
   customTheme: CustomTheme;
   schemeModifierConfig: SchemeModifierConfig;
   stylesIdentifier: string;
+  // Color scheme support (for dark:/light: modifiers)
+  needsColorSchemeImport: boolean;
+  colorSchemeVariableName: string;
+  functionComponentsNeedingColorScheme: Set<NodePath<BabelTypes.Function>>;
+  colorSchemeLocalIdentifier?: string;
+  // Platform support (for ios:/android:/web: modifiers)
+  needsPlatformImport: boolean;
 }
 
 /**
  * Process tw`...` or twStyle('...') call and replace with TwStyle object
  * Generates: { style: styles._base, activeStyle: styles._active, ... }
+ * When color-scheme modifiers are present, generates: { style: [base, _twColorScheme === 'dark' && dark, ...] }
+ * When platform modifiers are present, generates: { style: [base, Platform.select({ ios: ..., android: ... })] }
  */
 export function processTwCall(
   className: string,
@@ -31,6 +47,7 @@ export function processTwCall(
   parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: (className: string) => { baseClasses: string[]; modifierClasses: ParsedModifier[] },
+  findComponentScope: (path: NodePath, t: typeof BabelTypes) => NodePath<BabelTypes.Function> | null,
   t: typeof BabelTypes,
 ): void {
   const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(className);
@@ -74,9 +91,200 @@ export function processTwCall(
     objectProperties.push(t.objectProperty(t.identifier("style"), t.objectExpression([])));
   }
 
-  // Group modifiers by type
+  // Separate color-scheme and platform modifiers from other modifiers
+  const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
+  const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
+  const otherModifiers = modifierClasses.filter(
+    (m) => !isColorSchemeModifier(m.modifier) && !isPlatformModifier(m.modifier),
+  );
+
+  // Check if we need color scheme support
+  const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
+  let componentScope: NodePath<BabelTypes.Function> | null = null;
+
+  if (hasColorSchemeModifiers) {
+    // Find component scope for hook injection
+    componentScope = findComponentScope(path, t);
+
+    if (!componentScope) {
+      // Warning: color scheme modifiers used outside component scope
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `[react-native-tailwind] Color scheme modifiers (dark:, light:) in tw/twStyle calls ` +
+            `must be used inside a React component. Modifiers will be ignored.`,
+        );
+      }
+    } else {
+      // Track this component as needing the color scheme hook
+      state.functionComponentsNeedingColorScheme.add(componentScope);
+    }
+  }
+
+  // Process color scheme modifiers if we have a valid component scope
+  if (hasColorSchemeModifiers && componentScope) {
+    // Generate conditional expressions for color scheme
+    const colorSchemeConditionals = processColorSchemeModifiers(
+      colorSchemeModifiers,
+      state,
+      parseClassName,
+      generateStyleKey,
+      t,
+    );
+
+    // Build style array: [baseStyle, _twColorScheme === 'dark' && darkStyle, ...]
+    const styleArrayElements: BabelTypes.Expression[] = [];
+
+    // Add base style if present
+    if (baseClasses.length > 0) {
+      const baseClassName = baseClasses.join(" ");
+      const baseStyleObject = parseClassName(baseClassName, state.customTheme);
+      const baseStyleKey = generateStyleKey(baseClassName);
+      state.styleRegistry.set(baseStyleKey, baseStyleObject);
+      styleArrayElements.push(
+        t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)),
+      );
+    }
+
+    // Add color scheme conditionals
+    styleArrayElements.push(...colorSchemeConditionals);
+
+    // Replace style property with array
+    objectProperties[0] = t.objectProperty(t.identifier("style"), t.arrayExpression(styleArrayElements));
+
+    // Also add darkStyle/lightStyle properties for manual processing
+    // (e.g., extracting raw hex values for Reanimated animations)
+    const darkModifiers = colorSchemeModifiers.filter((m) => m.modifier === "dark");
+    const lightModifiers = colorSchemeModifiers.filter((m) => m.modifier === "light");
+
+    if (darkModifiers.length > 0) {
+      const darkClassNames = darkModifiers.map((m) => m.baseClass).join(" ");
+      const darkStyleObject = parseClassName(darkClassNames, state.customTheme);
+      const darkStyleKey = generateStyleKey(`dark_${darkClassNames}`);
+      state.styleRegistry.set(darkStyleKey, darkStyleObject);
+
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("darkStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(darkStyleKey)),
+        ),
+      );
+    }
+
+    if (lightModifiers.length > 0) {
+      const lightClassNames = lightModifiers.map((m) => m.baseClass).join(" ");
+      const lightStyleObject = parseClassName(lightClassNames, state.customTheme);
+      const lightStyleKey = generateStyleKey(`light_${lightClassNames}`);
+      state.styleRegistry.set(lightStyleKey, lightStyleObject);
+
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("lightStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(lightStyleKey)),
+        ),
+      );
+    }
+  }
+
+  // Process platform modifiers if present
+  const hasPlatformModifiers = platformModifiers.length > 0;
+
+  if (hasPlatformModifiers) {
+    // Mark that we need Platform import
+    state.needsPlatformImport = true;
+
+    // Generate Platform.select() expression
+    const platformSelectExpression = processPlatformModifiers(
+      platformModifiers,
+      state,
+      parseClassName,
+      generateStyleKey,
+      t,
+    );
+
+    // If we already have a style array (from color scheme modifiers), add to it
+    // Otherwise, convert style property to an array
+    if (hasColorSchemeModifiers && componentScope) {
+      // Already have style array from color scheme processing
+      // Get the current array expression and add Platform.select to it
+      const styleProperty = objectProperties.find(
+        (prop) => t.isIdentifier(prop.key) && prop.key.name === "style",
+      );
+      if (styleProperty && t.isArrayExpression(styleProperty.value)) {
+        styleProperty.value.elements.push(platformSelectExpression);
+      }
+    } else {
+      // No color scheme modifiers, create style array with base + Platform.select
+      const styleArrayElements: BabelTypes.Expression[] = [];
+
+      // Add base style if present
+      if (baseClasses.length > 0) {
+        const baseClassName = baseClasses.join(" ");
+        const baseStyleObject = parseClassName(baseClassName, state.customTheme);
+        const baseStyleKey = generateStyleKey(baseClassName);
+        state.styleRegistry.set(baseStyleKey, baseStyleObject);
+        styleArrayElements.push(
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)),
+        );
+      }
+
+      // Add Platform.select() expression
+      styleArrayElements.push(platformSelectExpression);
+
+      // Replace style property with array
+      objectProperties[0] = t.objectProperty(t.identifier("style"), t.arrayExpression(styleArrayElements));
+    }
+
+    // Also add iosStyle/androidStyle/webStyle properties for manual processing
+    const iosModifiers = platformModifiers.filter((m) => m.modifier === "ios");
+    const androidModifiers = platformModifiers.filter((m) => m.modifier === "android");
+    const webModifiers = platformModifiers.filter((m) => m.modifier === "web");
+
+    if (iosModifiers.length > 0) {
+      const iosClassNames = iosModifiers.map((m) => m.baseClass).join(" ");
+      const iosStyleObject = parseClassName(iosClassNames, state.customTheme);
+      const iosStyleKey = generateStyleKey(`ios_${iosClassNames}`);
+      state.styleRegistry.set(iosStyleKey, iosStyleObject);
+
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("iosStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(iosStyleKey)),
+        ),
+      );
+    }
+
+    if (androidModifiers.length > 0) {
+      const androidClassNames = androidModifiers.map((m) => m.baseClass).join(" ");
+      const androidStyleObject = parseClassName(androidClassNames, state.customTheme);
+      const androidStyleKey = generateStyleKey(`android_${androidClassNames}`);
+      state.styleRegistry.set(androidStyleKey, androidStyleObject);
+
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("androidStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(androidStyleKey)),
+        ),
+      );
+    }
+
+    if (webModifiers.length > 0) {
+      const webClassNames = webModifiers.map((m) => m.baseClass).join(" ");
+      const webStyleObject = parseClassName(webClassNames, state.customTheme);
+      const webStyleKey = generateStyleKey(`web_${webClassNames}`);
+      state.styleRegistry.set(webStyleKey, webStyleObject);
+
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("webStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(webStyleKey)),
+        ),
+      );
+    }
+  }
+
+  // Group other modifiers by type (non-color-scheme and non-platform modifiers)
   const modifiersByType = new Map<ModifierType, ParsedModifier[]>();
-  for (const mod of modifierClasses) {
+  for (const mod of otherModifiers) {
     if (!modifiersByType.has(mod.modifier)) {
       modifiersByType.set(mod.modifier, []);
     }
@@ -86,7 +294,7 @@ export function processTwCall(
     }
   }
 
-  // Add modifier styles
+  // Add modifier styles (activeStyle, focusStyle, etc.) for non-color-scheme modifiers
   for (const [modifierType, modifiers] of modifiersByType) {
     const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
     const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);

package/src/parser/index.ts

@@ -20,6 +20,7 @@ import { parseTypography } from "./typography";
 export type CustomTheme = {
   colors?: Record<string, string>;
   fontFamily?: Record<string, string>;
+  fontSize?: Record<string, number>;
 };
 
 /**
@@ -55,7 +56,7 @@ export function parseClass(cls: string, customTheme?: CustomTheme): StyleObject
     parseBorder,
     (cls: string) => parseColor(cls, customTheme?.colors),
     parseLayout,
-    (cls: string) => parseTypography(cls, customTheme?.fontFamily),
+    (cls: string) => parseTypography(cls, customTheme?.fontFamily, customTheme?.fontSize),
     parseSizing,
     parseShadow,
     parseAspectRatio,

package/src/parser/layout.test.ts

@@ -73,6 +73,67 @@ describe("parseLayout - flex grow/shrink utilities", () => {
   it("should parse shrink-0", () => {
     expect(parseLayout("shrink-0")).toEqual({ flexShrink: 0 });
   });
+
+  it("should parse grow with arbitrary values", () => {
+    expect(parseLayout("grow-[1.5]")).toEqual({ flexGrow: 1.5 });
+    expect(parseLayout("grow-[2]")).toEqual({ flexGrow: 2 });
+    expect(parseLayout("grow-[0.5]")).toEqual({ flexGrow: 0.5 });
+    expect(parseLayout("grow-[3]")).toEqual({ flexGrow: 3 });
+    expect(parseLayout("grow-[0]")).toEqual({ flexGrow: 0 });
+  });
+
+  it("should parse shrink with arbitrary values", () => {
+    expect(parseLayout("shrink-[0.5]")).toEqual({ flexShrink: 0.5 });
+    expect(parseLayout("shrink-[2]")).toEqual({ flexShrink: 2 });
+    expect(parseLayout("shrink-[1.5]")).toEqual({ flexShrink: 1.5 });
+    expect(parseLayout("shrink-[3]")).toEqual({ flexShrink: 3 });
+    expect(parseLayout("shrink-[0]")).toEqual({ flexShrink: 0 });
+  });
+
+  it("should parse CSS-style flex-grow aliases", () => {
+    expect(parseLayout("flex-grow")).toEqual({ flexGrow: 1 });
+    expect(parseLayout("flex-grow-0")).toEqual({ flexGrow: 0 });
+  });
+
+  it("should parse CSS-style flex-shrink aliases", () => {
+    expect(parseLayout("flex-shrink")).toEqual({ flexShrink: 1 });
+    expect(parseLayout("flex-shrink-0")).toEqual({ flexShrink: 0 });
+  });
+
+  it("should parse CSS-style flex-grow with arbitrary values", () => {
+    expect(parseLayout("flex-grow-[1.5]")).toEqual({ flexGrow: 1.5 });
+    expect(parseLayout("flex-grow-[2]")).toEqual({ flexGrow: 2 });
+    expect(parseLayout("flex-grow-[0.5]")).toEqual({ flexGrow: 0.5 });
+  });
+
+  it("should parse CSS-style flex-shrink with arbitrary values", () => {
+    expect(parseLayout("flex-shrink-[0.5]")).toEqual({ flexShrink: 0.5 });
+    expect(parseLayout("flex-shrink-[2]")).toEqual({ flexShrink: 2 });
+    expect(parseLayout("flex-shrink-[1.5]")).toEqual({ flexShrink: 1.5 });
+  });
+
+  it("should handle edge case values", () => {
+    expect(parseLayout("grow-[0.1]")).toEqual({ flexGrow: 0.1 });
+    expect(parseLayout("grow-[10]")).toEqual({ flexGrow: 10 });
+    expect(parseLayout("shrink-[0.01]")).toEqual({ flexShrink: 0.01 });
+    expect(parseLayout("shrink-[100]")).toEqual({ flexShrink: 100 });
+  });
+
+  it("should parse Tailwind shorthand decimals (no leading zero)", () => {
+    expect(parseLayout("grow-[.5]")).toEqual({ flexGrow: 0.5 });
+    expect(parseLayout("grow-[.75]")).toEqual({ flexGrow: 0.75 });
+    expect(parseLayout("shrink-[.5]")).toEqual({ flexShrink: 0.5 });
+    expect(parseLayout("shrink-[.25]")).toEqual({ flexShrink: 0.25 });
+    expect(parseLayout("flex-grow-[.5]")).toEqual({ flexGrow: 0.5 });
+    expect(parseLayout("flex-shrink-[.5]")).toEqual({ flexShrink: 0.5 });
+  });
+
+  it("should reject negative values", () => {
+    expect(parseLayout("grow-[-1]")).toBeNull();
+    expect(parseLayout("shrink-[-1]")).toBeNull();
+    expect(parseLayout("flex-grow-[-2]")).toBeNull();
+    expect(parseLayout("flex-shrink-[-0.5]")).toBeNull();
+  });
 });
 
 describe("parseLayout - justify content utilities", () => {