Skip to content

Commit

Permalink
Ensure browser package does not pollute global namespace (#15978)
Browse files Browse the repository at this point in the history
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"
/>
  • Loading branch information
philipp-spiess authored Jan 28, 2025
1 parent b009afa commit 82ddc24
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 4 deletions.
6 changes: 3 additions & 3 deletions packages/@tailwindcss-browser/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -19,7 +19,7 @@
"test:ui": "playwright test"
},
"exports": {
".": "./dist/index.mjs",
".": "./dist/index.global.js",
"./package.json": "./package.json"
},
"files": [
Expand Down
2 changes: 1 addition & 1 deletion packages/@tailwindcss-browser/tsup.config.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { defineConfig } from 'tsup'

export default defineConfig({
format: ['esm'],
format: ['iife'],
clean: true,
minify: true,
entry: ['src/index.ts'],
Expand Down

0 comments on commit 82ddc24

Please sign in to comment.