angular / angular/components

feat(mat.*-overrides): Improve the styles overrides functions to not generate so much duplicity selectors in the css.

オープン
#30,248 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: theming feature P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### Feature Description

# Explain the issue
Following your documentation, when we override the style we can do the next:
``` scss
.SELECTOR {
@include mat.*-overrides((
TOKEN_1,
TOKEN_2,
TOKEN_3,
...
TOKEN_n,
));
}
```

But this is translated into css in N duplicate definitios of SELECTOR:
``` scss
.SELECTOR {
TOKEN_1_RESULT;
}
.SELECTOR {
TOKEN_2_RESULT;
}
.SELECTOR {
TOKEN_3_RESULT;
}
...
.SELECTOR {
TOKEN_n_RESULT;
}
```

And they should be filled togeteher in only one SELECTOR:
``` scss
.SELECTOR {
TOKEN_1_RESULT;
TOKEN_2_RESULT;
TOKEN_3_RESULT;
TOKEN_n_RESULT;
}
```

## Example with button
For example to override the button style we can do the next:
``` scss
@use '@angular/material' as mat;

:root {
@include mat.button-overrides((
filled-container-color: orange,
filled-label-text-color: red,
));
}
```

But this is translated into css in two duplicate definitios of :root
``` scss
:root {
--mdc-filled-button-container-color: orange;
}
:root {
--mdc-filled-button-label-text-color: red;
}
```

And they should be filled togeteher:
``` scss
:root {
--mdc-filled-button-container-color: orange;
--mdc-filled-button-label-text-color: red;
}
```
# Explanation of why this should be improved
If we edit a lot of things it generate a lot of unnecessary verbiage that is unefficiency and cause greatly hinders debugging during develmpment.

For example, if we edit 100 Selectors and modify 20 tokens in each one, we have at the end 20 duplicate definitions per each selector that is a total of 2000 selector definitions with one line each instead of 100 selector definitions with 20 lines each.

Logically this makes the final css inefficient as it has many selectors to check, in this case 2000 instead of 100.

# Thanks
Thank you very much for your great work. I hope you correct this, and if there is already a way to avoid these duplicities please let me know and you should add it to the official documentation.

### Use Case

_No response_

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

ドキュメント化されている mat.*-overrides mixin から始め、特に button-overrides の例を確認し、複数のトークンのオーバーライドがどのように出力されるかを調べてください。完了条件は、例が重複したセレクターではなく、両方のカスタムプロパティを含む1つの :root ルールを生成することです。生成された CSS を変更前と変更後で比較してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
sass
領域
frontend
issue の種類
機能追加
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。