feat(themes): Document/Improve identifying first duplicated definition

[jsoref]

Feature Description

https://github.com/angular/components/blob/main/guides/duplicate-theming-styles.md talks about duplicate theming styles, and it's referenced by the build system...

That's great, except it only tells users about the second instance of a definition.

If at all possible, it'd be great if there was either tooling or documentation to help users find the first instance of a definition

Use Case

We had some buggy theming code of the form:

style.scss:

@import "themes";
@import "extra-themes";

themes.scss:

@use '@angular/material' as mat;
@import "extra-themes";

$light-theme: mat.define-light-theme((color: ...));
$dark-theme: mat.define-dark-theme((color: ...));

@include mat.all-component-themes($light-theme);

.dark-theme {
  // This mixin only generates the color styles now.
  @include mat.all-component-colors($dark-theme);
}

extra-themes.scss

@use "@angular/material" as mat;
@import "themes";

@mixin extra-themes($theme) {
   ...
}

@include extra-themes($light-theme);

.dark-theme {
  @include extra-colors($dark-theme);
}

Unfortunately, all of the output about duplication appeared like this:

node_modules/@angular/material/core/theming/_theming.scss 352:7          private-check-duplicate-theme-styles()
node_modules/@angular/material/legacy-core/theming/_all-theme.scss 43:3  all-legacy-component-themes()
node_modules/@angular/material/legacy-core/color/_all-color.scss 17:3    all-legacy-component-colors()