You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
fix(styling): drop @charset from the published CSS - #3430
Sass prepends @charset "UTF-8"; to any stylesheet whose output holds a non-ASCII character, which today is index.css (curly quotes and an en dash in generated token comments) and ai-components.css (the ✓ and × glyphs of the A2UI and OpenUI badges). Apps that import the CSS into a cascade layer (@import 'stream-chat-react/dist/css/index.css' layer(stream);) end up with @charset nested inside @layer, where it is an unknown at-rule, so Lightning CSS (Next.js 16 / Turbopack) prints a warning on every build. The rule is dropped either way; this removes the noise.
Implementation details
build-styling runs Sass with --no-charset, and scripts/watch-styling.mjs passes charset: false so yarn start:css emits the same output.
The ✓ and × badge glyphs in _ai-ui-icons.scss are written with string.unquote('"\\2713"') / string.unquote('"\\00d7"'). Sass would otherwise turn the '\2713' escape back into the literal character, so without @charset the glyphs would render right only when the file is decoded as UTF-8. The output is now content: "\2713" / content: "\00d7", which is encoding-independent. The remaining non-ASCII characters in index.css are inside comments and do not affect rendering.
Verified: none of the five built stylesheets starts with @charset, and ai-components.css carries the escapes instead of the raw glyphs. Bundlers already hoist or strip @charset, so apps that do not use layers see no change.
UI Changes
None. The badge glyphs render the same.
Summary by CodeRabbit
Bug Fixes
Updated generated styles so success and danger icons retain their escaped glyphs, supporting consistent display across styling output.
Removed the charset declaration from Sass-generated styles, keeping output consistent whether styles are built directly or during development.
Sass prepends `@charset "UTF-8"` to any stylesheet with a non-ASCII
character. Imported into a cascade layer, it ends up nested inside
`@layer`, where it is an unknown at-rule that minifiers such as Lightning
CSS warn about on every build. Build with `--no-charset` (and
`charset: false` in the watch script), and keep the AI UI glyphs as CSS
escapes so ai-components.css decodes right under any encoding.
Closes#3423
No actionable comments were generated in the recent review.
Walkthrough
The Sass package build and watch build disable charset output. The success and danger icon glyph values now use escaped Unicode strings, while the info and warning values remain unchanged.
The change removes the @charset rule from the published CSS and writes two badge glyphs as CSS escapes. It should not change how the badges render, and no merge-blocking risk remains.
Pre-merge checks: 5
Check name
Status
Explanation
Title check
The title clearly and concisely describes the main change: removing @charset from published CSS.
Description check
The description explains the goal, implementation, verification, linked issue, and UI impact. It uses equivalent headings and correctly states that no screenshots are needed because there are no UI ch…
Linked Issues check
Issue #3423 requires published CSS without @charset "UTF-8" or an equivalent importable variant. package.json adds Sass --no-charset for all five build outputs. scripts/watch-styling.mjs sets …
Out of Scope Changes check
The changes are limited to charset configuration in the production and watch Sass builds and to encoding-independent CSS escapes for the affected badge glyphs. The glyph change supports the charset re…
Docstring Coverage
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Full details: Description check
Explanation
The description explains the goal, implementation, verification, linked issue, and UI impact. It uses equivalent headings and correctly states that no screenshots are needed because there are no UI changes.
Full details: Linked Issues check
Explanation
Issue #3423 requires published CSS without @charset "UTF-8" or an equivalent importable variant. package.json adds Sass --no-charset for all five build outputs. scripts/watch-styling.mjs sets charset: false, so watch output matches the build output. _ai-ui-icons.scss preserves the success and danger glyphs as CSS escapes, which addresses the encoding impact of removing the charset. These changes implement the linked issue requirements.
Full details: Out of Scope Changes check
Explanation
The changes are limited to charset configuration in the production and watch Sass builds and to encoding-independent CSS escapes for the affected badge glyphs. The glyph change supports the charset removal. No unrelated source, API, or UI behavior changes are present.
Full details: Docstring Coverage
Explanation
No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 0 functions across 1 files. (2 skipped: 2 unsupported.)
Finishing Touches
Generate docstrings
Commit to this branch
Create a new PR
Generate unit tests (beta)
Commit to this branch
Create a new PR
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 2 remain after this review.
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
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.
Ticket: https://linear.app/stream/issue/REACT-1550
Closes #3423
Goal
Sass prepends
@charset "UTF-8";to any stylesheet whose output holds a non-ASCII character, which today isindex.css(curly quotes and an en dash in generated token comments) andai-components.css(the ✓ and × glyphs of the A2UI and OpenUI badges). Apps that import the CSS into a cascade layer (@import 'stream-chat-react/dist/css/index.css' layer(stream);) end up with@charsetnested inside@layer, where it is an unknown at-rule, so Lightning CSS (Next.js 16 / Turbopack) prints a warning on every build. The rule is dropped either way; this removes the noise.Implementation details
build-stylingruns Sass with--no-charset, andscripts/watch-styling.mjspassescharset: falsesoyarn start:cssemits the same output._ai-ui-icons.scssare written withstring.unquote('"\\2713"')/string.unquote('"\\00d7"'). Sass would otherwise turn the'\2713'escape back into the literal character, so without@charsetthe glyphs would render right only when the file is decoded as UTF-8. The output is nowcontent: "\2713"/content: "\00d7", which is encoding-independent. The remaining non-ASCII characters inindex.cssare inside comments and do not affect rendering.@charset, andai-components.csscarries the escapes instead of the raw glyphs. Bundlers already hoist or strip@charset, so apps that do not use layers see no change.UI Changes
None. The badge glyphs render the same.
Summary by CodeRabbit