fix: CSS ordering inconsistency between dev and production build

[yurii-vasyliev]

Problem

In Vite dev mode, CSS from SCSS modules (e.g. TableFilter.module.scss) is injected as inline <style> tags following the JS module import order. This means custom classes like .toggle naturally appear after Vanilla Framework styles and win the cascade.
In production builds, Vite extracts CSS into separate files where chunk ordering is not guaranteed. Vanilla Framework's button selectors (e.g. .p-button--base with margin: 0 1rem 1.25rem 0) can appear after our module styles, overriding them due to equal specificity + later source order. This causes visual regressions that only appear in deployed environments, but not on localhost.

Solution

Wrap Vanilla Framework's CSS output in a @layer vanilla block. Per the CSS cascade spec, unlayered styles always take priority over layered styles, regardless of specificity or source order. This means that all CSS Modules and custom partials automatically win over Vanilla's rules without needing specificity hacks like doubled selectors (.toggle.toggle) or !important.

Release Impact

According to the Landscape Server Release Cycle, this change will target the following release cycle:

• Target Branch: dev / main (Beta)
• Version Impact:
  • Patch (Fix)
  • Minor (Feature)
  • Major (Breaking)

Checklist

• Changeset Added: I have run pnpm changeset and committed the resulting .md file.
• UI Verified: I have verified the changes locally.
• Linting: No linting errors are present (especially in scripts/).

Versioning Reminder

Important

This repository now uses CalVer ($YY.0M.Point.Patch$).
Please ensure your changeset description is clear, as it will be automatically added to the CHANGELOG.md upon merging to main.

[marqode]

LGTM!