@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.
- package/README.md +30 -13
- package/dist/babel/config-loader.d.ts +12 -3
- package/dist/babel/config-loader.test.ts +14 -12
- package/dist/babel/config-loader.ts +41 -9
- package/dist/babel/index.cjs +50 -27
- package/dist/babel/plugin.d.ts +2 -1
- package/dist/babel/plugin.ts +11 -10
- package/dist/babel/utils/colorSchemeModifierProcessing.d.ts +3 -3
- package/dist/babel/utils/colorSchemeModifierProcessing.ts +4 -4
- package/dist/babel/utils/dynamicProcessing.d.ts +5 -5
- package/dist/babel/utils/dynamicProcessing.ts +11 -11
- package/dist/babel/utils/modifierProcessing.d.ts +3 -3
- package/dist/babel/utils/modifierProcessing.ts +5 -5
- package/dist/babel/utils/platformModifierProcessing.d.ts +3 -3
- package/dist/babel/utils/platformModifierProcessing.ts +4 -4
- package/dist/babel/utils/twProcessing.d.ts +3 -3
- package/dist/babel/utils/twProcessing.ts +6 -6
- package/dist/parser/index.d.ts +11 -4
- package/dist/parser/index.js +1 -1
- package/dist/parser/typography.d.ts +3 -1
- package/dist/parser/typography.js +1 -1
- package/dist/runtime.cjs +1 -1
- package/dist/runtime.cjs.map +3 -3
- package/dist/runtime.d.ts +8 -1
- package/dist/runtime.js +1 -1
- package/dist/runtime.js.map +3 -3
- package/dist/runtime.test.js +1 -1
- package/package.json +1 -1
- package/src/babel/config-loader.test.ts +14 -12
- package/src/babel/config-loader.ts +41 -9
- package/src/babel/plugin.ts +11 -10
- package/src/babel/utils/colorSchemeModifierProcessing.ts +4 -4
- package/src/babel/utils/dynamicProcessing.ts +11 -11
- package/src/babel/utils/modifierProcessing.ts +5 -5
- package/src/babel/utils/platformModifierProcessing.ts +4 -4
- package/src/babel/utils/twProcessing.ts +6 -6
- package/src/parser/index.ts +16 -8
- package/src/parser/typography.ts +14 -2
- package/src/runtime.test.ts +7 -7
- 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
|
-
|
|
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,
|
|
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.
|
|
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
|
-
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
-
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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,
|
|
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
|
-
|
|
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,
|
|
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.
|
|
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.
|
|
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
|
-
|
|
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,
|
|
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
|
-
|
|
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,
|
|
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.
|
|
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
|
-
|
|
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,
|
|
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
|
-
|
|
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,
|
|
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.
|
|
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.
|
|
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.
|
|
92
|
+
const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);
|
|
93
93
|
const modifierStyleKey = generateStyleKey(`${modifierType}_${modifierClassNames}`);
|
|
94
94
|
state.styleRegistry.set(modifierStyleKey, modifierStyleObject);
|
|
95
95
|
|
package/dist/parser/index.d.ts
CHANGED
|
@@ -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
|
|
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,
|
|
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
|
|
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,
|
|
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";
|
package/dist/parser/index.js
CHANGED
|
@@ -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,
|
|
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
|
|
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;}
|