Repository navigation
fix(react): read the important marker only at the end of a value - #10970
Merged
Adebesin-Cell merged 3 commits intoSep 7, 2026
Merged
Conversation
`importantRegex` had no end anchor, so any exclamation mark inside a style value was taken as the `!important` marker: the `!` was deleted from the value and ` !important` appended. `content: '"!"'` rendered as an empty string and `url(/a!b.png)` became `url(/ab.png)`. Anchor the marker to the end of the value, tolerating trailing whitespace so `"red!important "` keeps working.
🦋 Changeset detectedLatest commit: 29809ab The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Adebesin-Cell
approved these changes
Sep 7, 2026
Adebesin-Cell
left a comment
Adebesin-Cell
left a comment
Collaborator
There was a problem hiding this comment.
Thank you! We fixed the important issue in v2 for panda, I'll check if it still exists in v1.
Merged
This branch was successfully deployed
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.
📝 Description
css()treats any exclamation mark in a string value as the!importantmarker.importantRegexinpackages/react/src/styled-system/css.ts:15is/\s*!(important)?/i, with no end anchor, soisImportantfires forcontent: '"!"'as readily as forcolor: "red!".withoutImportantthen deletes the first!it finds, wherever it is, and the secondwalkObjectpass appends!importantto every string in the transformed result. Measured ondefaultSystem.cssat main:content: '"Hello!"'emitscontent: "Hello" !important;_before: { content: '"!"' }emits&::before { content: "" !important }, so a badge meant to show an exclamation mark renders empty;backgroundImage: "url(/a!b.png)"emitsurl(/ab.png) !important, a broken URL;fontFamily: "'Wow! Sans', sans-serif"becomes'Wow Sans', sans-serif !important.The fix anchors the marker to the end of the value:
/\s*!(important)?\s*$/i. Trailing whitespace is tolerated so"red!important "still counts, as it did before.@pandacss/sharedcarries the same unanchored regex (shared.mjs:38in 1.11.1), so the same anchor applies there.⛳️ Current behavior (updates)
Any
!inside a style value is stripped and the value is emitted with!important.🚀 New behavior
Only a trailing
!or!importantis read as the marker. Values containing an exclamation mark elsewhere pass through unchanged;color: "red!",color: "red !important"andcolor: "red!important "all still resolve tocolor: "red !important".💣 Is this a breaking change (Yes/No):
No.
📝 Additional Information
One regression test in
packages/react/__tests__/css.test.tscovers the four mangled cases and the three marker spellings; it fails on main at the first assertion and passes with the change.pnpm vitest run packages/react: 33 files, 195 tests passing.pnpm typecheckand Prettier are clean. Patch changeset for@chakra-ui/reactincluded.Greptile Summary
This PR narrows Chakra’s shorthand
!importantdetection to terminal markers, preserving exclamation marks embedded in CSS values.importantRegexto the end of the value while allowing trailing whitespace.@chakra-ui/react.Confidence Score: 5/5
The PR appears safe to merge, with no actionable correctness, security, or repository-rule issues identified.
The narrowed regex preserves all supported terminal marker spellings while preventing embedded exclamation marks from entering the marker-removal path, and the regression tests cover the representative affected values.
Important Files Changed
Reviews (1): Last reviewed commit: "fix(react): read the important marker on..." | Re-trigger Greptile