[CSS] Stage 0 — Foundations #17707

Part of #17669.

Before we change any component styles, we need a few things in place: a written authoring standard, the one helper the new approach relies on, a way to measure CSS, lint rules that stop new violations, and a visual safety net. We also want to validate @scope where it matters most, in the grid, before committing to it there.

This stage is not meant to change anything visibly.

Tasks

These will be opened as sub-issues.

• T0.1 Formalize the browser floor.
  • Confirm the current Firefox ESR version.
  • Add a library .browserslistrc: Chrome/Edge 131, Firefox 151, Safari/iOS 18.
  • Document the floor in the README "Browser support" section and in the release notes.
  • Firefox and Safari already need these versions for the style queries we ship, so this documents the current situation.
• T0.2 Write the authoring guide by rewriting .github/themes-contributing.md.
  • It replaces css-naming-convention.md.
  • Content: how styles are built and layered, what goes where, the authoring rules, scoping, and how to add or convert a component.
  • Point the theming-styles agent, AGENTS.md, CONTRIBUTING.md and .github/copilot-instructions.md to it.
• T0.3 Add the block() helper to core/src/core/styles/themes/_scoping.scss, with a style test. It wraps a component's rules in @scope (.igx-<name>) to (:scope [ig-scope] > *) inside the right cascade layer, and accepts an optional theme and variant.
• T0.4 Add a CSS size report script under scripts/.
  • Per component, it reports bytes, selector count, !important count, references to other components' selectors, and maximum specificity.
  • Optionally, it lists data-part names used in SCSS that never appear in a template.
  • PRs in later stages include its before/after output.
• T0.5 Set up lint guard-rails.
  • Enable prettier/prettier for SCSS.
  • Add the new rules as warnings, with a per-file baseline of existing violations.
  • Fail CI on new violations.
  • Upgrading Stylelint 16 → 17 is a dependency change and needs approval first.
• T0.6 Add visual-regression checks. Screenshots of the src/app demos, or compiled-CSS snapshot diffs, across all four design systems in light and dark. Start with the components touched in Stages 1–3.
• T0.7 Add the ig-scope host marker and the new layer order.
  • Every component host gets an ig-scope attribute. It's inert until a component's styles use block().
  • Add ig.compositions and ig.utilities to the layer order: ig.reset, ig.compositions, ig.base, ig.<theme>, ig.derived, ig.utilities.
• T0.8 Spike: @scope in practice.
  • Check that a consumer Angular CLI build keeps @scope … to (…) intact.
  • Measure style recalculation and scroll cost in the grid with @scope, in projects/igniteui-angular-performance.
  • Post the results and a go/no-go for converting the grid.

Done when

• The authoring guide and block() are merged.
• The size report runs on PRs.
• The lint baseline is active and CI rejects new violations.
• Visual checks cover the components scheduled for Stages 1–3.
• The @scope spike results are posted here.

Notes

• Stage 1 can start as soon as T0.5 lands. Stages 2 and 3 need T0.3, T0.4 and T0.6.
• Background and decisions (including why data-part rather than the native part attribute) are in CSS Classes/Styling System in Ignite UI for Angular #17669.