Skip to content

Commit 90ba6a4

Browse files
devversionandrewseguin
devversion
authored and
andrewseguin
committed
refactor: do not generate default density styles multiple times
For backwards compatibility, we do not want to generate density styles multiple times. With the new API, the theme mixins include density styles by default and this could mean that common theme setup as followed could result in duplicate density styles: ``` @include angular-material-theme($light-theme); .dark-theme { @include angular-material-theme($dark-theme); } ``` Ideally, developers would now use the `angular-material-color` mixin for their dark theme styles (as recommended in the theming guide), but we cannot expect this to happen for all applications immediately, so we provide code in Angular Material that automatically ensures that the default density styles are not generated a second time. The goal is to generate default density styles only *once* and at top-level if the legacy theming API is used. If density styles would be duplicated through explicit use of the new theming API, we'll show a warning and refer to the dedicated "duplicate styles" guide.
1 parent 6095e29 commit 90ba6a4

File tree

77 files changed

+1485
-879
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+1485
-879
lines changed

‎.stylelintrc.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@
9494
"ignorePattern": "/https?://.*/"
9595
}],
9696
"linebreaks": "unix",
97-
"selector-class-pattern": ["^_?(mat-|cdk-|example-|demo-|ng-|mdc-|map-)", {
97+
"selector-class-pattern": ["^_?(mat-|cdk-|example-|demo-|ng-|mdc-|map-|test-)", {
9898
"resolveNestedSelectors": true
9999
}]
100100
}

‎scripts/check-rollup-globals.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const filesToCheckGlob = [
2929
'src/**/!(*.spec).ts',
3030
'!src/+(e2e-app|universal-app|dev-app)/**/*.ts',
3131
'!src/**/schematics/**/*.ts',
32+
'!src/**/tests/**/*.ts',
3233
];
3334

3435
const failures = new Map<string, string[]>();

‎src/material-experimental/column-resize/_column-resize.scss

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -106,18 +106,19 @@
106106

107107
@mixin mat-column-resize-theme($theme-or-color-config) {
108108
$theme: _mat-legacy-get-theme($theme-or-color-config);
109-
@include _mat-check-duplicate-theme-styles($theme, 'mat-column-resize');
110-
$color: mat-get-color-config($theme);
111-
$density: mat-get-density-config($theme);
112-
$typography: mat-get-typography-config($theme);
109+
@include _mat-check-duplicate-theme-styles($theme, 'mat-column-resize') {
110+
$color: mat-get-color-config($theme);
111+
$density: mat-get-density-config($theme);
112+
$typography: mat-get-typography-config($theme);
113113

114-
@if $color != null {
115-
@include mat-column-resize-color($color);
116-
}
117-
@if $density != null {
118-
@include mat-column-resize-density($density);
119-
}
120-
@if $typography != null {
121-
@include mat-column-resize-typography($typography);
114+
@if $color != null {
115+
@include mat-column-resize-color($color);
116+
}
117+
@if $density != null {
118+
@include mat-column-resize-density($density);
119+
}
120+
@if $typography != null {
121+
@include mat-column-resize-typography($typography);
122+
}
122123
}
123124
}

‎src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,19 @@
2020

2121
@mixin mat-mdc-autocomplete-theme($theme-or-color-config) {
2222
$theme: _mat-legacy-get-theme($theme-or-color-config);
23-
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-autocomplete');
24-
$color: mat-get-color-config($theme);
25-
$density: mat-get-density-config($theme);
26-
$typography: mat-get-typography-config($theme);
23+
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-autocomplete') {
24+
$color: mat-get-color-config($theme);
25+
$density: mat-get-density-config($theme);
26+
$typography: mat-get-typography-config($theme);
2727

28-
@if $color != null {
29-
@include mat-mdc-autocomplete-color($color);
30-
}
31-
@if $density != null {
32-
@include mat-mdc-autocomplete-density($density);
33-
}
34-
@if $typography != null {
35-
@include mat-mdc-autocomplete-typography($typography);
28+
@if $color != null {
29+
@include mat-mdc-autocomplete-color($color);
30+
}
31+
@if $density != null {
32+
@include mat-mdc-autocomplete-density($density);
33+
}
34+
@if $typography != null {
35+
@include mat-mdc-autocomplete-typography($typography);
36+
}
3637
}
3738
}

‎src/material-experimental/mdc-button/_button-theme.scss

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -184,19 +184,20 @@ $mat-button-state-target: '.mdc-button__ripple';
184184

185185
@mixin mat-mdc-button-theme($theme-or-color-config) {
186186
$theme: _mat-legacy-get-theme($theme-or-color-config);
187-
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-button');
188-
$color: mat-get-color-config($theme);
189-
$density: mat-get-density-config($theme);
190-
$typography: mat-get-typography-config($theme);
187+
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-button') {
188+
$color: mat-get-color-config($theme);
189+
$density: mat-get-density-config($theme);
190+
$typography: mat-get-typography-config($theme);
191191

192-
@if $color != null {
193-
@include mat-mdc-button-color($color);
194-
}
195-
@if $density != null {
196-
@include mat-mdc-button-density($density);
197-
}
198-
@if $typography != null {
199-
@include mat-mdc-button-typography($typography);
192+
@if $color != null {
193+
@include mat-mdc-button-color($color);
194+
}
195+
@if $density != null {
196+
@include mat-mdc-button-density($density);
197+
}
198+
@if $typography != null {
199+
@include mat-mdc-button-typography($typography);
200+
}
200201
}
201202
}
202203

@@ -263,19 +264,20 @@ $mat-button-state-target: '.mdc-button__ripple';
263264

264265
@mixin mat-mdc-fab-theme($theme-or-color-config) {
265266
$theme: _mat-legacy-get-theme($theme-or-color-config);
266-
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-fab');
267-
$color: mat-get-color-config($theme);
268-
$density: mat-get-density-config($theme);
269-
$typography: mat-get-typography-config($theme);
267+
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-fab') {
268+
$color: mat-get-color-config($theme);
269+
$density: mat-get-density-config($theme);
270+
$typography: mat-get-typography-config($theme);
270271

271-
@if $color != null {
272-
@include mat-mdc-fab-color($color);
273-
}
274-
@if $density != null {
275-
@include mat-mdc-fab-density($density);
276-
}
277-
@if $typography != null {
278-
@include mat-mdc-fab-typography($typography);
272+
@if $color != null {
273+
@include mat-mdc-fab-color($color);
274+
}
275+
@if $density != null {
276+
@include mat-mdc-fab-density($density);
277+
}
278+
@if $typography != null {
279+
@include mat-mdc-fab-typography($typography);
280+
}
279281
}
280282
}
281283

@@ -340,18 +342,19 @@ $mat-button-state-target: '.mdc-button__ripple';
340342

341343
@mixin mat-mdc-icon-button-theme($theme-or-color-config) {
342344
$theme: _mat-legacy-get-theme($theme-or-color-config);
343-
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-icon-button');
344-
$color: mat-get-color-config($theme);
345-
$density: mat-get-density-config($theme);
346-
$typography: mat-get-typography-config($theme);
345+
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-icon-button') {
346+
$color: mat-get-color-config($theme);
347+
$density: mat-get-density-config($theme);
348+
$typography: mat-get-typography-config($theme);
347349

348-
@if $color != null {
349-
@include mat-mdc-icon-button-color($color);
350-
}
351-
@if $density != null {
352-
@include mat-mdc-icon-button-density($density);
353-
}
354-
@if $typography != null {
355-
@include mat-mdc-icon-button-typography($typography);
350+
@if $color != null {
351+
@include mat-mdc-icon-button-color($color);
352+
}
353+
@if $density != null {
354+
@include mat-mdc-icon-button-density($density);
355+
}
356+
@if $typography != null {
357+
@include mat-mdc-icon-button-typography($typography);
358+
}
356359
}
357360
}

‎src/material-experimental/mdc-card/_card-theme.scss

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -54,18 +54,19 @@
5454

5555
@mixin mat-mdc-card-theme($theme-or-color-config) {
5656
$theme: _mat-legacy-get-theme($theme-or-color-config);
57-
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-card');
58-
$color: mat-get-color-config($theme);
59-
$density: mat-get-density-config($theme);
60-
$typography: mat-get-typography-config($theme);
57+
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-card') {
58+
$color: mat-get-color-config($theme);
59+
$density: mat-get-density-config($theme);
60+
$typography: mat-get-typography-config($theme);
6161

62-
@if $color != null {
63-
@include mat-mdc-card-color($color);
64-
}
65-
@if $density != null {
66-
@include mat-mdc-card-density($density);
67-
}
68-
@if $typography != null {
69-
@include mat-mdc-card-typography($typography);
62+
@if $color != null {
63+
@include mat-mdc-card-color($color);
64+
}
65+
@if $density != null {
66+
@include mat-mdc-card-density($density);
67+
}
68+
@if $typography != null {
69+
@include mat-mdc-card-typography($typography);
70+
}
7071
}
7172
}

‎src/material-experimental/mdc-checkbox/_checkbox-theme.scss

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -88,18 +88,19 @@
8888

8989
@mixin mat-mdc-checkbox-theme($theme-or-color-config) {
9090
$theme: _mat-legacy-get-theme($theme-or-color-config);
91-
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-checkbox');
92-
$color: mat-get-color-config($theme);
93-
$density: mat-get-density-config($theme);
94-
$typography: mat-get-typography-config($theme);
91+
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-checkbox') {
92+
$color: mat-get-color-config($theme);
93+
$density: mat-get-density-config($theme);
94+
$typography: mat-get-typography-config($theme);
9595

96-
@if $color != null {
97-
@include mat-mdc-checkbox-color($color);
98-
}
99-
@if $density != null {
100-
@include mat-mdc-checkbox-density($density);
101-
}
102-
@if $typography != null {
103-
@include mat-mdc-checkbox-typography($typography);
96+
@if $color != null {
97+
@include mat-mdc-checkbox-color($color);
98+
}
99+
@if $density != null {
100+
@include mat-mdc-checkbox-density($density);
101+
}
102+
@if $typography != null {
103+
@include mat-mdc-checkbox-typography($typography);
104+
}
104105
}
105106
}

‎src/material-experimental/mdc-chips/_chips-theme.scss

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -72,19 +72,20 @@
7272

7373
@mixin mat-mdc-chips-theme($theme-or-color-config) {
7474
$theme: _mat-legacy-get-theme($theme-or-color-config);
75-
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-chips');
76-
$color: mat-get-color-config($theme);
77-
$density: mat-get-density-config($theme);
78-
$typography: mat-get-typography-config($theme);
75+
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-chips') {
76+
$color: mat-get-color-config($theme);
77+
$density: mat-get-density-config($theme);
78+
$typography: mat-get-typography-config($theme);
7979

80-
@if $color != null {
81-
@include mat-mdc-chips-color($color);
82-
}
83-
@if $density != null {
84-
@include mat-mdc-chips-density($density);
85-
}
86-
@if $typography != null {
87-
@include mat-mdc-chips-typography($typography);
80+
@if $color != null {
81+
@include mat-mdc-chips-color($color);
82+
}
83+
@if $density != null {
84+
@include mat-mdc-chips-density($density);
85+
}
86+
@if $typography != null {
87+
@include mat-mdc-chips-typography($typography);
88+
}
8889
}
8990
}
9091

‎src/material-experimental/mdc-form-field/_form-field-theme.scss

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -80,18 +80,19 @@
8080

8181
@mixin mat-mdc-form-field-theme($theme-or-color-config) {
8282
$theme: _mat-legacy-get-theme($theme-or-color-config);
83-
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-form-field');
84-
$color: mat-get-color-config($theme);
85-
$density: mat-get-density-config($theme);
86-
$typography: mat-get-typography-config($theme);
83+
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-form-field') {
84+
$color: mat-get-color-config($theme);
85+
$density: mat-get-density-config($theme);
86+
$typography: mat-get-typography-config($theme);
8787

88-
@if $color != null {
89-
@include mat-mdc-form-field-color($color);
90-
}
91-
@if $density != null {
92-
@include mat-mdc-form-field-density($density);
93-
}
94-
@if $typography != null {
95-
@include mat-mdc-form-field-typography($typography);
88+
@if $color != null {
89+
@include mat-mdc-form-field-color($color);
90+
}
91+
@if $density != null {
92+
@include mat-mdc-form-field-density($density);
93+
}
94+
@if $typography != null {
95+
@include mat-mdc-form-field-typography($typography);
96+
}
9697
}
9798
}

‎src/material-experimental/mdc-helpers/_focus-indicators.scss

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,11 @@
110110
}
111111
@else {
112112
$theme: _mat-legacy-get-theme($theme-or-color);
113-
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-strong-focus-indicators');
114-
$color: mat-get-color-config($theme);
115-
@if $color != null {
116-
@include mat-mdc-strong-focus-indicators-color($color);
113+
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-strong-focus-indicators') {
114+
$color: mat-get-color-config($theme);
115+
@if $color != null {
116+
@include mat-mdc-strong-focus-indicators-color($color);
117+
}
117118
}
118119
}
119120
}

