fix: define the global variable during babel transform

The global variables previously relied on being defined inside context.ts. However inlineRequires will cause the global variables to defined after use - causing a runtime error. This defined the variables as they are used, so it doesn't matter in which order the files are loaded. Fix: #60
2026-06-15 10:17:54 +08:00 · 2022-05-27 14:55:25 +10:00
parent a72a08aeca
commit 1edda15988
14 changed files with 157 additions and 91 deletions
--- 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() {
    </TailwindProvider>
  );
 }
-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 || {},
+  {}
+);
--- a/tests/visitor/allow-modules/output.tsx
+++ b/tests/visitor/allow-modules/output.tsx
@@ -15,8 +15,8 @@ export function Test() {
    </TailwindProvider>
  );
 }
-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)"]],
+    ],
+  }
+);
--- a/tests/visitor/basic-tw/output.tsx
+++ b/tests/visitor/basic-tw/output.tsx
@@ -13,8 +13,8 @@ export function Test() {
    </TailwindProvider>
  );
 }
-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)"]],
+    ],
+  }
+);
--- a/tests/visitor/basic/output.tsx
+++ b/tests/visitor/basic/output.tsx
@@ -13,8 +13,8 @@ export function Test() {
    </TailwindProvider>
  );
 }
-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)"]],
+    ],
+  }
+);
--- 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 || {},
+  {}
+);
--- a/tests/visitor/className-expression/output.tsx
+++ b/tests/visitor/className-expression/output.tsx
@@ -14,8 +14,8 @@ export function Test({ isBold, isUnderline }) {
    </TailwindProvider>
  );
 }
-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 || {},
+  {}
+);
--- a/tests/visitor/compile-only/output.tsx
+++ b/tests/visitor/compile-only/output.tsx
@@ -10,8 +10,8 @@ export function Test() {
    </TailwindProvider>
  );
 }
-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)"]],
+    ],
+  }
+);
--- 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 || {},
+  {}
+);
--- 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 || {},
+  {}
+);
--- 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 || {},
+  {}
+);
--- 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 || {},
+  {}
+);
--- a/tests/visitor/empty-className/output.tsx
+++ b/tests/visitor/empty-className/output.tsx
@@ -11,5 +11,11 @@ export function Test() {
    </TailwindProvider>
  );
 }
-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 || {},
+  {}
+);
--- 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 || {},
+  {}
+);
--- 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),
+          ]
+        )
      )
    )
  );