RocketChat / RocketChat/Rocket.Chat
Support root selectors in stylis logical-properties middleware
@tassoevan is already working on this.
Since Aug 19, 2026.
- Dominant language
- TypeScript
- Stars
- 46.1k
- Forks
- 13.9k
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 130
Description
Summary
Update createLogicalPropertiesMiddleware so it generates direction-scoped physical fallbacks for root selectors.
Required changes
In packages/stylis-logical-props-middleware/src/middleware.ts, apply the direction constraint directly to html and :root selectors. Continue to use the existing descendant-selector form for non-root selectors.
Rationale
The current generated selectors use a descendant combinator:
html:not([dir=rtl]) html[dir=rtl] :root
These selectors cannot match the document root. As a result, logical declarations in html or :root rules do not receive physical fallbacks.
Affected area
packages/stylis-logical-props-middleware/src/middleware.ts- Middleware tests for logical-property fallback output
Acceptance criteria
- A rule with an
htmlselector produces matching LTR and RTL fallback selectors. - A rule with a
:rootselector produces matching LTR and RTL fallback selectors. - Non-root selectors retain descendant-scoped LTR and RTL fallback behavior.
- Tests cover
html,:root, and a non-root selector.
Backlinks
- Pull request: https://github.com/RocketChat/Rocket.Chat/pull/41861
- Review comment: https://github.com/RocketChat/Rocket.Chat/pull/41861#discussion_r3810310085
Requested by: @tassoevan
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.