‎src/material-experimental/mdc-input/_input-theme.scss

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,19 @@
1616

1717
@mixin mat-mdc-input-theme($theme-or-color-config) {
1818
$theme: _mat-legacy-get-theme($theme-or-color-config);
19-
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-input');
20-
$color: mat-get-color-config($theme);
21-
$density: mat-get-density-config($theme);
22-
$typography: mat-get-typography-config($theme);
19+
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-input') {
20+
$color: mat-get-color-config($theme);
21+
$density: mat-get-density-config($theme);
22+
$typography: mat-get-typography-config($theme);
2323

24-
@if $color != null {
25-
@include mat-mdc-input-color($color);
26-
}
27-
@if $density != null {
28-
@include mat-mdc-input-density($density);
29-
}
30-
@if $typography != null {
31-
@include mat-mdc-input-typography($typography);
24+
@if $color != null {
25+
@include mat-mdc-input-color($color);
26+
}
27+
@if $density != null {
28+
@include mat-mdc-input-density($density);
29+
}
30+
@if $typography != null {
31+
@include mat-mdc-input-typography($typography);
32+
}
3233
}
3334
}

‎src/material-experimental/mdc-list/_list-theme.scss

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -59,18 +59,19 @@
5959

6060
@mixin mat-mdc-list-theme($theme-or-color-config) {
6161
$theme: _mat-legacy-get-theme($theme-or-color-config);
62-
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-list');
63-
$color: mat-get-color-config($theme);
64-
$density: mat-get-density-config($theme);
65-
$typography: mat-get-typography-config($theme);
62+
@include _mat-check-duplicate-theme-styles($theme, 'mat-mdc-list') {
63+
$color: mat-get-color-config($theme);
64+
$density: mat-get-density-config($theme);
65+
$typography: mat-get-typography-config($theme);
6666

67-
@if $color != null {
68-
@include mat-mdc-list-color($color);
69-
}
70-
@if $density != null {
71-
@include mat-mdc-list-density($density);
72-
}
73-
@if $typography != null {
74-
@include mat-mdc-list-typography($typography);
67+
@if $color != null {
68+
@include mat-mdc-list-color($color);
69+
}
70+
@if $density != null {
71+
@include mat-mdc-list-density($density);
72+
}
73+
@if $typography != null {
74+
@include mat-mdc-list-typography($typography);
75+
}
7576
}
7677
}

0 commit comments

Comments
 (0)