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 个 reaction 已指派 0 人 在 GitHub 查看
area: theming feature P4
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
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 示例,并检查多个 token override 的输出方式。完成的标准是该示例生成一个包含两个自定义属性的 :root 规则,而不是重复的选择器;比较生成的 CSS 修改前后的差异。

由索引模型根据 Issue 内容生成。

评估

技术栈
sass
领域
frontend
Issue 类型
功能
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。