docs-bug(COMPONENT): Missing Source Traceability for CSS Variable Overrides in DevTools

[151forShizzle]

Documentation Feedback

Problem
When customizing component styles in Angular Material v19 using the new theming API (@use '@angular/material/theming' and mixins like mat.button-overrides()), all CSS variables get injected into a generated utility file, typically shown in DevTools as: utils.css:xxx

This makes it impossible to trace where a style override came from when inspecting an element. Even if a developer defines a style override like this:

// src/theme/components/_button-theme.scss
@include mat.button-overrides((
filled-label-text-weight: 600;
));

The resulting CSS variable is injected into the final CSS bundle without any mapping to the original source file.

Is there any documentation about this or information how to trace back scss files and line numbers?

Affected documentation page

https://material.angular.io/components/button/api

[crisbeto]

We don't have much control over this. Source maps should help, but they'll only point you to the call site of the mixin, not the specific variable.