chore: update tailwind to v4.x - #913
Draft
jimhigson wants to merge 1 commit into
Draft
Conversation
✅ Deploy Preview for blockstack ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
|
Size Change: +1.88 kB (+0.12%) Total Size: 1.56 MB 📦 View Changed
ℹ️ View Unchanged
|
Contributor
|
Size Change: +1.84 kB (+0.07%) Total Size: 2.48 MB 📦 View Changed
ℹ️ View Unchanged
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates the project from Tailwind v3 to Tailwind v4 while preserving existing rendering behavior by moving the bespoke sizing/spacing and sprite-utility generation onto v4’s new CSS-first configuration and scanner model.
Changes:
- Replaces JS-config spacing/size tables and safelist config with a CSS-driven length scale (
@theme inline) plus generated@source inline(...)safelist. - Ports the custom sprites Tailwind plugin to v4 (escaping, cascade-layer behavior, and keyframes emission).
- Updates markdown image syntax + markdown rendering to use space-separated class tokens that v4 can scan.
Reviewed changes
Copilot reviewed 52 out of 104 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| tailwind.config.ts | Removes v3-only config (custom spacing/size tables, safelist) and keeps only v4-compatible theme/plugin wiring. |
| src/ui/Select.tsx | Updates arbitrary width utility syntax for v4. |
| src/tailwind/plugins/spritesTailwindPlugin.ts | Ports sprite utility generation to v4 (escaping helper, keyframes moved to base, utility-layer override strategy). |
| src/tailwind/lengthScale.css | Introduces v4 length-scale via @theme inline and named scale variables (spacing/width/height/max-width). |
| src/tailwind/escapeClassName.ts | Adds a Tailwind-v3-compatible selector escaping helper for plugin output stability. |
| src/sprites/spritesheet/spritesheetData/snapshots/makeSpritesheetdata.test.ts.snap | Re-baselines snapshot output after glyph/texture-id escaping changes. |
| src/sprites/escapeCharForTailwind.ts | Expands escaping/replacement rules and adds codepoint-based encoding for v4-safe class/utility names. |
| src/pages/spritesPage/SpriteTile.tsx | Removes w-min to avoid v4 ordering issues with .sprite width. |
| src/pages/spritesPage/SpritesheetImage.tsx | Removes w-min from sprite previews to match v4 utility ordering behavior. |
| src/pages/spritesPage/AnimationTile.tsx | Removes w-min from animation tiles to prevent width overrides under v4. |
| src/manual/theGame.md | Converts markdown image “URL params” to space-separated classes for v4 scanning. |
| src/manual/theEmperorsGuardian.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/teleports.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/teleportBack.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/switches.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/springs.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/safari.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/returnOfTheEmpire2.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/reincarnationFish.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/penitentiary.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/hushPuppies.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/hooter.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/historyOfTheBlacktoothEmpire.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/hintsAndTips.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/heels.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/head.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/egyptus.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/doughnuts.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/cuddlyStuffedWhiteRabbits.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/crowns.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/conveyorBelts.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/bookWorld.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/blacktooth.md | Converts markdown image class encoding to space-separated tokens. |
| src/manual/bag.md | Converts markdown image class encoding to space-separated tokens. |
| src/index.css | Switches to v4 CSS entry (@import "tailwindcss", @config, @source), imports safelist + length scale, converts a component class to @utility. |
| src/game/render/text/TextContainer.test.ts | Updates mock to compute missing-glyph IDs via the same escaping logic used in production. |
| src/game/render/hud/HudRenderer.ts | Updates HUD glyph texture IDs to use escaped/encoded IDs via escapeCharForTailwind. |
| src/game/components/tailwindSprites/SanitiseForClassName.ts | Tightens sanitisation to v4-safe class token charset by codepoint-encoding remaining unsafe characters. |
| src/game/components/dialogs/menuDialog/dialogs/sureWantEditor/SureWantEditorDialog.tsx | Updates inline markdown image syntax to space-separated class tokens. |
| src/game/components/dialogs/menuDialog/dialogs/offerReincarnation/OfferReincarnationDialog.tsx | Updates inline markdown image syntax to space-separated class tokens. |
| src/game/components/dialogs/menuDialog/dialogs/MenuItemLeader.tsx | Avoids conflicting display utilities (inline-block vs flex) under v4 utility ordering. |
| src/game/components/dialogs/menuDialog/dialogs/displayOptions/SpritesOptionMenuItem.tsx | Updates generated markdown image syntax to space-separated tokens. |
| src/game/components/dialogs/menuDialog/dialogs/crowns/FiveCrownsDisplay.tsx | Replaces old negative spacing tokens (left-m10) with v4-style -left-10 etc. |
| src/game/components/dialogs/menuDialog/dialogs/communityGames/CommunityGamesDialog.tsx | Replaces theme(width.3) with v4-friendly spacing function usage for leader column sizing. |
| src/game/components/dialogs/dialogClasses.ts | Same leader-column width update to v4-friendly spacing function usage. |
| src/game/components/cheats/Cheats.tsx | Uses escaped HUD glyph texture class IDs and replaces old negative spacing tokens with v4 style. |
| src/game/components/BlockyMarkdown.tsx | Changes markdown <img> “src as classes” parsing to whitespace tokenization for v4 scanning. |
| src/editor/toolbar/saving/SaveAndLoadButtons.tsx | Uses escaped HUD glyph texture class IDs for v4-safe selectors. |
| src/editor/toolbar/buttons/AddAndDeleteRoomButtons.tsx | Updates HUD “plus” glyph texture class to the new escaped naming. |
| src/editor/postcss.config.js | Updates editor PostCSS config to use @tailwindcss/postcss for Tailwind v4. |
| src/editor/index.css | Migrates editor CSS entrypoint to v4 CSS-first setup and adds markdown @source scanning. |
| src/_generated/tailwindSafelist.css | Adds generated @source inline(...) entries replacing v3 safelist behavior. |
| src/_generated/originalCampaign/rooms/blacktooth0switches.ts | Updates generated scroll markdown image class encoding to space-separated tokens. |
| src/_generated/originalCampaign/new-rooms/switch_room_scroll.md | Updates generated scroll markdown image class encoding to space-separated tokens. |
| src/_generated/originalCampaign/new-rooms/blacktooth0switches.json | Updates generated scroll markdown image class encoding to space-separated tokens. |
| scripts/genTailwindSafelist.ts | New generator to emit v4 @source inline(...) safelist CSS. |
| postcss.config.js | Updates root PostCSS config to use @tailwindcss/postcss plugin entry for Tailwind v4. |
| pnpm-lock.yaml | Updates lockfile for Tailwind v4 and related dependency changes. |
| package.json | Bumps Tailwind ecosystem deps and adds gen:tailwindSafelist script. |
| e2e/spritesPage.spec.ts-snapshots/chromium-desktop/texture-ids-list.json | Re-baselines texture-id list snapshot to reflect escaped/encoded glyph IDs. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
jimhigson
commented
Jun 5, 2026
| @config "../../tailwind.config.ts"; | ||
| /* markdown manual/scroll pages aren't auto-scanned by v4; their per-image | ||
| classes (float-right etc., space-separated in image srcs) live only here */ | ||
| @source "../**/*.md"; |
Owner
Author
There was a problem hiding this comment.
seems too wide - do we need it so wide or only inside the manual dir?
jimhigson
changed the title
jimhigson
marked this pull request as draft
July 7, 2026 21:17
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.