fix: rename @layer xds-reset to @layer reset by cixzhang · Pull Request #833 · facebook/astryx

cixzhang · 2026-03-23T22:19:05Z

Problem

In Storybook, the reset CSS layer was taking precedence over StyleX priority layers. The reset layer was named xds-reset in reset.css, but the layer order declarations in storybook and example-vite declare reset:

@layer reset, typography, priority1, priority2, ... priority9;

Since xds-reset didn't match any name in the declared order, it got implicitly ordered after all declared layers — giving reset styles higher precedence than component styles. That's backwards.

Fix

Rename @layer xds-reset → @layer reset in packages/core/src/reset.css so it matches the existing layer order declarations. Updated all comments referencing the old name.

Changes

packages/core/src/reset.css — rename layer + update comments
apps/sandbox/src/app/layout.tsx — update comment

The reset CSS layer was named 'xds-reset' but the layer order declarations in storybook and example-vite use 'reset'. This mismatch meant the xds-reset layer wasn't recognized in the declared order and got implicitly ordered after the priority layers — giving reset styles higher precedence than component styles. Renaming to 'reset' matches the existing @layer declarations and ensures the reset layer sits at the bottom of the cascade as intended. Co-authored-by: Navi <navi@navibot.dev>

github-actions · 2026-03-23T22:23:02Z

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

No new or modified components detected.

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@xds/core	11.0KB	17.6KB	2.7KB

Accessibility Audit

Status: 18 accessibility violation(s) found — 1 critical, 15 serious, 2 moderate.

XDSBanner - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/15 stories · Learn more
- WCAG: 1.4.3 (Level AA)

XDSCalendar - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 10/11 stories · Learn more
- WCAG: 1.4.3 (Level AA)

XDSCheckboxInput - 1 issue(s)

🟠 serious: Ensure ARIA attributes are used as described in the specification of the element's role
- Rule: aria-conditional-attr · Affects 2/16 stories · Learn more
- WCAG: 4.1.2 (Level A)

XDSCodeBlock - 2 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 8/13 stories · Learn more
- WCAG: 1.4.3 (Level AA)
🟠 serious: Ensure elements that have scrollable content are accessible by keyboard
- Rule: scrollable-region-focusable · Affects 1/13 stories · Learn more
- WCAG: 2.1.1, 2.1.3 (Level A)

XDSCodeEditor - 3 issue(s)

🟠 serious: Ensure every ARIA input field has an accessible name
- Rule: aria-input-field-name · Affects 7/7 stories · Learn more
- WCAG: 4.1.2 (Level A)
🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 3/7 stories · Learn more
- WCAG: 1.4.3 (Level AA)
🟠 serious: Ensure elements that have scrollable content are accessible by keyboard
- Rule: scrollable-region-focusable · Affects 1/7 stories · Learn more
- WCAG: 2.1.1, 2.1.3 (Level A)

XDSHeading - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/16 stories · Learn more
- WCAG: 1.4.3 (Level AA)

XDSIcon - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/16 stories · Learn more
- WCAG: 1.4.3 (Level AA)

XDSLayout - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 4/10 stories · Learn more
- WCAG: 1.4.3 (Level AA)

XDSList - 1 issue(s)

🔴 critical: Ensure an element's role supports its ARIA attributes
- Rule: aria-allowed-attr · Affects 1/10 stories · Learn more
- WCAG: 4.1.2 (Level A)

XDSPagination - 1 issue(s)

🟡 moderate: Ensure landmarks are unique
- Rule: landmark-unique · Affects 1/14 stories · Learn more

XDSSideNav - 1 issue(s)

🟠 serious: Ensure links have discernible text
- Rule: link-name · Affects 1/8 stories · Learn more
- WCAG: 2.4.4, 4.1.2 (Level A)

XDSTabList - 1 issue(s)

🟡 moderate: Ensure landmarks are unique
- Rule: landmark-unique · Affects 1/5 stories · Learn more

Selection - 1 issue(s)

🟠 serious: Ensure ARIA attributes are used as described in the specification of the element's role
- Rule: aria-conditional-attr · Affects 1/7 stories · Learn more
- WCAG: 4.1.2 (Level A)

XDSText - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 1/22 stories · Learn more
- WCAG: 1.4.3 (Level AA)

XDSToken - 1 issue(s)

🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
- Rule: color-contrast · Affects 2/9 stories · Learn more
- WCAG: 1.4.3 (Level AA)

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}

No CSS actually uses @layer typography — it was a leftover from an earlier design. Remove it from the layer order declarations in storybook, example-vite, and docs. Co-authored-by: Navi <navi@navibot.dev>

* fix: rename @layer xds-reset to @layer reset The reset CSS layer was named 'xds-reset' but the layer order declarations in storybook and example-vite use 'reset'. This mismatch meant the xds-reset layer wasn't recognized in the declared order and got implicitly ordered after the priority layers — giving reset styles higher precedence than component styles. Renaming to 'reset' matches the existing @layer declarations and ensures the reset layer sits at the bottom of the cascade as intended. Co-authored-by: Navi <navi@users.noreply.github.com> * fix: remove unused typography layer from layer order declarations No CSS actually uses @layer typography — it was a leftover from an earlier design. Remove it from the layer order declarations in storybook, example-vite, and docs. Co-authored-by: Navi <navi@users.noreply.github.com> --------- Co-authored-by: Navi <navi@users.noreply.github.com>

* fix: rename @layer xds-reset to @layer reset The reset CSS layer was named 'xds-reset' but the layer order declarations in storybook and example-vite use 'reset'. This mismatch meant the xds-reset layer wasn't recognized in the declared order and got implicitly ordered after the priority layers — giving reset styles higher precedence than component styles. Renaming to 'reset' matches the existing @layer declarations and ensures the reset layer sits at the bottom of the cascade as intended. * fix: remove unused typography layer from layer order declarations No CSS actually uses @layer typography — it was a leftover from an earlier design. Remove it from the layer order declarations in storybook, example-vite, and docs. ---------

cixzhang requested a review from josephfarina as a code owner March 23, 2026 22:19

meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Mar 23, 2026

fix: remove unused typography layer from layer order declarations

4934203

No CSS actually uses @layer typography — it was a leftover from an earlier design. Remove it from the layer order declarations in storybook, example-vite, and docs. Co-authored-by: Navi <navi@navibot.dev>

eendeego approved these changes Mar 23, 2026

View reviewed changes

josephfarina mentioned this pull request Mar 23, 2026

fix(storybook): align CSS layer order with xds-reset rename #834

Closed

cixzhang merged commit 50412ff into main Mar 23, 2026
13 checks passed

cixzhang deleted the navi/fix/reset-layer-name branch April 9, 2026 14:33

Navigation Menu

Uh oh!

fix: rename @layer xds-reset to @layer reset - #833

fix: rename @layer xds-reset to @layer reset#833
cixzhang merged 2 commits into
mainfrom
navi/fix/reset-layer-name

cixzhang commented Mar 23, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

cixzhang commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Fix

Changes

Uh oh!

github-actions Bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Analysis Report

📚 Storybook Preview

🧪 Sandbox Preview

Bundle Size Summary

Accessibility Audit

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cixzhang commented Mar 23, 2026 •

edited

Loading

github-actions Bot commented Mar 23, 2026 •

edited

Loading