From 82ddc249c3d46756f4e9b33b1803f6adee2bbbc8 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Tue, 28 Jan 2025 16:58:08 +0100
Subject: [PATCH] Ensure browser package does not pollute global namespace
 (#15978)

Resolves #15977

Our `@tailwindcss/browser` build is intended to run inside a `<script>`
tag inside browsers. Because of how variable assignment within
`<script>` tags work, all variables that were defined within that script
are currently assigned on the global namespace.

This is especially troublesome as eslint uses `$` as a valid mangling
character so importing the CDN build would now redefine `globalThis.$`
which collides with many very popular JavaScript libraries.

In order to avoid polluting the global namespace, this PR changes the
build step to emit an IIFE (so all vars defined are scroped to the
function closure instead of the global namespace).

## Test plan

- Ensure UI tests still work
- <img width="533" alt="Screenshot 2025-01-28 at 16 49 27"
src="https://github.com/user-attachments/assets/1e027451-f58b-4252-bf97-c016a90eb78b"
/>
---
 packages/@tailwindcss-browser/package.json   | 6 +++---
 packages/@tailwindcss-browser/tsup.config.ts | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/@tailwindcss-browser/package.json b/packages/@tailwindcss-browser/package.json
index 420c2faf7..aef639cf3 100644
--- a/packages/@tailwindcss-browser/package.json
+++ b/packages/@tailwindcss-browser/package.json
@@ -3,8 +3,8 @@
   "version": "4.0.0",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
-  "main": "./dist/index.mjs",
-  "browser": "./dist/index.mjs",
+  "main": "./dist/index.global.js",
+  "browser": "./dist/index.global.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/tailwindlabs/tailwindcss.git",
@@ -19,7 +19,7 @@
     "test:ui": "playwright test"
   },
   "exports": {
-    ".": "./dist/index.mjs",
+    ".": "./dist/index.global.js",
     "./package.json": "./package.json"
   },
   "files": [
diff --git a/packages/@tailwindcss-browser/tsup.config.ts b/packages/@tailwindcss-browser/tsup.config.ts
index 57fa6d7dc..5a6d78273 100644
--- a/packages/@tailwindcss-browser/tsup.config.ts
+++ b/packages/@tailwindcss-browser/tsup.config.ts
@@ -1,7 +1,7 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-  format: ['esm'],
+  format: ['iife'],
   clean: true,
   minify: true,
   entry: ['src/index.ts'],