angular / angular/components

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

Ouverte
#30,248 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
area: theming feature P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### 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_

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par les mixins mat.*-overrides documentés, en particulier l’exemple button-overrides, et examinez comment plusieurs remplacements de tokens sont générés. C’est terminé lorsque l’exemple produit une seule règle :root contenant les deux propriétés personnalisées au lieu de sélecteurs dupliqués ; comparez le CSS généré avant et après.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
sass
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.