Mark break-words as deprecated, and upgrade to wrap-break-word#19157
Merged
RobinMalfait merged 4 commits intomainfrom Oct 20, 2025
Merged
Mark break-words as deprecated, and upgrade to wrap-break-word#19157RobinMalfait merged 4 commits intomainfrom
break-words as deprecated, and upgrade to wrap-break-word#19157RobinMalfait merged 4 commits intomainfrom
Conversation
thecrypticace
approved these changes
Oct 20, 2025
This was referenced Oct 21, 2025
ch4og
pushed a commit
to csmplay/mapban
that referenced
this pull request
Nov 18, 2025
This PR contains the following updates: | Package | Change | Age | Confidence | |---|---|---|---| | [@tailwindcss/postcss](https://tailwindcss.com) ([source](https://github.com/tailwindlabs/tailwindcss/tree/HEAD/packages/@tailwindcss-postcss)) | [`4.1.12` -> `4.1.17`](https://renovatebot.com/diffs/npm/@tailwindcss%2fpostcss/4.1.12/4.1.17) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>tailwindlabs/tailwindcss (@​tailwindcss/postcss)</summary> ### [`v4.1.17`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4117---2025-11-06) [Compare Source](tailwindlabs/tailwindcss@v4.1.16...v4.1.17) ##### Fixed - Substitute `@variant` inside legacy JS APIs ([#​19263](tailwindlabs/tailwindcss#19263)) - Prevent occasional crash on Windows when loaded into a worker thread ([#​19242](tailwindlabs/tailwindcss#19242)) ### [`v4.1.16`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4116---2025-10-23) [Compare Source](tailwindlabs/tailwindcss@v4.1.15...v4.1.16) ##### Fixed - Discard candidates with an empty data type ([#​19172](tailwindlabs/tailwindcss#19172)) - Fix canonicalization of arbitrary variants with attribute selectors ([#​19176](tailwindlabs/tailwindcss#19176)) - Fix invalid colors due to nested `&` ([#​19184](tailwindlabs/tailwindcss#19184)) - Improve canonicalization for `& > :pseudo` and `& :pseudo` arbitrary variants ([#​19178](tailwindlabs/tailwindcss#19178)) ### [`v4.1.15`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4115---2025-10-20) [Compare Source](tailwindlabs/tailwindcss@v4.1.14...v4.1.15) ##### Fixed - Fix Safari devtools rendering issue due to `color-mix` fallback ([#​19069](tailwindlabs/tailwindcss#19069)) - Suppress Lightning CSS warnings about `:deep`, `:slotted`, and `:global` ([#​19094](tailwindlabs/tailwindcss#19094)) - Fix resolving theme keys when starting with the name of another theme key in JS configs and plugins ([#​19097](tailwindlabs/tailwindcss#19097)) - Allow named groups in combination with `not-*`, `has-*`, and `in-*` ([#​19100](tailwindlabs/tailwindcss#19100)) - Prevent important utilities from affecting other utilities ([#​19110](tailwindlabs/tailwindcss#19110)) - Don’t index into strings with the `theme(…)` function ([#​19111](tailwindlabs/tailwindcss#19111)) - Fix parsing issue when `\t` is used in at-rules ([#​19130](tailwindlabs/tailwindcss#19130)) - Upgrade: Canonicalize utilities containing `0` values ([#​19095](tailwindlabs/tailwindcss#19095)) - Upgrade: Migrate deprecated `break-words` to `wrap-break-word` ([#​19157](tailwindlabs/tailwindcss#19157)) ##### Changed - Remove the `postinstall` script from oxide (\[[#​19149](https://github.com/tailwindlabs/tailwindcss/issues/19149)])([#​19149](https://github.com/tailwindlabs/tailwindcss/pull/19149)) ### [`v4.1.14`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4114---2025-10-01) [Compare Source](tailwindlabs/tailwindcss@v4.1.13...v4.1.14) ##### Fixed - Handle `'` syntax in ClojureScript when extracting classes ([#​18888](tailwindlabs/tailwindcss#18888)) - Handle `@variant` inside `@custom-variant` ([#​18885](tailwindlabs/tailwindcss#18885)) - Merge suggestions when using `@utility` ([#​18900](tailwindlabs/tailwindcss#18900)) - Ensure that file system watchers created when using the CLI are always cleaned up ([#​18905](tailwindlabs/tailwindcss#18905)) - Do not generate `grid-column` utilities when configuring `grid-column-start` or `grid-column-end` ([#​18907](tailwindlabs/tailwindcss#18907)) - Do not generate `grid-row` utilities when configuring `grid-row-start` or `grid-row-end` ([#​18907](tailwindlabs/tailwindcss#18907)) - Prevent duplicate CSS when overwriting a static utility with a theme key ([#​18056](tailwindlabs/tailwindcss#18056)) - Show Lightning CSS warnings (if any) when optimizing/minifying ([#​18918](tailwindlabs/tailwindcss#18918)) - Use `default` export condition for `@tailwindcss/vite` ([#​18948](tailwindlabs/tailwindcss#18948)) - Re-throw errors from PostCSS nodes ([#​18373](tailwindlabs/tailwindcss#18373)) - Detect classes in markdown inline directives ([#​18967](tailwindlabs/tailwindcss#18967)) - Ensure files with only `@theme` produce no output when built ([#​18979](tailwindlabs/tailwindcss#18979)) - Support Maud templates when extracting classes ([#​18988](tailwindlabs/tailwindcss#18988)) - Upgrade: Do not migrate `variant = 'outline'` during upgrades ([#​18922](tailwindlabs/tailwindcss#18922)) - Upgrade: Show version mismatch (if any) when running upgrade tool ([#​19028](tailwindlabs/tailwindcss#19028)) - Upgrade: Ensure first class inside `className` is migrated ([#​19031](tailwindlabs/tailwindcss#19031)) - Upgrade: Migrate classes inside `*ClassName` and `*Class` attributes ([#​19031](tailwindlabs/tailwindcss#19031)) ### [`v4.1.13`](https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md#4113---2025-09-03) [Compare Source](tailwindlabs/tailwindcss@v4.1.12...v4.1.13) ##### Changed - Drop warning from browser build ([#​18731](tailwindlabs/tailwindcss#18731)) - Drop exact duplicate declarations when emitting CSS ([#​18809](tailwindlabs/tailwindcss#18809)) ##### Fixed - Don't transition `visibility` when using `transition` ([#​18795](tailwindlabs/tailwindcss#18795)) - Discard matched variants with unknown named values ([#​18799](tailwindlabs/tailwindcss#18799)) - Discard matched variants with non-string values ([#​18799](tailwindlabs/tailwindcss#18799)) - Show suggestions for known `matchVariant` values ([#​18798](tailwindlabs/tailwindcss#18798)) - Replace deprecated `clip` with `clip-path` in `sr-only` ([#​18769](tailwindlabs/tailwindcss#18769)) - Hide internal fields from completions in `matchUtilities` ([#​18820](tailwindlabs/tailwindcss#18820)) - Ignore `.vercel` folders by default (can be overridden by `@source …` rules) ([#​18855](tailwindlabs/tailwindcss#18855)) - Consider variants starting with `@-` to be invalid (e.g. `@-2xl:flex`) ([#​18869](tailwindlabs/tailwindcss#18869)) - Do not allow custom variants to start or end with a `-` or `_` ([#​18867](tailwindlabs/tailwindcss#18867), [#​18872](tailwindlabs/tailwindcss#18872)) - Upgrade: Migrate `aria` theme keys to `@custom-variant` ([#​18815](tailwindlabs/tailwindcss#18815)) - Upgrade: Migrate `data` theme keys to `@custom-variant` ([#​18816](tailwindlabs/tailwindcss#18816)) - Upgrade: Migrate `supports` theme keys to `@custom-variant` ([#​18817](tailwindlabs/tailwindcss#18817)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0MS4xNDguNCIsInVwZGF0ZWRJblZlciI6IjQyLjAuMyIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==--> Reviewed-on: https://git.in.csmpro.ru/csmpro/csm-mapban/pulls/28 Co-authored-by: Renovate Bot <renovate@csmpro.ru> Co-committed-by: Renovate Bot <renovate@csmpro.ru>
3 tasks
kwaroran
added a commit
to kwaroran/Risuai
that referenced
this pull request
Dec 28, 2025
# PR Checklist - [x] Have you checked if it works normally in all models? *Ignore this if it doesn't use models.* - [x] Have you checked if it works normally in all web, local, and node hosted versions? If it doesn't, have you blocked it in those versions? - [x] Have you added type definitions? // not required # Description > **Note**: This PR depends on [#1117](#1117) and should be merged after it. This branch was built on top of the `refactor: build configuration for Svelte 5 and Tauri v2` commit to avoid merge conflicts. **Likely no visual changes** except for a minor bug fix in `CheckInput`: ``` [A: hidden input] [B: checkbox] [C: label text] ``` In Tailwind v3, the `space-x-*` selector (`:not([hidden]) ~ :not([hidden])`) matched elements with `class="hidden"` (Tailwind utility) as if they were visible, because it only excludes the HTML `hidden` attribute. This caused an unintended 8px left margin on B (checkbox), even though A was visually hidden. This accidental margin is now gone in v4. before: <img width="216" height="147" alt="tailwind_v4_migration_before" src="https://github.com/user-attachments/assets/48c88c35-b731-4ae5-a7e3-869ffb177da1" /> after: <img width="225" height="147" alt="tailwind_v4_migration_after" src="https://github.com/user-attachments/assets/5a183eb5-8b81-48e8-8b16-ebe326f4656c" /> ## Summary This PR migrates the project from Tailwind CSS v3 to v4, following the official [upgrade guide](https://tailwindcss.com/docs/upgrade-guide). ## Changes ### Build Configuration - **Vite Plugin**: Switched from PostCSS plugin to the dedicated `@tailwindcss/vite` plugin for improved performance - **Removed PostCSS**: Since we use Vite, removed the PostCSS configuration entirely - **Config Migration**: Migrated `tailwind.config.js` settings to CSS-based configuration in `styles.css` ### Automated Migration (via `npx @tailwindcss/upgrade`) The upgrade tool handled most of the heavy lifting: - **Renamed utilities**: `shadow-sm` → `shadow-xs`, `rounded` → `rounded-sm`, `outline-none` → `outline-hidden`, `ring` → `ring-3`, etc. - **Important modifier**: Moved `!` from prefix to suffix position - **Flex utilities**: `flex-grow` → `grow`, `flex-shrink` → `shrink` ### Manual Fixes Some changes required manual intervention: - **Opacity utilities**: The upgrade tool didn't handle `bg-opacity-*` correctly, so manually migrated to the new `bg-color/opacity` syntax (e.g., `bg-opacity-50` → `bg-opacity/50`) - **Ring width**: A few `ring` usages were missed by the upgrade tool, manually changed to `ring-3` - **Svelte class directives**: The upgrade tool doesn't handle Svelte's conditional class binding syntax (`class:ring={condition}`), so these were manually updated to `class:ring-3={condition}` ### Undocumented Changes by Upgrade Tool Some migrations performed by the upgrade tool were not mentioned in the official guide: - **break-words → wrap-break-word**: See [tailwindcss#19157](tailwindlabs/tailwindcss#19157) - **shadow-xs → shadow-2xs**: Some code was using `shadow-xs` which didn't exist in v3 (possibly a typo or forward-looking usage). Since v4 shifts the scale (`shadow-sm` → `shadow-xs`), these were migrated to `shadow-2xs` ### Space-between Selector Changes The `space-x-*` and `space-y-*` selector changed from `:not([hidden]) ~ :not([hidden])` to `:not(:last-child)`. - **Bug fix discovered**: In `CheckInput.svelte`, there was an unintended 8px left margin on the checkbox. This was caused by v3's selector matching `class="hidden"` (Tailwind utility) as if it were NOT the `[hidden]` HTML attribute. This accidental margin is now gone in v4. - **Gap migration**: Following Tailwind's recommendation, migrated flex containers from `space-*` to `gap-*` utilities ### V3 Compatibility Styles Added base styles in `styles.css` to preserve v3 behavior, following the official upgrade guide recommendations: ```css @layer base { /* Default border color (v3 used gray-200, v4 uses currentColor) */ *, ::after, ::before, ::backdrop, ::file-selector-button { border-color: var(--color-gray-200, currentColor); } /* Default ring color (v3 used blue-500/50) */ /* Note: Actual v3 color was rgb(59 130 246 / 0.5), not the documented value */ /* Placeholder color (v3 used gray-400) */ input::placeholder, textarea::placeholder { color: var(--color-gray-400); } /* Button cursor (v3 used pointer, v4 uses default) */ button:not(:disabled), [role="button"]:not(:disabled) { cursor: pointer; } /* Dialog margins (v3 had auto margins) */ dialog { margin: auto; } } ``` ### No Changes Needed The following v4 changes had no impact: - **Divide selector**: Not used in this project - **Gradient variants**: No gradient overriding patterns used - **Container configuration**: Only one usage with manual `mx-auto`, no custom container config - **Hidden attribute priority**: No `<div hidden class="block">` patterns used - **Prefix**: Not using a prefix - **Variant stacking order**: No order-sensitive stacked variants found - **Hover on mobile**: Using default behavior - **Sass/Less/Stylus**: Not used ## Browser Requirements Tailwind CSS v4 requires Safari 16.4+, Chrome 111+, and Firefox 128+. Older browsers are not supported. ### Summary 1. Largely compatible with versions currently targeted by this repo - no compatibility issues expected 2. **Windows 7, 8, 8.1 support is officially dropped** (3.28% of Windows users). These versions likely weren't working properly before, but this change makes it definitive 3. Firefox has a notably higher version requirement, but users with updated browsers will be fine ### Detailed Comparison #### Tailwind v4 Requirements Tailwind v4's core features depend on **Chrome 111**, Safari 16.4, and **Firefox 128**. #### Vite Build Target History (this repo) | Date | Build Target | |------|--------------| | May 2023 | Chrome 105, Safari 13 | | Aug 2023 | es2021 (~Chrome 85) | | Jan 2024 | `modules` (Vite 6 default: es2020, edge88, firefox78, chrome87, safari14) | | Mar 2025 | Chrome 100, Firefox 100, Safari 15 | | Dec 2025 (new) | `baseline-widely-available` (Vite 7 default, as of May 2025: chrome107, edge107, firefox104, safari16) | | After Vite 8 | `baseline-widely-available` (chrome111, edge111, firefox114, safari16.4) | Tailwind v4 compatibility aligns with `baseline-widely-available` **except for Firefox**. - Chrome 111 and Safari 16.4 were released in March 2023 - Firefox 128 was released in July 2024 #### Android (Tauri) Android WebView has been updated independently from the OS since Android 5.0 Lollipop. | Android Version | Release Year | Last WebView Version | |-----------------|--------------|---------------------| | Android 5.0 Lollipop | 2014 | 95.0.4638.74 | | Android 6.0 Marshmallow | 2015 | 106.x | | Android 7.0 Nougat | 2016 | 119.0.6045.194 | | Android 8.0 Oreo | 2017 | 119.0.6045.194 | | Android 9.0 Pie | 2018 | 119.0.6045.194 | | Android 10+ | 2019+ | Continuously updated | Source: [Chromium WebView Prerelease Docs](https://chromium.googlesource.com/chromium/src/+/HEAD/android_webview/docs/prerelease.md) Apart from some features being disabled in WebView, there are no version compatibility issues (Tailwind v4 requires Chrome 111). #### Windows (Tauri) No version concerns for Windows WebView. From [Tauri WebView Versions](https://v2.tauri.app/reference/webview-versions/): > WebView2 is supported on Windows 7 and newer and comes preinstalled on Windows 11. On versions older than Windows 11 the installer generated by Tauri takes care of ensuring WebView2 is installed on the system. On Windows 11, WebView2 is automatically updated in the background through the same update system as Edge. See [Windows Forum](https://windowsforum.com/threads/webview2-on-windows-11-the-embedded-web-platform-powering-widgets-and-apps.393201/). #### Windows 7, 8, 8.1 Support Dropped - Last Chrome version for Windows 7/8/8.1: **Chrome 109** ([source](https://support.google.com/chrome/a/answer/7100626?hl=en)) - Last Firefox version for Windows 7/8/8.1: **Firefox 115** ([source](https://support.mozilla.org/en/kb/firefox-users-windows-7-8-and-81-moving-extended-support)) Since Tailwind v4 requires Chrome 111 and Firefox 128, **Windows 7, 8, and 8.1 are no longer supported**. However, these versions likely weren't working properly before either—some users had already reported that Tauri was not working on Windows 7 back in 2024. Additionally, Windows 10 + Windows 11 account for **96.4%** of Windows market share, while Windows 7 + 8 + 8.1 only account for **3.28%** - negligible. ([source](https://gs.statcounter.com/windows-version-market-share/desktop/worldwide)) FYI: Windows 8.1 was released in 2013. #### Polyfills Tailwind v4 uses modern native CSS features that **cannot be polyfilled**. ## Conclusion Successfully migrated from Tailwind CSS v3 to v4 with likely no visual changes (except the CheckInput bug fix). **Migration process:** - The `@tailwindcss/upgrade` tool handled ~90% of the work automatically - Manual fixes were needed for: opacity syntax, some missed `ring` utilities, and Svelte `class:` directive bindings - V3 compatibility base styles were added following the official guide to preserve existing behavior **Browser support note:** - Windows 7/8/8.1 support is officially dropped with this migration - However, these versions likely weren't working properly before either—some users had already reported that Tauri was not working on Windows 7 back in 2024 - This affects only ~3.28% of Windows users
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
2 participants
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.
This PR marks
break-wordsas deprecated (such that intellisense doesn't suggest it anymore). Updates the upgrade tooling to preferwrap-break-wordinstead.Note:
break-wordswill still work as expected.Test plan
break-wordsstill generates the correct CSS.break-wordsanymore.wrap-break-wordinstead ofbreak-words.