@mgcrea/react-native-tailwind 0.6.1 → 0.7.0

package/dist/babel/index.cjs

@@ -548,20 +548,28 @@ var TAILWIND_PALETTES = {
   }
 };
 
-// src/parser/colors.ts
-function flattenColors() {
-  const flat = {};
-  for (const [colorName, shades] of Object.entries(TAILWIND_PALETTES)) {
-    for (const [shade, hex] of Object.entries(shades)) {
-      flat[`${colorName}-${shade}`] = hex;
+// src/utils/flattenColors.ts
+function flattenColors(colors, prefix = "") {
+  const result = {};
+  for (const [key, value] of Object.entries(colors)) {
+    const newKey = prefix ? `${prefix}-${key}` : key;
+    if (typeof value === "string") {
+      result[newKey] = value;
+    } else if (typeof value === "object" && value !== null) {
+      Object.assign(result, flattenColors(value, newKey));
     }
   }
-  flat.white = "#FFFFFF";
-  flat.black = "#000000";
-  flat.transparent = "transparent";
-  return flat;
+  return result;
 }
-var COLORS = flattenColors();
+
+// src/parser/colors.ts
+var COLORS = {
+  ...flattenColors(TAILWIND_PALETTES),
+  // Add basic colors
+  white: "#FFFFFF",
+  black: "#000000",
+  transparent: "transparent"
+};
 function applyOpacity(hex, opacity) {
   if (hex === "transparent") {
     return "transparent";
@@ -1801,18 +1809,6 @@ function loadTailwindConfig(configPath) {
     return null;
   }
 }
-function flattenColors2(colors, prefix = "") {
-  const result = {};
-  for (const [key, value] of Object.entries(colors)) {
-    const newKey = prefix ? `${prefix}-${key}` : key;
-    if (typeof value === "string") {
-      result[newKey] = value;
-    } else if (typeof value === "object" && value !== null) {
-      Object.assign(result, flattenColors2(value, newKey));
-    }
-  }
-  return result;
-}
 function extractCustomColors(filename) {
   const projectDir = path.dirname(filename);
   const configPath = findTailwindConfig(projectDir);
@@ -1829,36 +1825,44 @@ function extractCustomColors(filename) {
     );
   }
   const colors = config.theme.extend?.colors ?? config.theme.colors ?? {};
-  return flattenColors2(colors);
+  return flattenColors(colors);
 }
 
 // src/babel/index.ts
-var STYLES_IDENTIFIER = "_twStyles";
-var SUPPORTED_CLASS_ATTRIBUTES = [
+var DEFAULT_STYLES_IDENTIFIER = "_twStyles";
+var DEFAULT_CLASS_ATTRIBUTES = [
   "className",
-  "containerClassName",
   "contentContainerClassName",
   "columnWrapperClassName",
   "ListHeaderComponentClassName",
   "ListFooterComponentClassName"
 ];
-function getTargetStyleProp(attributeName) {
-  if (attributeName === "containerClassName") {
-    return "containerStyle";
-  }
-  if (attributeName === "contentContainerClassName") {
-    return "contentContainerStyle";
-  }
-  if (attributeName === "columnWrapperClassName") {
-    return "columnWrapperStyle";
+function buildAttributeMatchers(attributes) {
+  const exactMatches = /* @__PURE__ */ new Set();
+  const patterns = [];
+  for (const attr of attributes) {
+    if (attr.includes("*")) {
+      const regexPattern = "^" + attr.replace(/\*/g, ".*") + "$";
+      patterns.push(new RegExp(regexPattern));
+    } else {
+      exactMatches.add(attr);
+    }
   }
-  if (attributeName === "ListHeaderComponentClassName") {
-    return "ListHeaderComponentStyle";
+  return { exactMatches, patterns };
+}
+function isAttributeSupported(attributeName, exactMatches, patterns) {
+  if (exactMatches.has(attributeName)) {
+    return true;
   }
-  if (attributeName === "ListFooterComponentClassName") {
-    return "ListFooterComponentStyle";
+  for (const pattern of patterns) {
+    if (pattern.test(attributeName)) {
+      return true;
+    }
   }
-  return "style";
+  return false;
+}
+function getTargetStyleProp(attributeName) {
+  return attributeName.endsWith("ClassName") ? attributeName.replace("ClassName", "Style") : "style";
 }
 function getComponentModifierSupport(jsxElement, t) {
   if (!t.isJSXOpeningElement(jsxElement)) {
@@ -1912,7 +1916,7 @@ function processTemplateLiteral(node, state, t) {
         const styleKey = generateStyleKey2(cls);
         state.styleRegistry.set(styleKey, styleObject);
         staticParts.push(cls);
-        parts.push(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)));
+        parts.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
       }
     }
     if (i < node.expressions.length) {
@@ -1967,7 +1971,7 @@ function processStringOrExpression(node, state, t) {
     const styleObject = parseClassName2(className, state.customColors);
     const styleKey = generateStyleKey2(className);
     state.styleRegistry.set(styleKey, styleObject);
-    return t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey));
+    return t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey));
   }
   if (t.isConditionalExpression(node)) {
     const result = processConditionalExpression(node, state, t);
@@ -1991,7 +1995,7 @@ function processStaticClassNameWithModifiers(className, state, t) {
     const baseStyleObject = parseClassName2(baseClassName, state.customColors);
     const baseStyleKey = generateStyleKey2(baseClassName);
     state.styleRegistry.set(baseStyleKey, baseStyleObject);
-    baseStyleExpression = t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(baseStyleKey));
+    baseStyleExpression = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey));
   }
   const modifiersByType = /* @__PURE__ */ new Map();
   for (const mod of modifierClasses) {
@@ -2016,7 +2020,7 @@ function processStaticClassNameWithModifiers(className, state, t) {
     const conditionalExpression = t.logicalExpression(
       "&&",
       t.identifier(stateProperty),
-      t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(modifierStyleKey))
+      t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey))
     );
     styleArrayElements.push(conditionalExpression);
   }
