@mgcrea/react-native-tailwind 0.10.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. package/README.md +30 -13
  2. package/dist/babel/config-loader.d.ts +12 -3
  3. package/dist/babel/config-loader.test.ts +14 -12
  4. package/dist/babel/config-loader.ts +41 -9
  5. package/dist/babel/index.cjs +50 -27
  6. package/dist/babel/plugin.d.ts +2 -1
  7. package/dist/babel/plugin.ts +11 -10
  8. package/dist/babel/utils/colorSchemeModifierProcessing.d.ts +3 -3
  9. package/dist/babel/utils/colorSchemeModifierProcessing.ts +4 -4
  10. package/dist/babel/utils/dynamicProcessing.d.ts +5 -5
  11. package/dist/babel/utils/dynamicProcessing.ts +11 -11
  12. package/dist/babel/utils/modifierProcessing.d.ts +3 -3
  13. package/dist/babel/utils/modifierProcessing.ts +5 -5
  14. package/dist/babel/utils/platformModifierProcessing.d.ts +3 -3
  15. package/dist/babel/utils/platformModifierProcessing.ts +4 -4
  16. package/dist/babel/utils/twProcessing.d.ts +3 -3
  17. package/dist/babel/utils/twProcessing.ts +6 -6
  18. package/dist/parser/index.d.ts +11 -4
  19. package/dist/parser/index.js +1 -1
  20. package/dist/parser/typography.d.ts +3 -1
  21. package/dist/parser/typography.js +1 -1
  22. package/dist/runtime.cjs +1 -1
  23. package/dist/runtime.cjs.map +3 -3
  24. package/dist/runtime.d.ts +8 -1
  25. package/dist/runtime.js +1 -1
  26. package/dist/runtime.js.map +3 -3
  27. package/dist/runtime.test.js +1 -1
  28. package/package.json +1 -1
  29. package/src/babel/config-loader.test.ts +14 -12
  30. package/src/babel/config-loader.ts +41 -9
  31. package/src/babel/plugin.ts +11 -10
  32. package/src/babel/utils/colorSchemeModifierProcessing.ts +4 -4
  33. package/src/babel/utils/dynamicProcessing.ts +11 -11
  34. package/src/babel/utils/modifierProcessing.ts +5 -5
  35. package/src/babel/utils/platformModifierProcessing.ts +4 -4
  36. package/src/babel/utils/twProcessing.ts +6 -6
  37. package/src/parser/index.ts +16 -8
  38. package/src/parser/typography.ts +14 -2
  39. package/src/runtime.test.ts +7 -7
  40. package/src/runtime.ts +37 -14
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  import type * as BabelTypes from "@babel/types";
6
- import type { ColorSchemeModifierType, ParsedModifier } from "../../parser/index.js";
6
+ import type { ColorSchemeModifierType, CustomTheme, ParsedModifier } from "../../parser/index.js";
7
7
  import type { StyleObject } from "../../types/core.js";
8
8
 
9
9
  /**
@@ -12,7 +12,7 @@ import type { StyleObject } from "../../types/core.js";
12
12
  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
13
13
  export interface ColorSchemeModifierProcessingState {
14
14
  styleRegistry: Map<string, StyleObject>;
15
- customColors: Record<string, string>;
15
+ customTheme: CustomTheme;
16
16
  stylesIdentifier: string;
17
17
  needsColorSchemeImport: boolean;
18
18
  colorSchemeVariableName: string;
@@ -38,7 +38,7 @@ export interface ColorSchemeModifierProcessingState {
38
38
  export function processColorSchemeModifiers(
39
39
  colorSchemeModifiers: ParsedModifier[],
40
40
  state: ColorSchemeModifierProcessingState,
41
- parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
41
+ parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
42
42
  generateStyleKey: (className: string) => string,
43
43
  t: typeof BabelTypes,
44
44
  ): BabelTypes.Expression[] {
@@ -65,7 +65,7 @@ export function processColorSchemeModifiers(
65
65
  for (const [scheme, modifiers] of modifiersByScheme) {
66
66
  // Parse all classes for this color scheme together
67
67
  const classNames = modifiers.map((m) => m.baseClass).join(" ");
68
- const styleObject = parseClassName(classNames, state.customColors);
68
+ const styleObject = parseClassName(classNames, state.customTheme);
69
69
  const styleKey = generateStyleKey(`${scheme}_${classNames}`);
70
70
 
71
71
  // Register style in the registry
@@ -3,7 +3,7 @@
3
3
  */
4
4
  import type { NodePath } from "@babel/core";
5
5
  import type * as BabelTypes from "@babel/types";
6
- import type { ParsedModifier } from "../../parser/index.js";
6
+ import type { CustomTheme, ParsedModifier } from "../../parser/index.js";
7
7
  import type { SchemeModifierConfig } from "../../types/config.js";
8
8
  import type { StyleObject } from "../../types/core.js";
9
9
  /**
@@ -11,7 +11,7 @@ import type { StyleObject } from "../../types/core.js";
11
11
  */
