diff --git a/__tests__/visitor/allow-modules-with-content/output.tsx b/__tests__/visitor/allow-modules-with-content/output.tsx index ee8342a..961be46 100644 --- a/__tests__/visitor/allow-modules-with-content/output.tsx +++ b/__tests__/visitor/allow-modules-with-content/output.tsx @@ -17,12 +17,15 @@ export function Test() { ); } -Object.assign( - globalThis.tailwindcss_react_native_style, +globalThis.tailwindcss_react_native_style = Object.assign( + globalThis.tailwindcss_react_native_style || {}, StyleSheet.create({ "font-bold": { fontWeight: "700", }, }) ); -Object.assign(globalThis.tailwindcss_react_native_media, {}); +globalThis.tailwindcss_react_native_media = Object.assign( + globalThis.tailwindcss_react_native_media || {}, + {} +); diff --git a/__tests__/visitor/allow-modules/output.tsx b/__tests__/visitor/allow-modules/output.tsx index c709f15..3257c4e 100644 --- a/__tests__/visitor/allow-modules/output.tsx +++ b/__tests__/visitor/allow-modules/output.tsx @@ -15,8 +15,8 @@ export function Test() { ); } -Object.assign( - globalThis.tailwindcss_react_native_style, +globalThis.tailwindcss_react_native_style = Object.assign( + globalThis.tailwindcss_react_native_style || {}, StyleSheet.create({ container: { width: "100%", @@ -41,12 +41,15 @@ Object.assign( }, }) ); -Object.assign(globalThis.tailwindcss_react_native_media, { - container: [ - [["media", "(min-width: 640px)"]], - [["media", "(min-width: 768px)"]], - [["media", "(min-width: 1024px)"]], - [["media", "(min-width: 1280px)"]], - [["media", "(min-width: 1536px)"]], - ], -}); +globalThis.tailwindcss_react_native_media = Object.assign( + globalThis.tailwindcss_react_native_media || {}, + { + container: [ + [["media", "(min-width: 640px)"]], + [["media", "(min-width: 768px)"]], + [["media", "(min-width: 1024px)"]], + [["media", "(min-width: 1280px)"]], + [["media", "(min-width: 1536px)"]], + ], + } +); diff --git a/__tests__/visitor/basic-tw/output.tsx b/__tests__/visitor/basic-tw/output.tsx index 74b1180..a005053 100644 --- a/__tests__/visitor/basic-tw/output.tsx +++ b/__tests__/visitor/basic-tw/output.tsx @@ -13,8 +13,8 @@ export function Test() { ); } -Object.assign( - globalThis.tailwindcss_react_native_style, +globalThis.tailwindcss_react_native_style = Object.assign( + globalThis.tailwindcss_react_native_style || {}, StyleSheet.create({ container: { width: "100%", @@ -39,12 +39,15 @@ Object.assign( }, }) ); -Object.assign(globalThis.tailwindcss_react_native_media, { - container: [ - [["media", "(min-width: 640px)"]], - [["media", "(min-width: 768px)"]], - [["media", "(min-width: 1024px)"]], - [["media", "(min-width: 1280px)"]], - [["media", "(min-width: 1536px)"]], - ], -}); +globalThis.tailwindcss_react_native_media = Object.assign( + globalThis.tailwindcss_react_native_media || {}, + { + container: [ + [["media", "(min-width: 640px)"]], + [["media", "(min-width: 768px)"]], + [["media", "(min-width: 1024px)"]], + [["media", "(min-width: 1280px)"]], + [["media", "(min-width: 1536px)"]], + ], + } +); diff --git a/__tests__/visitor/basic/output.tsx b/__tests__/visitor/basic/output.tsx index d226f99..15ead5a 100644 --- a/__tests__/visitor/basic/output.tsx +++ b/__tests__/visitor/basic/output.tsx @@ -13,8 +13,8 @@ export function Test() { ); } -Object.assign( - globalThis.tailwindcss_react_native_style, +globalThis.tailwindcss_react_native_style = Object.assign( + globalThis.tailwindcss_react_native_style || {}, StyleSheet.create({ container: { width: "100%", @@ -39,12 +39,15 @@ Object.assign( }, }) ); -Object.assign(globalThis.tailwindcss_react_native_media, { - container: [ - [["media", "(min-width: 640px)"]], - [["media", "(min-width: 768px)"]], - [["media", "(min-width: 1024px)"]], - [["media", "(min-width: 1280px)"]], - [["media", "(min-width: 1536px)"]], - ], -}); +globalThis.tailwindcss_react_native_media = Object.assign( + globalThis.tailwindcss_react_native_media || {}, + { + container: [ + [["media", "(min-width: 640px)"]], + [["media", "(min-width: 768px)"]], + [["media", "(min-width: 1024px)"]], + [["media", "(min-width: 1280px)"]], + [["media", "(min-width: 1536px)"]], + ], + } +); diff --git a/__tests__/visitor/block-modules/output.tsx b/__tests__/visitor/block-modules/output.tsx index 4f5f882..84736bd 100644 --- a/__tests__/visitor/block-modules/output.tsx +++ b/__tests__/visitor/block-modules/output.tsx @@ -12,12 +12,15 @@ export function Test() { ); } -Object.assign( - globalThis.tailwindcss_react_native_style, +globalThis.tailwindcss_react_native_style = Object.assign( + globalThis.tailwindcss_react_native_style || {}, StyleSheet.create({ "font-bold": { fontWeight: "700", }, }) ); -Object.assign(globalThis.tailwindcss_react_native_media, {}); +globalThis.tailwindcss_react_native_media = Object.assign( + globalThis.tailwindcss_react_native_media || {}, + {} +); diff --git a/__tests__/visitor/className-expression/output.tsx b/__tests__/visitor/className-expression/output.tsx index 752fb89..f99133e 100644 --- a/__tests__/visitor/className-expression/output.tsx +++ b/__tests__/visitor/className-expression/output.tsx @@ -14,8 +14,8 @@ export function Test({ isBold, isUnderline }) { ); } -Object.assign( - globalThis.tailwindcss_react_native_style, +globalThis.tailwindcss_react_native_style = Object.assign( + globalThis.tailwindcss_react_native_style || {}, StyleSheet.create({ "font-bold": { fontWeight: "700", @@ -25,4 +25,7 @@ Object.assign( }, }) ); -Object.assign(globalThis.tailwindcss_react_native_media, {}); +globalThis.tailwindcss_react_native_media = Object.assign( + globalThis.tailwindcss_react_native_media || {}, + {} +); diff --git a/__tests__/visitor/compile-only/output.tsx b/__tests__/visitor/compile-only/output.tsx index fe7c143..7c739ca 100644 --- a/__tests__/visitor/compile-only/output.tsx +++ b/__tests__/visitor/compile-only/output.tsx @@ -10,8 +10,8 @@ export function Test() { ); } -Object.assign( - globalThis.tailwindcss_react_native_style, +globalThis.tailwindcss_react_native_style = Object.assign( + globalThis.tailwindcss_react_native_style || {}, StyleSheet.create({ container: { width: "100%", @@ -36,12 +36,15 @@ Object.assign( }, }) ); -Object.assign(globalThis.tailwindcss_react_native_media, { - container: [ - [["media", "(min-width: 640px)"]], - [["media", "(min-width: 768px)"]], - [["media", "(min-width: 1024px)"]], - [["media", "(min-width: 1280px)"]], - [["media", "(min-width: 1536px)"]], - ], -}); +globalThis.tailwindcss_react_native_media = Object.assign( + globalThis.tailwindcss_react_native_media || {}, + { + container: [ + [["media", "(min-width: 640px)"]], + [["media", "(min-width: 768px)"]], + [["media", "(min-width: 1024px)"]], + [["media", "(min-width: 1280px)"]], + [["media", "(min-width: 1536px)"]], + ], + } +); diff --git a/__tests__/visitor/content-directory-no-index/output.tsx b/__tests__/visitor/content-directory-no-index/output.tsx index f647216..6c5e7c0 100644 --- a/__tests__/visitor/content-directory-no-index/output.tsx +++ b/__tests__/visitor/content-directory-no-index/output.tsx @@ -12,8 +12,8 @@ export function Test() { ); } -Object.assign( - globalThis.tailwindcss_react_native_style, +globalThis.tailwindcss_react_native_style = Object.assign( + globalThis.tailwindcss_react_native_style || {}, StyleSheet.create({ "font-bold": { fontWeight: "700", @@ -23,4 +23,7 @@ Object.assign( }, }) ); -Object.assign(globalThis.tailwindcss_react_native_media, {}); +globalThis.tailwindcss_react_native_media = Object.assign( + globalThis.tailwindcss_react_native_media || {}, + {} +); diff --git a/__tests__/visitor/content-directory/output.tsx b/__tests__/visitor/content-directory/output.tsx index f647216..6c5e7c0 100644 --- a/__tests__/visitor/content-directory/output.tsx +++ b/__tests__/visitor/content-directory/output.tsx @@ -12,8 +12,8 @@ export function Test() { ); } -Object.assign( - globalThis.tailwindcss_react_native_style, +globalThis.tailwindcss_react_native_style = Object.assign( + globalThis.tailwindcss_react_native_style || {}, StyleSheet.create({ "font-bold": { fontWeight: "700", @@ -23,4 +23,7 @@ Object.assign( }, }) ); -Object.assign(globalThis.tailwindcss_react_native_media, {}); +globalThis.tailwindcss_react_native_media = Object.assign( + globalThis.tailwindcss_react_native_media || {}, + {} +); diff --git a/__tests__/visitor/content-ignore-unmatched-relative-import/output.tsx b/__tests__/visitor/content-ignore-unmatched-relative-import/output.tsx index 9a558ff..b2c1e3a 100644 --- a/__tests__/visitor/content-ignore-unmatched-relative-import/output.tsx +++ b/__tests__/visitor/content-ignore-unmatched-relative-import/output.tsx @@ -12,12 +12,15 @@ export function Test() { ); } -Object.assign( - globalThis.tailwindcss_react_native_style, +globalThis.tailwindcss_react_native_style = Object.assign( + globalThis.tailwindcss_react_native_style || {}, StyleSheet.create({ "font-bold": { fontWeight: "700", }, }) ); -Object.assign(globalThis.tailwindcss_react_native_media, {}); +globalThis.tailwindcss_react_native_media = Object.assign( + globalThis.tailwindcss_react_native_media || {}, + {} +); diff --git a/__tests__/visitor/content-positive-match/output.tsx b/__tests__/visitor/content-positive-match/output.tsx index ade2571..e9e8e33 100644 --- a/__tests__/visitor/content-positive-match/output.tsx +++ b/__tests__/visitor/content-positive-match/output.tsx @@ -12,8 +12,8 @@ export function Test() { ); } -Object.assign( - globalThis.tailwindcss_react_native_style, +globalThis.tailwindcss_react_native_style = Object.assign( + globalThis.tailwindcss_react_native_style || {}, StyleSheet.create({ "font-bold": { fontWeight: "700", @@ -23,4 +23,7 @@ Object.assign( }, }) ); -Object.assign(globalThis.tailwindcss_react_native_media, {}); +globalThis.tailwindcss_react_native_media = Object.assign( + globalThis.tailwindcss_react_native_media || {}, + {} +); diff --git a/__tests__/visitor/empty-className/output.tsx b/__tests__/visitor/empty-className/output.tsx index af26808..871e20b 100644 --- a/__tests__/visitor/empty-className/output.tsx +++ b/__tests__/visitor/empty-className/output.tsx @@ -11,5 +11,11 @@ export function Test() { ); } -Object.assign(globalThis.tailwindcss_react_native_style, StyleSheet.create({})); -Object.assign(globalThis.tailwindcss_react_native_media, {}); +globalThis.tailwindcss_react_native_style = Object.assign( + globalThis.tailwindcss_react_native_style || {}, + StyleSheet.create({}) +); +globalThis.tailwindcss_react_native_media = Object.assign( + globalThis.tailwindcss_react_native_media || {}, + {} +); diff --git a/__tests__/visitor/existing-style/output.tsx b/__tests__/visitor/existing-style/output.tsx index daf1e62..f7a6cbf 100644 --- a/__tests__/visitor/existing-style/output.tsx +++ b/__tests__/visitor/existing-style/output.tsx @@ -19,12 +19,15 @@ const styles = StyleSheet.create({ color: "blue", }, }); -Object.assign( - globalThis.tailwindcss_react_native_style, +globalThis.tailwindcss_react_native_style = Object.assign( + globalThis.tailwindcss_react_native_style || {}, StyleSheet.create({ "font-bold": { fontWeight: "700", }, }) ); -Object.assign(globalThis.tailwindcss_react_native_media, {}); +globalThis.tailwindcss_react_native_media = Object.assign( + globalThis.tailwindcss_react_native_media || {}, + {} +); diff --git a/src/babel/transforms/append-variables.ts b/src/babel/transforms/append-variables.ts index 34de305..eb31854 100644 --- a/src/babel/transforms/append-variables.ts +++ b/src/babel/transforms/append-variables.ts @@ -1,10 +1,12 @@ import { arrayExpression, + assignmentExpression, booleanLiteral, callExpression, Expression, expressionStatement, identifier, + logicalExpression, memberExpression, nullLiteral, numericLiteral, @@ -23,30 +25,52 @@ export function appendVariables(body: Statement[], styleRecord: StyleRecord) { body.push( expressionStatement( - callExpression( - memberExpression(identifier("Object"), identifier("assign")), - [ - memberExpression( - identifier("globalThis"), - identifier("tailwindcss_react_native_style") - ), - callExpression( - memberExpression(identifier("StyleSheet"), identifier("create")), - [serialize(styles)] - ), - ] + assignmentExpression( + "=", + memberExpression( + identifier("globalThis"), + identifier("tailwindcss_react_native_style") + ), + callExpression( + memberExpression(identifier("Object"), identifier("assign")), + [ + logicalExpression( + "||", + memberExpression( + identifier("globalThis"), + identifier("tailwindcss_react_native_style") + ), + identifier("{}") + ), + callExpression( + memberExpression(identifier("StyleSheet"), identifier("create")), + [serialize(styles)] + ), + ] + ) ) ), expressionStatement( - callExpression( - memberExpression(identifier("Object"), identifier("assign")), - [ - memberExpression( - identifier("globalThis"), - identifier("tailwindcss_react_native_media") - ), - serialize(media), - ] + assignmentExpression( + "=", + memberExpression( + identifier("globalThis"), + identifier("tailwindcss_react_native_media") + ), + callExpression( + memberExpression(identifier("Object"), identifier("assign")), + [ + logicalExpression( + "||", + memberExpression( + identifier("globalThis"), + identifier("tailwindcss_react_native_media") + ), + identifier("{}") + ), + serialize(media), + ] + ) ) ) );