@@ -2054,9 +2058,53 @@ function createStyleFunction(styleExpression, modifierTypes, t) {
   const param = t.objectPattern(paramProperties);
   return t.arrowFunctionExpression([param], styleExpression);
 }
-function reactNativeTailwindBabelPlugin({
-  types: t
-}) {
+function processTwCall(className, path2, state, t) {
+  const { baseClasses, modifierClasses } = splitModifierClasses(className);
+  const objectProperties = [];
+  if (baseClasses.length > 0) {
+    const baseClassName = baseClasses.join(" ");
+    const baseStyleObject = parseClassName2(baseClassName, state.customColors);
+    const baseStyleKey = generateStyleKey2(baseClassName);
+    state.styleRegistry.set(baseStyleKey, baseStyleObject);
+    objectProperties.push(
+      t.objectProperty(
+        t.identifier("style"),
+        t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey))
+      )
+    );
+  } else {
+    objectProperties.push(t.objectProperty(t.identifier("style"), t.objectExpression([])));
+  }
+  const modifiersByType = /* @__PURE__ */ new Map();
+  for (const mod of modifierClasses) {
+    if (!modifiersByType.has(mod.modifier)) {
+      modifiersByType.set(mod.modifier, []);
+    }
+    const modGroup = modifiersByType.get(mod.modifier);
+    if (modGroup) {
+      modGroup.push(mod);
+    }
+  }
+  for (const [modifierType, modifiers] of modifiersByType) {
+    const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
+    const modifierStyleObject = parseClassName2(modifierClassNames, state.customColors);
+    const modifierStyleKey = generateStyleKey2(`${modifierType}_${modifierClassNames}`);
+    state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
+    const propertyName = `${modifierType}Style`;
+    objectProperties.push(
+      t.objectProperty(
+        t.identifier(propertyName),
+        t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(modifierStyleKey))
+      )
+    );
+  }
+  const twStyleObject = t.objectExpression(objectProperties);
+  path2.replaceWith(twStyleObject);
+}
+function reactNativeTailwindBabelPlugin({ types: t }, options) {
+  const attributes = options?.attributes ?? [...DEFAULT_CLASS_ATTRIBUTES];
+  const { exactMatches, patterns } = buildAttributeMatchers(attributes);
+  const stylesIdentifier = options?.stylesIdentifier ?? DEFAULT_STYLES_IDENTIFIER;
   return {
     name: "react-native-tailwind",
     visitor: {
@@ -2065,19 +2113,27 @@ function reactNativeTailwindBabelPlugin({
           state.styleRegistry = /* @__PURE__ */ new Map();
           state.hasClassNames = false;
           state.hasStyleSheetImport = false;
+          state.supportedAttributes = exactMatches;
+          state.attributePatterns = patterns;
+          state.stylesIdentifier = stylesIdentifier;
+          state.twImportNames = /* @__PURE__ */ new Set();
+          state.hasTwImport = false;
           state.customColors = extractCustomColors(state.file.opts.filename ?? "");
         },
         exit(path2, state) {
+          if (state.hasTwImport) {
+            removeTwImports(path2, t);
+          }
           if (!state.hasClassNames || state.styleRegistry.size === 0) {
             return;
           }
           if (!state.hasStyleSheetImport) {
             addStyleSheetImport(path2, t);
           }
-          injectStyles(path2, state.styleRegistry, t);
+          injectStylesAtTop(path2, state.styleRegistry, state.stylesIdentifier, t);
         }
       },
-      // Check if StyleSheet is already imported
+      // Check if StyleSheet is already imported and track tw/twStyle imports
       ImportDeclaration(path2, state) {
         const node = path2.node;
         if (node.source.value === "react-native") {
@@ -2095,11 +2151,91 @@ function reactNativeTailwindBabelPlugin({
             state.hasStyleSheetImport = true;
           }
         }
+        if (node.source.value === "@mgcrea/react-native-tailwind") {
+          const specifiers = node.specifiers;
+          specifiers.forEach((spec) => {
+            if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+              const importedName = spec.imported.name;
+              if (importedName === "tw" || importedName === "twStyle") {
+                const localName = spec.local.name;
+                state.twImportNames.add(localName);
+                state.hasTwImport = true;
+              }
+            }
+          });
+        }
+      },
+      // Handle tw`...` tagged template expressions
+      TaggedTemplateExpression(path2, state) {
+        const node = path2.node;
+        if (!t.isIdentifier(node.tag)) {
+          return;
+        }
+        const tagName = node.tag.name;
+        if (!state.twImportNames.has(tagName)) {
+          return;
+        }
+        const quasi = node.quasi;
+        if (!t.isTemplateLiteral(quasi)) {
+          return;
+        }
+        if (quasi.expressions.length > 0) {
+          if (process.env.NODE_ENV !== "production") {
+            console.warn(
+              `[react-native-tailwind] Dynamic tw\`...\` with interpolations is not supported at ${state.file.opts.filename ?? "unknown"}. Use style prop for dynamic values.`
+            );
+          }
+          return;
+        }
+        const className = quasi.quasis[0]?.value.cooked?.trim() ?? "";
+        if (!className) {
+          path2.replaceWith(
+            t.objectExpression([t.objectProperty(t.identifier("style"), t.objectExpression([]))])
+          );
+          return;
+        }
+        state.hasClassNames = true;
+        processTwCall(className, path2, state, t);
+      },
+      // Handle twStyle('...') call expressions
+      CallExpression(path2, state) {
+        const node = path2.node;
+        if (!t.isIdentifier(node.callee)) {
+          return;
+        }
+        const calleeName = node.callee.name;
+        if (!state.twImportNames.has(calleeName)) {
+          return;
+        }
+        if (node.arguments.length !== 1) {
+          if (process.env.NODE_ENV !== "production") {
+            console.warn(
+              `[react-native-tailwind] twStyle() expects exactly one argument at ${state.file.opts.filename ?? "unknown"}`
+            );
+          }
+          return;
+        }
+        const arg = node.arguments[0];
+        if (!t.isStringLiteral(arg)) {
+          if (process.env.NODE_ENV !== "production") {
+            console.warn(
+              `[react-native-tailwind] twStyle() only supports static string literals at ${state.file.opts.filename ?? "unknown"}. Use style prop for dynamic values.`
+            );
+          }
+          return;
+        }
+        const className = arg.value.trim();
+        if (!className) {
+          path2.replaceWith(t.identifier("undefined"));
+          return;
+        }
+        state.hasClassNames = true;
+        processTwCall(className, path2, state, t);
       },
       JSXAttribute(path2, state) {
         const node = path2.node;
         const attributeName = node.name.name;
-        if (!SUPPORTED_CLASS_ATTRIBUTES.includes(attributeName)) {
+        if (!isAttributeSupported(attributeName, state.supportedAttributes, state.attributePatterns)) {
           return;
         }
         const value = node.value;
@@ -2182,9 +2318,9 @@ function reactNativeTailwindBabelPlugin({
             (attr) => t.isJSXAttribute(attr) && attr.name.name === targetStyleProp
           );
           if (styleAttribute) {
-            mergeStyleAttribute(path2, styleAttribute, styleKey, t);
+            mergeStyleAttribute(path2, styleAttribute, styleKey, state.stylesIdentifier, t);
           } else {
-            replaceWithStyleAttribute(path2, styleKey, targetStyleProp, t);
+            replaceWithStyleAttribute(path2, styleKey, targetStyleProp, state.stylesIdentifier, t);
           }
           return;
         }
@@ -2233,17 +2369,39 @@ function addStyleSheetImport(path2, t) {
   );
   path2.unshiftContainer("body", importDeclaration);
 }
-function replaceWithStyleAttribute(classNamePath, styleKey, targetStyleProp, t) {
+function removeTwImports(path2, t) {
+  path2.traverse({
+    ImportDeclaration(importPath) {
+      const node = importPath.node;
+      if (node.source.value !== "@mgcrea/react-native-tailwind") {
+        return;
+      }
+      const remainingSpecifiers = node.specifiers.filter((spec) => {
+        if (t.isImportSpecifier(spec) && t.isIdentifier(spec.imported)) {
+          const importedName = spec.imported.name;
+          return importedName !== "tw" && importedName !== "twStyle";
+        }
+        return true;
+      });
+      if (remainingSpecifiers.length === 0) {
+        importPath.remove();
+      } else if (remainingSpecifiers.length < node.specifiers.length) {
+        node.specifiers = remainingSpecifiers;
+      }
+    }
+  });
+}
+function replaceWithStyleAttribute(classNamePath, styleKey, targetStyleProp, stylesIdentifier, t) {
   const styleAttribute = t.jsxAttribute(
     t.jsxIdentifier(targetStyleProp),
-    t.jsxExpressionContainer(t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)))
+    t.jsxExpressionContainer(t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)))
   );
   classNamePath.replaceWith(styleAttribute);
 }
-function mergeStyleAttribute(classNamePath, styleAttribute, styleKey, t) {
+function mergeStyleAttribute(classNamePath, styleAttribute, styleKey, stylesIdentifier, t) {
   const existingStyle = styleAttribute.value.expression;
   const styleArray = t.arrayExpression([
-    t.memberExpression(t.identifier(STYLES_IDENTIFIER), t.identifier(styleKey)),
+    t.memberExpression(t.identifier(stylesIdentifier), t.identifier(styleKey)),
     existingStyle
   ]);
   styleAttribute.value = t.jsxExpressionContainer(styleArray);
@@ -2292,7 +2450,7 @@ function mergeStyleFunctionAttribute(classNamePath, styleAttribute, styleFunctio
   }
   classNamePath.remove();
 }
-function injectStyles(path2, styleRegistry, t) {
+function injectStylesAtTop(path2, styleRegistry, stylesIdentifier, t) {
   const styleProperties = [];
   for (const [key, styleObject] of styleRegistry) {
     const properties = Object.entries(styleObject).map(([styleProp, styleValue]) => {
@@ -2310,13 +2468,22 @@ function injectStyles(path2, styleRegistry, t) {
   }
   const styleSheet = t.variableDeclaration("const", [
     t.variableDeclarator(
-      t.identifier(STYLES_IDENTIFIER),
+      t.identifier(stylesIdentifier),
       t.callExpression(t.memberExpression(t.identifier("StyleSheet"), t.identifier("create")), [
         t.objectExpression(styleProperties)
       ])
     )
   ]);
-  path2.pushContainer("body", styleSheet);
+  const body = path2.node.body;
+  let insertIndex = 0;
+  for (let i = 0; i < body.length; i++) {
+    if (t.isImportDeclaration(body[i])) {
+      insertIndex = i + 1;
+    } else {
+      break;
+    }
+  }
+  body.splice(insertIndex, 0, styleSheet);
 }
 function parseClassName2(className, customColors) {
   return parseClassName(className, customColors);

package/dist/babel/index.d.ts

@@ -5,13 +5,38 @@
 import type { PluginObj, PluginPass } from "@babel/core";
 import * as BabelTypes from "@babel/types";
 import { StyleObject } from "src/types.js";
+/**
+ * Plugin options
+ */
+export type PluginOptions = {
+    /**
+     * List of JSX attribute names to transform (in addition to or instead of 'className')
+     * Supports exact matches and glob patterns:
+     * - Exact: 'className', 'containerClassName'
+     * - Glob: '*ClassName' (matches any attribute ending in 'ClassName')
+     *
+     * @default ['className', 'contentContainerClassName', 'columnWrapperClassName', 'ListHeaderComponentClassName', 'ListFooterComponentClassName']
+     */
+    attributes?: string[];
+    /**
+     * Custom identifier name for the generated StyleSheet constant
+     *
+     * @default '_twStyles'
+     */
+    stylesIdentifier?: string;
+};
 type PluginState = PluginPass & {
     styleRegistry: Map<string, StyleObject>;
     hasClassNames: boolean;
     hasStyleSheetImport: boolean;
     customColors: Record<string, string>;
+    supportedAttributes: Set<string>;
+    attributePatterns: RegExp[];
+    stylesIdentifier: string;
+    twImportNames: Set<string>;
+    hasTwImport: boolean;
 };
-export default function reactNativeTailwindBabelPlugin({ types: t, }: {
+export default function reactNativeTailwindBabelPlugin({ types: t }: {
     types: typeof BabelTypes;
-}): PluginObj<PluginState>;
+}, options?: PluginOptions): PluginObj<PluginState>;
 export {};