RocketChat / RocketChat/Rocket.Chat

Support root selectors in stylis logical-properties middleware

Open
#41,867 3 comments 1 reaction 1 assignee View on GitHub

@tassoevan is already working on this.

Since Aug 19, 2026.

type: bug
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 html selector produces matching LTR and RTL fallback selectors.
  • A rule with a :root selector 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

Requested by: @tassoevan

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.