Skip to content

Keep drawer tokens inside @layer components - #43136

Open
samyferhat wants to merge 1 commit into
twbs:mainfrom
samyferhat:fix/drawer-tokens-layer
Open

samyferhat wants to merge 1 commit into
twbs:mainfrom
samyferhat:fix/drawer-tokens-layer

Conversation

@samyferhat

@samyferhat samyferhat commented Oct 20, 2026 •

Copy link
Copy Markdown

Description

  • Move the %drawer-css-vars placeholder into @layer components in scss/_drawer.scss.
  • In the compiled CSS, only the .drawer, .sm:drawer, … token rule moves into @layer components. No selector or declaration changes.

Motivation & Context

  • Sass emits an extended placeholder at the location of its definition. The placeholder was defined before @layer components, so the drawer tokens were unlayered.
  • Unlayered declarations beat every layer. Thus a drawer token override in @layer custom had no effect.
  • Checked in Chromium with @layer custom { .drawer { --drawer-width: 321px; } }: before, 400px; after, 321px. Same result for .lg:drawer.
  • npm run lint, npm run css-test, and npm run dist pass locally.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Refactoring (non-breaking change)
  • Breaking change (fix or feature that would change existing functionality)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Related issues

Fixes #43044

🤖 Generated with Claude Code

Sass emits an extended placeholder at the location of its definition.
The %drawer-css-vars placeholder was defined before @layer components.
Thus the drawer token rule was unlayered, and overrides in @layer custom had no effect.
Move the placeholder into the layer, like the tokens of the other components.

Fixes twbs#43044

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@samyferhat
samyferhat requested a review from a team as a code owner October 20, 2026 19:37
@julien-deramond julien-deramond added v6 v6, the main branch bug Something does not work as documented css Sass sources or compiled CSS labels Oct 20, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something does not work as documented css Sass sources or compiled CSS v6 v6, the main branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Drawer tokens generated outside the component layer

2 participants