12
12
  export interface DynamicProcessingState {
13
13
  styleRegistry: Map<string, StyleObject>;
14
- customColors: Record<string, string>;
14
+ customTheme: CustomTheme;
15
15
  schemeModifierConfig: SchemeModifierConfig;
16
16
  stylesIdentifier: string;
17
17
  needsPlatformImport: boolean;
@@ -29,11 +29,11 @@ export type SplitModifierClassesFn = (className: string) => {
29
29
  /**
30
30
  * Type for the processPlatformModifiers function
31
31
  */
32
- export type ProcessPlatformModifiersFn = (modifiers: ParsedModifier[], state: DynamicProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes) => BabelTypes.Expression;
32
+ export type ProcessPlatformModifiersFn = (modifiers: ParsedModifier[], state: DynamicProcessingState, parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes) => BabelTypes.Expression;
33
33
  /**
34
34
  * Type for the processColorSchemeModifiers function
35
35
  */
36
- export type ProcessColorSchemeModifiersFn = (modifiers: ParsedModifier[], state: DynamicProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes) => BabelTypes.Expression[];
36
+ export type ProcessColorSchemeModifiersFn = (modifiers: ParsedModifier[], state: DynamicProcessingState, parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes) => BabelTypes.Expression[];
37
37
  /**
38
38
  * Type for modifier type guard functions
39
39
  */
@@ -53,7 +53,7 @@ export type DynamicExpressionResult = {
53
53
  * Process a dynamic className expression
54
54
  * Extracts static strings and transforms the expression to use pre-compiled styles
55
55
  */
56
- export declare function processDynamicExpression(expression: BabelTypes.Expression, state: DynamicProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, splitModifierClasses: SplitModifierClassesFn, processPlatformModifiers: ProcessPlatformModifiersFn, processColorSchemeModifiers: ProcessColorSchemeModifiersFn, componentScope: NodePath<BabelTypes.Function> | null, isPlatformModifier: ModifierTypeGuardFn, isColorSchemeModifier: ModifierTypeGuardFn, isSchemeModifier: ModifierTypeGuardFn, expandSchemeModifier: ExpandSchemeModifierFn, t: typeof BabelTypes): {
56
+ export declare function processDynamicExpression(expression: BabelTypes.Expression, state: DynamicProcessingState, parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject, generateStyleKey: (className: string) => string, splitModifierClasses: SplitModifierClassesFn, processPlatformModifiers: ProcessPlatformModifiersFn, processColorSchemeModifiers: ProcessColorSchemeModifiersFn, componentScope: NodePath<BabelTypes.Function> | null, isPlatformModifier: ModifierTypeGuardFn, isColorSchemeModifier: ModifierTypeGuardFn, isSchemeModifier: ModifierTypeGuardFn, expandSchemeModifier: ExpandSchemeModifierFn, t: typeof BabelTypes): {
57
57
  expression: BabelTypes.Expression;
58
58
  staticParts: string[] | undefined;
59
59
  } | {
@@ -4,7 +4,7 @@
4
4
 
5
5
  import type { NodePath } from "@babel/core";
6
6
  import type * as BabelTypes from "@babel/types";
7
- import type { ParsedModifier } from "../../parser/index.js";
7
+ import type { CustomTheme, ParsedModifier } from "../../parser/index.js";
8
8
  import type { SchemeModifierConfig } from "../../types/config.js";
9
9
  import type { StyleObject } from "../../types/core.js";
10
10
 
@@ -14,7 +14,7 @@ import type { StyleObject } from "../../types/core.js";
14
14
  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
15
15
  export interface DynamicProcessingState {
16
16
  styleRegistry: Map<string, StyleObject>;
17
- customColors: Record<string, string>;
17
+ customTheme: CustomTheme;
18
18
  schemeModifierConfig: SchemeModifierConfig;
19
19
  stylesIdentifier: string;
20
20
  needsPlatformImport: boolean;
@@ -37,7 +37,7 @@ export type SplitModifierClassesFn = (className: string) => {
37
37
  export type ProcessPlatformModifiersFn = (
38
38
  modifiers: ParsedModifier[],
39
39
  state: DynamicProcessingState,
40
- parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
40
+ parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
41
41
  generateStyleKey: (className: string) => string,
42
42
  t: typeof BabelTypes,
43
43
  ) => BabelTypes.Expression;
@@ -48,7 +48,7 @@ export type ProcessPlatformModifiersFn = (
48
48
  export type ProcessColorSchemeModifiersFn = (
49
49
  modifiers: ParsedModifier[],
50
50
  state: DynamicProcessingState,
51
- parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
51
+ parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
52
52
  generateStyleKey: (className: string) => string,
53
53
  t: typeof BabelTypes,
54
54
  ) => BabelTypes.Expression[];
@@ -85,7 +85,7 @@ export type DynamicExpressionResult = {
85
85
  export function processDynamicExpression(
86
86
  expression: BabelTypes.Expression,
87
87
  state: DynamicProcessingState,
88
- parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
88
+ parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
89
89
  generateStyleKey: (className: string) => string,
90
90
  splitModifierClasses: SplitModifierClassesFn,
91
91
  processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -164,7 +164,7 @@ export function processDynamicExpression(
164
164
  function processTemplateLiteral(
165
165
  node: BabelTypes.TemplateLiteral,
166
166
  state: DynamicProcessingState,
167
- parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
167
+ parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
168
168
  generateStyleKey: (className: string) => string,
169
169
  splitModifierClasses: SplitModifierClassesFn,
170
170
  processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -262,7 +262,7 @@ function processTemplateLiteral(
262
262
  function processConditionalExpression(
263
263
  node: BabelTypes.ConditionalExpression,
264
264
  state: DynamicProcessingState,
265
- parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
265
+ parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
266
266
  generateStyleKey: (className: string) => string,
267
267
  splitModifierClasses: SplitModifierClassesFn,
268
268
  processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -325,7 +325,7 @@ function processConditionalExpression(
325
325
  function processLogicalExpression(
326
326
  node: BabelTypes.LogicalExpression,
327
327
  state: DynamicProcessingState,
328
- parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
328
+ parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
329
329
  generateStyleKey: (className: string) => string,
330
330
  splitModifierClasses: SplitModifierClassesFn,
331
331
  processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -376,7 +376,7 @@ function processLogicalExpression(
376
376
  function processStringOrExpressionHelper(
377
377
  node: BabelTypes.StringLiteral | BabelTypes.Expression,
378
378
  state: DynamicProcessingState,
379
- parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
379
+ parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
380
380
  generateStyleKey: (className: string) => string,
381
381
  splitModifierClasses: SplitModifierClassesFn,
382
382
  processPlatformModifiers: ProcessPlatformModifiersFn,
@@ -405,7 +405,7 @@ function processStringOrExpressionHelper(
405
405
  // Expand scheme: into dark: and light:
406
406
  const expanded = expandSchemeModifier(
407
407
  modifier,
408
- state.customColors,
408
+ state.customTheme.colors ?? {},
409
409
  state.schemeModifierConfig.darkSuffix ?? "-dark",
410
410
  state.schemeModifierConfig.lightSuffix ?? "-light",
411
411
  );
@@ -425,7 +425,7 @@ function processStringOrExpressionHelper(
425
425
  // Process base classes
426
426
  if (baseClasses.length > 0) {
427
427
  const baseClassName = baseClasses.join(" ");
428
- const styleObject = parseClassName(baseClassName, state.customColors);
428
+ const styleObject = parseClassName(baseClassName, state.customTheme);
429
429
  const styleKey = generateStyleKey(baseClassName);
430
430
  state.styleRegistry.set(styleKey, styleObject);
431
431
  styleElements.push(t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(styleKey)));
@@ -2,21 +2,21 @@
2
2
  * Utility functions for processing class modifiers (active:, hover:, focus:, etc.)
3
3
  */
4
4
  import type * as BabelTypes from "@babel/types";
5
- import type { ModifierType, ParsedModifier } from "../../parser/index.js";
5
+ import type { CustomTheme, ModifierType, ParsedModifier } from "../../parser/index.js";
6
6
  import type { StyleObject } from "../../types/core.js";
7
7
  /**
8
8
  * Plugin state interface (subset needed for modifier processing)
9
9
  */
10
10
  export interface ModifierProcessingState {
11
11
  styleRegistry: Map<string, StyleObject>;
12
- customColors: Record<string, string>;
12
+ customTheme: CustomTheme;
13
13
  stylesIdentifier: string;
14
14
  }
15
15
  /**
16
16
  * Process a static className string that contains modifiers
17
17
  * Returns a style function expression for Pressable components
18
18
  */
19
- export declare function processStaticClassNameWithModifiers(className: string, state: ModifierProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, splitModifierClasses: (className: string) => {
19
+ export declare function processStaticClassNameWithModifiers(className: string, state: ModifierProcessingState, parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject, generateStyleKey: (className: string) => string, splitModifierClasses: (className: string) => {
20
20
  baseClasses: string[];
21
21
  modifierClasses: ParsedModifier[];
22
22
  }, t: typeof BabelTypes): BabelTypes.Expression;
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  import type * as BabelTypes from "@babel/types";
6
- import type { ModifierType, ParsedModifier } from "../../parser/index.js";
6
+ import type { CustomTheme, ModifierType, ParsedModifier } from "../../parser/index.js";
7
7
  import type { StyleObject } from "../../types/core.js";
8
8
  import { getStatePropertyForModifier } from "./componentSupport.js";
9
9
 
@@ -13,7 +13,7 @@ import { getStatePropertyForModifier } from "./componentSupport.js";
13
13
  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
14
14
  export interface ModifierProcessingState {
15
15
  styleRegistry: Map<string, StyleObject>;
16
- customColors: Record<string, string>;
16
+ customTheme: CustomTheme;
17
17
  stylesIdentifier: string;
18
18
  }
19
19
 
@@ -24,7 +24,7 @@ export interface ModifierProcessingState {
24
24
  export function processStaticClassNameWithModifiers(
25
25
  className: string,
26
26
  state: ModifierProcessingState,
27
- parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
27
+ parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
28
28
  generateStyleKey: (className: string) => string,
29
29
  splitModifierClasses: (className: string) => { baseClasses: string[]; modifierClasses: ParsedModifier[] },
30
30
  t: typeof BabelTypes,
@@ -35,7 +35,7 @@ export function processStaticClassNameWithModifiers(
35
35
  let baseStyleExpression: BabelTypes.Node | null = null;
36
36
  if (baseClasses.length > 0) {
37
37
  const baseClassName = baseClasses.join(" ");
38
- const baseStyleObject = parseClassName(baseClassName, state.customColors);
38
+ const baseStyleObject = parseClassName(baseClassName, state.customTheme);
39
39
  const baseStyleKey = generateStyleKey(baseClassName);
40
40
  state.styleRegistry.set(baseStyleKey, baseStyleObject);
41
41
  baseStyleExpression = t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey));
@@ -66,7 +66,7 @@ export function processStaticClassNameWithModifiers(
66
66
  for (const [modifierType, modifiers] of modifiersByType) {
67
67
  // Parse all modifier classes together
68
68
  const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
69
- const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
69
+ const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
70
70
  const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
71
71
  state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
72
72
 
@@ -2,14 +2,14 @@
2
2
  * Utility functions for processing platform modifiers (ios:, android:, web:)
3
3
  */
4
4
  import type * as BabelTypes from "@babel/types";
5
- import type { ParsedModifier } from "../../parser/index.js";
5
+ import type { CustomTheme, ParsedModifier } from "../../parser/index.js";
6
6
  import type { StyleObject } from "../../types/core.js";
7
7
  /**
8
8
  * Plugin state interface (subset needed for platform modifier processing)
9
9
  */
10
10
  export interface PlatformModifierProcessingState {
11
11
  styleRegistry: Map<string, StyleObject>;
12
- customColors: Record<string, string>;
12
+ customTheme: CustomTheme;
13
13
  stylesIdentifier: string;
14
14
  needsPlatformImport: boolean;
15
15
  }
@@ -27,4 +27,4 @@ export interface PlatformModifierProcessingState {
27
27
  * Input: [{ modifier: "ios", baseClass: "shadow-lg" }, { modifier: "android", baseClass: "elevation-4" }]
28
28
  * Output: Platform.select({ ios: styles._ios_shadow_lg, android: styles._android_elevation_4 })
29
29
  */
30
- export declare function processPlatformModifiers(platformModifiers: ParsedModifier[], state: PlatformModifierProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes): BabelTypes.Expression;
30
+ export declare function processPlatformModifiers(platformModifiers: ParsedModifier[], state: PlatformModifierProcessingState, parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject, generateStyleKey: (className: string) => string, t: typeof BabelTypes): BabelTypes.Expression;
@@ -3,7 +3,7 @@
3
3
  */
4
4
 
5
5
  import type * as BabelTypes from "@babel/types";
6
- import type { ParsedModifier, PlatformModifierType } from "../../parser/index.js";
6
+ import type { CustomTheme, ParsedModifier, PlatformModifierType } from "../../parser/index.js";
7
7
  import type { StyleObject } from "../../types/core.js";
8
8
 
9
9
  /**
@@ -12,7 +12,7 @@ import type { StyleObject } from "../../types/core.js";
12
12
  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
13
13
  export interface PlatformModifierProcessingState {
14
14
  styleRegistry: Map<string, StyleObject>;
15
- customColors: Record<string, string>;
15
+ customTheme: CustomTheme;
16
16
  stylesIdentifier: string;
17
17
  needsPlatformImport: boolean;
18
18
  }
@@ -34,7 +34,7 @@ export interface PlatformModifierProcessingState {
34
34
  export function processPlatformModifiers(
35
35
  platformModifiers: ParsedModifier[],
36
36
  state: PlatformModifierProcessingState,
37
- parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
37
+ parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
38
38
  generateStyleKey: (className: string) => string,
39
39
  t: typeof BabelTypes,
40
40
  ): BabelTypes.Expression {
@@ -61,7 +61,7 @@ export function processPlatformModifiers(
61
61
  for (const [platform, modifiers] of modifiersByPlatform) {
62
62
  // Parse all classes for this platform together
63
63
  const classNames = modifiers.map((m) => m.baseClass).join(" ");
64
- const styleObject = parseClassName(classNames, state.customColors);
64
+ const styleObject = parseClassName(classNames, state.customTheme);
65
65
  const styleKey = generateStyleKey(`${platform}_${classNames}`);
66
66
 
67
67
  // Register style in the registry
@@ -3,7 +3,7 @@
3
3
  */
4
4
  import type { NodePath } from "@babel/core";
5
5
  import type * as BabelTypes from "@babel/types";
6
- import type { ParsedModifier } from "../../parser/index.js";
6
+ import type { CustomTheme, ParsedModifier } from "../../parser/index.js";
7
7
  import type { SchemeModifierConfig } from "../../types/config.js";
8
8
  import type { StyleObject } from "../../types/core.js";
9
9
  /**
@@ -11,7 +11,7 @@ import type { StyleObject } from "../../types/core.js";
11
11
  */
12
12
  export interface TwProcessingState {
13
13
  styleRegistry: Map<string, StyleObject>;
14
- customColors: Record<string, string>;
14
+ customTheme: CustomTheme;
15
15
  schemeModifierConfig: SchemeModifierConfig;
16
16
  stylesIdentifier: string;
17
17
  }
@@ -19,7 +19,7 @@ export interface TwProcessingState {
19
19
  * Process tw`...` or twStyle('...') call and replace with TwStyle object
20
20
  * Generates: { style: styles._base, activeStyle: styles._active, ... }
21
21
  */
22
- export declare function processTwCall(className: string, path: NodePath, state: TwProcessingState, parseClassName: (className: string, customColors: Record<string, string>) => StyleObject, generateStyleKey: (className: string) => string, splitModifierClasses: (className: string) => {
22
+ export declare function processTwCall(className: string, path: NodePath, state: TwProcessingState, parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject, generateStyleKey: (className: string) => string, splitModifierClasses: (className: string) => {
23
23
  baseClasses: string[];
24
24
  modifierClasses: ParsedModifier[];
25
25
  }, t: typeof BabelTypes): void;
@@ -4,7 +4,7 @@
4
4
 
5
5
  import type { NodePath } from "@babel/core";
6
6
  import type * as BabelTypes from "@babel/types";
7
- import type { ModifierType, ParsedModifier } from "../../parser/index.js";
7
+ import type { CustomTheme, ModifierType, ParsedModifier } from "../../parser/index.js";
8
8
  import { expandSchemeModifier, isSchemeModifier } from "../../parser/index.js";
9
9
  import type { SchemeModifierConfig } from "../../types/config.js";
10
10
  import type { StyleObject } from "../../types/core.js";
@@ -15,7 +15,7 @@ import type { StyleObject } from "../../types/core.js";
15
15
  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
16
16
  export interface TwProcessingState {
17
17
  styleRegistry: Map<string, StyleObject>;
18
- customColors: Record<string, string>;
18
+ customTheme: CustomTheme;
19
19
  schemeModifierConfig: SchemeModifierConfig;
20
20
  stylesIdentifier: string;
21
21
  }
@@ -28,7 +28,7 @@ export function processTwCall(
28
28
  className: string,
29
29
  path: NodePath,
30
30
  state: TwProcessingState,
31
- parseClassName: (className: string, customColors: Record<string, string>) => StyleObject,
31
+ parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
32
32
  generateStyleKey: (className: string) => string,
33
33
  splitModifierClasses: (className: string) => { baseClasses: string[]; modifierClasses: ParsedModifier[] },
34
34
  t: typeof BabelTypes,
@@ -42,7 +42,7 @@ export function processTwCall(
42
42
  // Expand scheme: into dark: and light:
43
43
  const expanded = expandSchemeModifier(
44
44
  modifier,
45
- state.customColors,
45
+ state.customTheme.colors ?? {},
46
46
  state.schemeModifierConfig.darkSuffix ?? "-dark",
47
47
  state.schemeModifierConfig.lightSuffix ?? "-light",
48
48
  );
@@ -59,7 +59,7 @@ export function processTwCall(
59
59
  // Parse and add base styles
60
60
  if (baseClasses.length > 0) {
61
61
  const baseClassName = baseClasses.join(" ");
62
- const baseStyleObject = parseClassName(baseClassName, state.customColors);
62
+ const baseStyleObject = parseClassName(baseClassName, state.customTheme);
63
63
  const baseStyleKey = generateStyleKey(baseClassName);
64
64
  state.styleRegistry.set(baseStyleKey, baseStyleObject);
65
65
 
@@ -89,7 +89,7 @@ export function processTwCall(
89
89
  // Add modifier styles
90
90
  for (const [modifierType, modifiers] of modifiersByType) {
91
91
  const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
92
- const modifierStyleObject = parseClassName(modifierClassNames, state.customColors);
92
+ const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
93
93
  const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
94
94
  state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
95
95
 
@@ -3,20 +3,27 @@
3
3
  * Converts Tailwind-like class names to React Native style objects
4
4
  */
5
5
  import type { StyleObject } from "../types";
6
+ /**
7
+ * Custom theme configuration (subset of tailwind.config theme extensions)
8
+ */
9
+ export type CustomTheme = {
10
+ colors?: Record<string, string>;
11
+ fontFamily?: Record<string, string>;
12
+ };
6
13
  /**
7
14
  * Parse a className string and return a React Native style object
8
15
  * @param className - Space-separated class names
9
- * @param customColors - Optional custom colors from tailwind.config
16
+ * @param customTheme - Optional custom theme from tailwind.config
10
17
  * @returns React Native style object
11
18
  */
12
- export declare function parseClassName(className: string, customColors?: Record<string, string>): StyleObject;
19
+ export declare function parseClassName(className: string, customTheme?: CustomTheme): StyleObject;
13
20
  /**
14
21
  * Parse a single class name
15
22
  * @param cls - Single class name
16
- * @param customColors - Optional custom colors from tailwind.config
23
+ * @param customTheme - Optional custom theme from tailwind.config
17
24
  * @returns React Native style object
18
25
  */
19
- export declare function parseClass(cls: string, customColors?: Record<string, string>): StyleObject;
26
+ export declare function parseClass(cls: string, customTheme?: CustomTheme): StyleObject;
20
27
  export { parseAspectRatio } from "./aspectRatio";
21
28
  export { parseBorder } from "./borders";
22
29
  export { parseColor } from "./colors";
@@ -1 +1 @@
1
- Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"expandSchemeModifier",{enumerable:true,get:function get(){return _modifiers.expandSchemeModifier;}});Object.defineProperty(exports,"hasModifier",{enumerable:true,get:function get(){return _modifiers.hasModifier;}});Object.defineProperty(exports,"isColorClass",{enumerable:true,get:function get(){return _modifiers.isColorClass;}});Object.defineProperty(exports,"isColorSchemeModifier",{enumerable:true,get:function get(){return _modifiers.isColorSchemeModifier;}});Object.defineProperty(exports,"isPlatformModifier",{enumerable:true,get:function get(){return _modifiers.isPlatformModifier;}});Object.defineProperty(exports,"isSchemeModifier",{enumerable:true,get:function get(){return _modifiers.isSchemeModifier;}});Object.defineProperty(exports,"isStateModifier",{enumerable:true,get:function get(){return _modifiers.isStateModifier;}});Object.defineProperty(exports,"parseAspectRatio",{enumerable:true,get:function get(){return _aspectRatio.parseAspectRatio;}});Object.defineProperty(exports,"parseBorder",{enumerable:true,get:function get(){return _borders.parseBorder;}});exports.parseClass=parseClass;exports.parseClassName=parseClassName;Object.defineProperty(exports,"parseColor",{enumerable:true,get:function get(){return _colors.parseColor;}});Object.defineProperty(exports,"parseLayout",{enumerable:true,get:function get(){return _layout.parseLayout;}});Object.defineProperty(exports,"parseModifier",{enumerable:true,get:function get(){return _modifiers.parseModifier;}});Object.defineProperty(exports,"parsePlaceholderClass",{enumerable:true,get:function get(){return _placeholder.parsePlaceholderClass;}});Object.defineProperty(exports,"parsePlaceholderClasses",{enumerable:true,get:function get(){return _placeholder.parsePlaceholderClasses;}});Object.defineProperty(exports,"parseShadow",{enumerable:true,get:function get(){return _shadows.parseShadow;}});Object.defineProperty(exports,"parseSizing",{enumerable:true,get:function get(){return _sizing.parseSizing;}});Object.defineProperty(exports,"parseSpacing",{enumerable:true,get:function get(){return _spacing.parseSpacing;}});Object.defineProperty(exports,"parseTransform",{enumerable:true,get:function get(){return _transforms.parseTransform;}});Object.defineProperty(exports,"parseTypography",{enumerable:true,get:function get(){return _typography.parseTypography;}});Object.defineProperty(exports,"splitModifierClasses",{enumerable:true,get:function get(){return _modifiers.splitModifierClasses;}});var _aspectRatio=require("./aspectRatio");var _borders=require("./borders");var _colors=require("./colors");var _layout=require("./layout");var _shadows=require("./shadows");var _sizing=require("./sizing");var _spacing=require("./spacing");var _transforms=require("./transforms");var _typography=require("./typography");var _placeholder=require("./placeholder");var _modifiers=require("./modifiers");function parseClassName(className,customColors){var classes=className.split(/\s+/).filter(Boolean);var style={};for(var cls of classes){var parsedStyle=parseClass(cls,customColors);Object.assign(style,parsedStyle);}return style;}function parseClass(cls,customColors){var parsers=[_spacing.parseSpacing,_borders.parseBorder,function(cls){return(0,_colors.parseColor)(cls,customColors);},_layout.parseLayout,_typography.parseTypography,_sizing.parseSizing,_shadows.parseShadow,_aspectRatio.parseAspectRatio,_transforms.parseTransform];for(var parser of parsers){var result=parser(cls);if(result!==null){return result;}}if(process.env.NODE_ENV!=="production"){console.warn(`[react-native-tailwind] Unknown class: "${cls}"`);}return{};}
1
+ Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"expandSchemeModifier",{enumerable:true,get:function get(){return _modifiers.expandSchemeModifier;}});Object.defineProperty(exports,"hasModifier",{enumerable:true,get:function get(){return _modifiers.hasModifier;}});Object.defineProperty(exports,"isColorClass",{enumerable:true,get:function get(){return _modifiers.isColorClass;}});Object.defineProperty(exports,"isColorSchemeModifier",{enumerable:true,get:function get(){return _modifiers.isColorSchemeModifier;}});Object.defineProperty(exports,"isPlatformModifier",{enumerable:true,get:function get(){return _modifiers.isPlatformModifier;}});Object.defineProperty(exports,"isSchemeModifier",{enumerable:true,get:function get(){return _modifiers.isSchemeModifier;}});Object.defineProperty(exports,"isStateModifier",{enumerable:true,get:function get(){return _modifiers.isStateModifier;}});Object.defineProperty(exports,"parseAspectRatio",{enumerable:true,get:function get(){return _aspectRatio.parseAspectRatio;}});Object.defineProperty(exports,"parseBorder",{enumerable:true,get:function get(){return _borders.parseBorder;}});exports.parseClass=parseClass;exports.parseClassName=parseClassName;Object.defineProperty(exports,"parseColor",{enumerable:true,get:function get(){return _colors.parseColor;}});Object.defineProperty(exports,"parseLayout",{enumerable:true,get:function get(){return _layout.parseLayout;}});Object.defineProperty(exports,"parseModifier",{enumerable:true,get:function get(){return _modifiers.parseModifier;}});Object.defineProperty(exports,"parsePlaceholderClass",{enumerable:true,get:function get(){return _placeholder.parsePlaceholderClass;}});Object.defineProperty(exports,"parsePlaceholderClasses",{enumerable:true,get:function get(){return _placeholder.parsePlaceholderClasses;}});Object.defineProperty(exports,"parseShadow",{enumerable:true,get:function get(){return _shadows.parseShadow;}});Object.defineProperty(exports,"parseSizing",{enumerable:true,get:function get(){return _sizing.parseSizing;}});Object.defineProperty(exports,"parseSpacing",{enumerable:true,get:function get(){return _spacing.parseSpacing;}});Object.defineProperty(exports,"parseTransform",{enumerable:true,get:function get(){return _transforms.parseTransform;}});Object.defineProperty(exports,"parseTypography",{enumerable:true,get:function get(){return _typography.parseTypography;}});Object.defineProperty(exports,"splitModifierClasses",{enumerable:true,get:function get(){return _modifiers.splitModifierClasses;}});var _aspectRatio=require("./aspectRatio");var _borders=require("./borders");var _colors=require("./colors");var _layout=require("./layout");var _shadows=require("./shadows");var _sizing=require("./sizing");var _spacing=require("./spacing");var _transforms=require("./transforms");var _typography=require("./typography");var _placeholder=require("./placeholder");var _modifiers=require("./modifiers");function parseClassName(className,customTheme){var classes=className.split(/\s+/).filter(Boolean);var style={};for(var cls of classes){var parsedStyle=parseClass(cls,customTheme);Object.assign(style,parsedStyle);}return style;}function parseClass(cls,customTheme){var parsers=[_spacing.parseSpacing,_borders.parseBorder,function(cls){return(0,_colors.parseColor)(cls,customTheme==null?void 0:customTheme.colors);},_layout.parseLayout,function(cls){return(0,_typography.parseTypography)(cls,customTheme==null?void 0:customTheme.fontFamily);},_sizing.parseSizing,_shadows.parseShadow,_aspectRatio.parseAspectRatio,_transforms.parseTransform];for(var parser of parsers){var result=parser(cls);if(result!==null){return result;}}if(process.env.NODE_ENV!=="production"){console.warn(`[react-native-tailwind] Unknown class: "${cls}"`);}return{};}
@@ -7,5 +7,7 @@ export declare const LETTER_SPACING_SCALE: Record<string, number>;
7
7
  export declare const LINE_HEIGHT_SCALE: Record<string, number>;
8
8
  /**
9
9
  * Parse typography classes
10
+ * @param cls - Class name to parse
11
+ * @param customFontFamily - Optional custom fontFamily from tailwind.config
10
12
  */
11
- export declare function parseTypography(cls: string): StyleObject | null;
13
+ export declare function parseTypography(cls: string, customFontFamily?: Record<string, string>): StyleObject | null;
@@ -1 +1 @@
1
- Object.defineProperty(exports,"__esModule",{value:true});exports.LINE_HEIGHT_SCALE=exports.LETTER_SPACING_SCALE=exports.FONT_SIZES=void 0;exports.parseTypography=parseTypography;var FONT_SIZES=exports.FONT_SIZES={xs:12,sm:14,base:16,lg:18,xl:20,"2xl":24,"3xl":30,"4xl":36,"5xl":48,"6xl":60,"7xl":72,"8xl":96,"9xl":128};var LETTER_SPACING_SCALE=exports.LETTER_SPACING_SCALE={tighter:-0.8,tight:-0.4,normal:0,wide:0.4,wider:0.8,widest:1.6};var FONT_FAMILY_MAP={"font-sans":{fontFamily:"System"},"font-serif":{fontFamily:"serif"},"font-mono":{fontFamily:"Courier"}};var FONT_WEIGHT_MAP={"font-thin":{fontWeight:"100"},"font-extralight":{fontWeight:"200"},"font-light":{fontWeight:"300"},"font-normal":{fontWeight:"400"},"font-medium":{fontWeight:"500"},"font-semibold":{fontWeight:"600"},"font-bold":{fontWeight:"700"},"font-extrabold":{fontWeight:"800"},"font-black":{fontWeight:"900"}};var FONT_STYLE_MAP={italic:{fontStyle:"italic"},"not-italic":{fontStyle:"normal"}};var TEXT_ALIGN_MAP={"text-left":{textAlign:"left"},"text-center":{textAlign:"center"},"text-right":{textAlign:"right"},"text-justify":{textAlign:"justify"}};var TEXT_DECORATION_MAP={underline:{textDecorationLine:"underline"},"line-through":{textDecorationLine:"line-through"},"no-underline":{textDecorationLine:"none"}};var TEXT_TRANSFORM_MAP={uppercase:{textTransform:"uppercase"},lowercase:{textTransform:"lowercase"},capitalize:{textTransform:"capitalize"},"normal-case":{textTransform:"none"}};var LINE_HEIGHT_SCALE=exports.LINE_HEIGHT_SCALE={3:12,4:16,5:20,6:24,7:28,8:32,9:36,10:40};var LINE_HEIGHT_MAP={"leading-none":{lineHeight:16},"leading-tight":{lineHeight:20},"leading-snug":{lineHeight:22},"leading-normal":{lineHeight:24},"leading-relaxed":{lineHeight:28},"leading-loose":{lineHeight:32}};var TRACKING_MAP={"tracking-tighter":{letterSpacing:-0.8},"tracking-tight":{letterSpacing:-0.4},"tracking-normal":{letterSpacing:0},"tracking-wide":{letterSpacing:0.4},"tracking-wider":{letterSpacing:0.8},"tracking-widest":{letterSpacing:1.6}};function parseArbitraryFontSize(value){var pxMatch=value.match(/^\[(\d+)(?:px)?\]$/);if(pxMatch){return parseInt(pxMatch[1],10);}if(value.startsWith("[")&&value.endsWith("]")){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]).`);}return null;}return null;}function parseArbitraryLineHeight(value){var pxMatch=value.match(/^\[(\d+)(?:px)?\]$/);if(pxMatch){return parseInt(pxMatch[1],10);}if(value.startsWith("[")&&value.endsWith("]")){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]).`);}return null;}return null;}function parseTypography(cls){var _ref,_ref2,_ref3,_ref4,_ref5,_ref6,_ref7,_FONT_FAMILY_MAP$cls;if(cls.startsWith("text-")){var sizeKey=cls.substring(5);var arbitraryValue=parseArbitraryFontSize(sizeKey);if(arbitraryValue!==null){return{fontSize:arbitraryValue};}var fontSize=FONT_SIZES[sizeKey];if(fontSize!==undefined){return{fontSize:fontSize};}}if(cls.startsWith("leading-")){var heightKey=cls.substring(8);var _arbitraryValue=parseArbitraryLineHeight(heightKey);if(_arbitraryValue!==null){return{lineHeight:_arbitraryValue};}var lineHeight=LINE_HEIGHT_SCALE[heightKey];if(lineHeight!==undefined){return{lineHeight:lineHeight};}}return(_ref=(_ref2=(_ref3=(_ref4=(_ref5=(_ref6=(_ref7=(_FONT_FAMILY_MAP$cls=FONT_FAMILY_MAP[cls])!=null?_FONT_FAMILY_MAP$cls:FONT_WEIGHT_MAP[cls])!=null?_ref7:FONT_STYLE_MAP[cls])!=null?_ref6:TEXT_ALIGN_MAP[cls])!=null?_ref5:TEXT_DECORATION_MAP[cls])!=null?_ref4:TEXT_TRANSFORM_MAP[cls])!=null?_ref3:LINE_HEIGHT_MAP[cls])!=null?_ref2:TRACKING_MAP[cls])!=null?_ref:null;}
1
+ var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.LINE_HEIGHT_SCALE=exports.LETTER_SPACING_SCALE=exports.FONT_SIZES=void 0;exports.parseTypography=parseTypography;var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var FONT_SIZES=exports.FONT_SIZES={xs:12,sm:14,base:16,lg:18,xl:20,"2xl":24,"3xl":30,"4xl":36,"5xl":48,"6xl":60,"7xl":72,"8xl":96,"9xl":128};var LETTER_SPACING_SCALE=exports.LETTER_SPACING_SCALE={tighter:-0.8,tight:-0.4,normal:0,wide:0.4,wider:0.8,widest:1.6};var FONT_FAMILY_MAP={"font-sans":{fontFamily:"System"},"font-serif":{fontFamily:"serif"},"font-mono":{fontFamily:"Courier"}};var FONT_WEIGHT_MAP={"font-thin":{fontWeight:"100"},"font-extralight":{fontWeight:"200"},"font-light":{fontWeight:"300"},"font-normal":{fontWeight:"400"},"font-medium":{fontWeight:"500"},"font-semibold":{fontWeight:"600"},"font-bold":{fontWeight:"700"},"font-extrabold":{fontWeight:"800"},"font-black":{fontWeight:"900"}};var FONT_STYLE_MAP={italic:{fontStyle:"italic"},"not-italic":{fontStyle:"normal"}};var TEXT_ALIGN_MAP={"text-left":{textAlign:"left"},"text-center":{textAlign:"center"},"text-right":{textAlign:"right"},"text-justify":{textAlign:"justify"}};var TEXT_DECORATION_MAP={underline:{textDecorationLine:"underline"},"line-through":{textDecorationLine:"line-through"},"no-underline":{textDecorationLine:"none"}};var TEXT_TRANSFORM_MAP={uppercase:{textTransform:"uppercase"},lowercase:{textTransform:"lowercase"},capitalize:{textTransform:"capitalize"},"normal-case":{textTransform:"none"}};var LINE_HEIGHT_SCALE=exports.LINE_HEIGHT_SCALE={3:12,4:16,5:20,6:24,7:28,8:32,9:36,10:40};var LINE_HEIGHT_MAP={"leading-none":{lineHeight:16},"leading-tight":{lineHeight:20},"leading-snug":{lineHeight:22},"leading-normal":{lineHeight:24},"leading-relaxed":{lineHeight:28},"leading-loose":{lineHeight:32}};var TRACKING_MAP={"tracking-tighter":{letterSpacing:-0.8},"tracking-tight":{letterSpacing:-0.4},"tracking-normal":{letterSpacing:0},"tracking-wide":{letterSpacing:0.4},"tracking-wider":{letterSpacing:0.8},"tracking-widest":{letterSpacing:1.6}};function parseArbitraryFontSize(value){var pxMatch=value.match(/^\[(\d+)(?:px)?\]$/);if(pxMatch){return parseInt(pxMatch[1],10);}if(value.startsWith("[")&&value.endsWith("]")){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]).`);}return null;}return null;}function parseArbitraryLineHeight(value){var pxMatch=value.match(/^\[(\d+)(?:px)?\]$/);if(pxMatch){return parseInt(pxMatch[1],10);}if(value.startsWith("[")&&value.endsWith("]")){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]).`);}return null;}return null;}function parseTypography(cls,customFontFamily){var _ref3,_ref4,_ref5,_ref6,_ref7,_ref8,_ref9,_fontFamilyMap$cls;var fontFamilyMap=customFontFamily?Object.assign({},FONT_FAMILY_MAP,Object.fromEntries(Object.entries(customFontFamily).map(function(_ref){var _ref2=(0,_slicedToArray2.default)(_ref,2),key=_ref2[0],value=_ref2[1];return[`font-${key}`,{fontFamily:value}];}))):FONT_FAMILY_MAP;if(cls.startsWith("text-")){var sizeKey=cls.substring(5);var arbitraryValue=parseArbitraryFontSize(sizeKey);if(arbitraryValue!==null){return{fontSize:arbitraryValue};}var fontSize=FONT_SIZES[sizeKey];if(fontSize!==undefined){return{fontSize:fontSize};}}if(cls.startsWith("leading-")){var heightKey=cls.substring(8);var _arbitraryValue=parseArbitraryLineHeight(heightKey);if(_arbitraryValue!==null){return{lineHeight:_arbitraryValue};}var lineHeight=LINE_HEIGHT_SCALE[heightKey];if(lineHeight!==undefined){return{lineHeight:lineHeight};}}return(_ref3=(_ref4=(_ref5=(_ref6=(_ref7=(_ref8=(_ref9=(_fontFamilyMap$cls=fontFamilyMap[cls])!=null?_fontFamilyMap$cls:FONT_WEIGHT_MAP[cls])!=null?_ref9:FONT_STYLE_MAP[cls])!=null?_ref8:TEXT_ALIGN_MAP[cls])!=null?_ref7:TEXT_DECORATION_MAP[cls])!=null?_ref6:TEXT_TRANSFORM_MAP[cls])!=null?_ref5:LINE_HEIGHT_MAP[cls])!=null?_ref4:TRACKING_MAP[cls])!=null?_ref3:null;}