Skip to content

Commit 539be63

Browse files
simeonoffsimeonoff
committed
fix(themes): restore $exclude support for scoped-styles components
1 parent 7d30a6a commit 539be63

4 files changed

Lines changed: 290 additions & 63 deletions

File tree

‎projects/bundle-test/src/styles.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ $app-palette: palette(
2020

2121
$include: (
2222
igx-chip,
23-
igx-buttongroup,
23+
igx-button-group,
2424
// igx-input-group,
2525
// igx-checkbox,
2626
// igx-radio,

‎projects/igniteui-angular/core/src/core/styles/base/_functions.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,13 @@
2727
$used: true;
2828

2929
@if list.index($checklist, $component) {
30-
$deps: map.get($components, $component, 'usedBy');
30+
// `map.get` returns null for a component that was never registered
31+
// (e.g. one whose structural styles live in its own scoped
32+
// *.component.scss rather than being included from core()). Sass
33+
// treats null as a single-item list, so list.length(null) is 1, not
34+
// 0 — which would make the component look permanently depended-on.
35+
// Normalize to an empty list so it's correctly excludable.
36+
$deps: map.get($components, $component, 'usedBy') or ();
3137
$excluded: ();
3238

3339
@each $item in $checklist {

‎projects/igniteui-angular/core/src/core/styles/themes/_core.scss‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,72 @@
129129
@include tooltip.component();
130130
@include watermark.component();
131131

132+
// Register components whose structural styles now live in their own
133+
// scoped *.component.scss (compiled per Angular component) rather than
134+
// being included here. They no longer have a `.component()` mixin to
135+
// call, but `theme()`'s `$exclude`/`is-used()` machinery still needs
136+
// them present in the registry — otherwise they can never be named in
137+
// $exclude (map-keys($components) wouldn't know about them) and
138+
// is-used() can't reason about their dependents. Deps restored from the
139+
// last pre-scoped-styles registration (master).
140+
@include base.register-component('igx-action-strip', $deps: (igx-icon-button, igx-drop-down, igx-icon));
141+
@include base.register-component('igx-avatar', $deps: (igx-icon));
142+
@include base.register-component('igx-badge', $deps: (igx-icon));
143+
@include base.register-component('igx-banner', $deps: (igx-button, igx-expansion-panel, igx-icon));
144+
@include base.register-component('igx-bottom-nav', $deps: (igx-icon));
145+
@include base.register-component('igx-button-group', $deps: (igx-button));
146+
@include base.register-component('igx-calendar', $deps: (igx-icon));
147+
@include base.register-component('igx-card', $deps: (igx-icon, igx-button));
148+
@include base.register-component('igx-carousel', $deps: (igx-icon));
149+
@include base.register-component('igx-checkbox');
150+
@include base.register-component('igx-chip', $deps: (igx-icon));
151+
@include base.register-component('igx-circular-bar');
152+
@include base.register-component('igx-column-actions');
153+
@include base.register-component('igx-combo', $deps: (igx-checkbox, igx-drop-down, igx-input-group, igx-icon));
154+
@include base.register-component('igx-date-picker', $deps: (igx-calendar));
155+
@include base.register-component('igx-date-range-picker', $deps: (igx-calendar, igx-input-group));
156+
@include base.register-component('igx-dialog', $deps: (igx-button, igx-overlay));
157+
@include base.register-component('igx-divider');
158+
@include base.register-component('igc-dockmanager', $deps: (igc-trial-watermark));
159+
@include base.register-component('igx-drop-down', $deps: (igx-overlay));
160+
@include base.register-component('igx-expansion-panel', $deps: (igx-icon));
161+
@include base.register-component('igx-file-input', $deps: (igx-input-group));
162+
@include base.register-component(
163+
'igx-grid',
164+
$deps: (
165+
igx-checkbox, igx-chip, igx-grid-excel-style-filtering, igx-grid-summary,
166+
igx-icon-button, igx-input-group, igx-grid-toolbar, igx-paginator,
167+
igx-query-builder, igc-trial-watermark
168+
)
169+
);
170+
@include base.register-component(
171+
'igx-grid-excel-style-filtering',
172+
$deps: (igx-button, igx-checkbox, igx-icon-button, igx-input-group)
173+
);
174+
@include base.register-component('igx-grid-summary', $deps: (igx-icon));
175+
@include base.register-component('igx-grid-toolbar', $deps: (igx-button, igx-column-actions, igx-icon, igx-linear-bar, igx-drop-down));
176+
@include base.register-component('igx-icon');
177+
@include base.register-component('igx-input-group', $deps: (igx-icon));
178+
@include base.register-component('igx-linear-bar');
179+
@include base.register-component('igx-list');
180+
@include base.register-component('igx-nav-drawer');
181+
@include base.register-component('igx-navbar', $deps: (igx-icon));
182+
@include base.register-component('igx-paginator', $deps: (igx-button, igx-icon-button, igx-input-group));
183+
@include base.register-component('igx-pivot-data-selector');
184+
@include base.register-component('igx-query-builder', $deps: (igx-icon, igx-button, igx-chip, igx-select, igx-input-group, igx-icon-button, igx-overlay));
185+
@include base.register-component('igx-radio');
186+
@include base.register-component('igc-rating');
187+
@include base.register-component('igx-select', $deps: (igx-checkbox, igx-drop-down, igx-input-group, igx-icon));
188+
@include base.register-component('igx-slider');
189+
@include base.register-component('igx-snackbar', $deps: (igx-button, igx-overlay));
190+
@include base.register-component('igx-splitter');
191+
@include base.register-component('igx-stepper');
192+
@include base.register-component('igx-switch');
193+
@include base.register-component('igx-tabs', $deps: (igx-button, igx-icon));
194+
@include base.register-component('igx-time-picker', $deps: (igx-icon, igx-input-group));
195+
@include base.register-component('igx-toast', $deps: (igx-overlay));
196+
@include base.register-component('igx-tree', $deps: (igx-checkbox, igx-icon));
197+
132198
// Build the component dependency-tree
133199
@include base.dependecy-tree(base.$components);
134200

‎projects/igniteui-angular/core/src/core/styles/themes/generators/_base.scss‎

Lines changed: 216 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -121,67 +121,222 @@
121121

122122
@layer ig.base, ig.typography, ig.components, ig.derived;
123123

124-
// Component tokens — emitted once per theme.
125-
// Structural styles live in each component's *.component.scss.
126-
@include std.component-tokens('igx-action-strip', 'action-strip', $schema);
127-
@include std.component-tokens('igx-advanced-filtering-dialog', 'query-builder', $schema);
128-
@include std.component-tokens('igx-avatar', 'avatar', $schema);
129-
@include std.component-tokens('igx-badge', 'badge', $schema);
130-
@include std.component-tokens('igx-banner', 'banner', $schema);
131-
@include std.component-tokens('igx-bottom-nav', 'bottom-nav', $schema);
132-
@include std.component-tokens('igx-button-group', 'button-group', $schema);
133-
@include std.component-tokens('igx-calendar', 'calendar', $schema);
134-
@include std.component-tokens('igx-calendar-picker--standalone', 'calendar', $schema);
135-
@include std.component-tokens('igx-calendar-view--standalone', 'calendar', $schema);
136-
@include std.component-tokens('igx-card', 'card', $schema);
137-
@include std.component-tokens('igx-carousel', 'carousel', $schema);
138-
@include std.component-tokens('igx-circular-bar', 'circular-bar', $schema);
139-
@include std.component-tokens('igx-checkbox', 'checkbox', $schema);
140-
@include std.component-tokens('igx-chip', 'chip', $schema);
141-
@include std.component-tokens('igx-column-actions', 'column-actions', $schema);
142-
@include std.component-tokens('igx-combo', 'combo', $schema);
143-
@include std.component-tokens('igx-date-picker', 'date-picker', $schema);
144-
@include std.component-tokens('igx-date-range-picker', 'date-range', $schema);
145-
@include std.component-tokens('igx-days-view--standalone', 'calendar', $schema);
146-
@include std.component-tokens('igx-dialog', 'dialog', $schema);
147-
@include std.component-tokens('igx-divider', 'divider', $schema);
148-
@include std.component-tokens('igx-drop-down', 'drop-down', $schema);
149-
@include std.component-tokens('igx-excel-filter', 'grid-excel-filtering', $schema);
150-
@include std.component-tokens('igx-excel-filter__secondary', 'grid-excel-filtering', $schema);
151-
@include std.component-tokens('igx-expansion-panel', 'expansion-panel', $schema);
152-
@include std.component-tokens('igx-grid', 'grid', $schema);
153-
@include std.component-tokens('igx-grid-summary', 'grid-summary', $schema);
154-
@include std.component-tokens('igx-grid-toolbar', 'grid-toolbar', $schema);
155-
@include std.component-tokens('igx-icon', 'icon', $schema);
156-
@include std.component-tokens('igx-input-group', 'input-group', $schema);
157-
@include std.component-tokens('igx-file-input', 'file-input', $schema);
158-
@include std.component-tokens('igx-linear-bar', 'linear-bar', $schema);
159-
@include std.component-tokens('igx-list', 'list', $schema);
160-
@include std.component-tokens('igx-month-picker', 'calendar', $schema);
161-
@include std.component-tokens('igx-nav-drawer', 'nav-drawer', $schema);
162-
@include std.component-tokens('igx-navbar', 'navbar', $schema);
163-
@include std.component-tokens('igx-paginator', 'paginator', $schema);
164-
@include std.component-tokens('igx-pivot-data-selector', 'pivot-data-selector', $schema);
165-
@include std.component-tokens('igx-query-builder', 'query-builder', $schema);
166-
@include std.component-tokens('igx-radio', 'radio', $schema);
167-
@include std.component-tokens('igx-select', 'select', $schema);
168-
@include std.component-tokens('igx-slider', 'slider', $schema);
169-
@include std.component-tokens('igx-snackbar', 'snackbar', $schema);
170-
@include std.component-tokens('igx-splitter', 'splitter', $schema);
171-
@include std.component-tokens('igx-stepper', 'stepper', $schema);
172-
@include std.component-tokens('igx-switch', 'switch', $schema);
173-
@include std.component-tokens('igx-tabs', 'tabs', $schema);
174-
@include std.component-tokens('igx-time-picker', 'time-picker', $schema);
175-
@include std.component-tokens('igx-toast', 'toast', $schema);
176-
@include std.component-tokens('igx-tree-node', 'tree', $schema);
177-
178-
// Derived themes — emitted once per theme.
179-
@include grid.derived-themes($schema, $theme);
180-
@include grid-column-actions.derived-themes($schema);
181-
@include grid-toolbar.derived-themes($schema, $theme);
182-
@include grid-excel-filtering.derived-themes($schema, $theme);
183-
@include paginator.derived-themes($schema, $theme);
184-
@include query-builder.derived-themes($schema, $theme);
124+
// Component tokens — emitted once per theme, gated by $exclude so a
125+
// consumer that only uses a handful of components isn't paying for the
126+
// tokens of everything else. Structural styles live in each component's
127+
// *.component.scss.
128+
@if is-used('igx-action-strip', $exclude) {
129+
@include std.component-tokens('igx-action-strip', 'action-strip', $schema);
130+
}
131+
132+
@if is-used('igx-avatar', $exclude) {
133+
@include std.component-tokens('igx-avatar', 'avatar', $schema);
134+
}
135+
136+
@if is-used('igx-badge', $exclude) {
137+
@include std.component-tokens('igx-badge', 'badge', $schema);
138+
}
139+
140+
@if is-used('igx-banner', $exclude) {
141+
@include std.component-tokens('igx-banner', 'banner', $schema);
142+
}
143+
144+
@if is-used('igx-bottom-nav', $exclude) {
145+
@include std.component-tokens('igx-bottom-nav', 'bottom-nav', $schema);
146+
}
147+
148+
@if is-used('igx-button-group', $exclude) {
149+
@include std.component-tokens('igx-button-group', 'button-group', $schema);
150+
}
151+
152+
@if is-used('igx-calendar', $exclude) {
153+
@include std.component-tokens('igx-calendar', 'calendar', $schema);
154+
@include std.component-tokens('igx-calendar-picker--standalone', 'calendar', $schema);
155+
@include std.component-tokens('igx-calendar-view--standalone', 'calendar', $schema);
156+
@include std.component-tokens('igx-days-view--standalone', 'calendar', $schema);
157+
@include std.component-tokens('igx-month-picker', 'calendar', $schema);
158+
}
159+
160+
@if is-used('igx-card', $exclude) {
161+
@include std.component-tokens('igx-card', 'card', $schema);
162+
}
163+
164+
@if is-used('igx-carousel', $exclude) {
165+
@include std.component-tokens('igx-carousel', 'carousel', $schema);
166+
}
167+
168+
@if is-used('igx-circular-bar', $exclude) {
169+
@include std.component-tokens('igx-circular-bar', 'circular-bar', $schema);
170+
}
171+
172+
@if is-used('igx-checkbox', $exclude) {
173+
@include std.component-tokens('igx-checkbox', 'checkbox', $schema);
174+
}
175+
176+
@if is-used('igx-chip', $exclude) {
177+
@include std.component-tokens('igx-chip', 'chip', $schema);
178+
}
179+
180+
@if is-used('igx-column-actions', $exclude) {
181+
@include std.component-tokens('igx-column-actions', 'column-actions', $schema);
182+
}
183+
184+
@if is-used('igx-combo', $exclude) {
185+
@include std.component-tokens('igx-combo', 'combo', $schema);
186+
}
187+
188+
@if is-used('igx-date-picker', $exclude) {
189+
@include std.component-tokens('igx-date-picker', 'date-picker', $schema);
190+
}
191+
192+
@if is-used('igx-date-range-picker', $exclude) {
193+
@include std.component-tokens('igx-date-range-picker', 'date-range', $schema);
194+
}
195+
196+
@if is-used('igx-dialog', $exclude) {
197+
@include std.component-tokens('igx-dialog', 'dialog', $schema);
198+
}
199+
200+
@if is-used('igx-divider', $exclude) {
201+
@include std.component-tokens('igx-divider', 'divider', $schema);
202+
}
203+
204+
@if is-used('igx-drop-down', $exclude) {
205+
@include std.component-tokens('igx-drop-down', 'drop-down', $schema);
206+
}
207+
208+
@if is-used('igx-grid-excel-style-filtering', $exclude) {
209+
@include std.component-tokens('igx-excel-filter', 'grid-excel-filtering', $schema);
210+
@include std.component-tokens('igx-excel-filter__secondary', 'grid-excel-filtering', $schema);
211+
}
212+
213+
@if is-used('igx-expansion-panel', $exclude) {
214+
@include std.component-tokens('igx-expansion-panel', 'expansion-panel', $schema);
215+
}
216+
217+
@if is-used('igx-grid', $exclude) {
218+
@include std.component-tokens('igx-grid', 'grid', $schema);
219+
}
220+
221+
@if is-used('igx-grid-summary', $exclude) {
222+
@include std.component-tokens('igx-grid-summary', 'grid-summary', $schema);
223+
}
224+
225+
@if is-used('igx-grid-toolbar', $exclude) {
226+
@include std.component-tokens('igx-grid-toolbar', 'grid-toolbar', $schema);
227+
}
228+
229+
@if is-used('igx-icon', $exclude) {
230+
@include std.component-tokens('igx-icon', 'icon', $schema);
231+
}
232+
233+
@if is-used('igx-input-group', $exclude) {
234+
@include std.component-tokens('igx-input-group', 'input-group', $schema);
235+
}
236+
237+
@if is-used('igx-file-input', $exclude) {
238+
@include std.component-tokens('igx-file-input', 'file-input', $schema);
239+
}
240+
241+
@if is-used('igx-linear-bar', $exclude) {
242+
@include std.component-tokens('igx-linear-bar', 'linear-bar', $schema);
243+
}
244+
245+
@if is-used('igx-list', $exclude) {
246+
@include std.component-tokens('igx-list', 'list', $schema);
247+
}
248+
249+
@if is-used('igx-nav-drawer', $exclude) {
250+
@include std.component-tokens('igx-nav-drawer', 'nav-drawer', $schema);
251+
}
252+
253+
@if is-used('igx-navbar', $exclude) {
254+
@include std.component-tokens('igx-navbar', 'navbar', $schema);
255+
}
256+
257+
@if is-used('igx-paginator', $exclude) {
258+
@include std.component-tokens('igx-paginator', 'paginator', $schema);
259+
}
260+
261+
@if is-used('igx-pivot-data-selector', $exclude) {
262+
@include std.component-tokens('igx-pivot-data-selector', 'pivot-data-selector', $schema);
263+
}
264+
265+
@if is-used('igx-query-builder', $exclude) {
266+
@include std.component-tokens('igx-advanced-filtering-dialog', 'query-builder', $schema);
267+
@include std.component-tokens('igx-query-builder', 'query-builder', $schema);
268+
}
269+
270+
@if is-used('igx-radio', $exclude) {
271+
@include std.component-tokens('igx-radio', 'radio', $schema);
272+
}
273+
274+
@if is-used('igx-select', $exclude) {
275+
@include std.component-tokens('igx-select', 'select', $schema);
276+
}
277+
278+
@if is-used('igx-slider', $exclude) {
279+
@include std.component-tokens('igx-slider', 'slider', $schema);
280+
}
281+
282+
@if is-used('igx-snackbar', $exclude) {
283+
@include std.component-tokens('igx-snackbar', 'snackbar', $schema);
284+
}
285+
286+
@if is-used('igx-splitter', $exclude) {
287+
@include std.component-tokens('igx-splitter', 'splitter', $schema);
288+
}
289+
290+
@if is-used('igx-stepper', $exclude) {
291+
@include std.component-tokens('igx-stepper', 'stepper', $schema);
292+
}
293+
294+
@if is-used('igx-switch', $exclude) {
295+
@include std.component-tokens('igx-switch', 'switch', $schema);
296+
}
297+
298+
@if is-used('igx-tabs', $exclude) {
299+
@include std.component-tokens('igx-tabs', 'tabs', $schema);
300+
}
301+
302+
@if is-used('igx-time-picker', $exclude) {
303+
@include std.component-tokens('igx-time-picker', 'time-picker', $schema);
304+
}
305+
306+
@if is-used('igx-toast', $exclude) {
307+
@include std.component-tokens('igx-toast', 'toast', $schema);
308+
}
309+
310+
@if is-used('igx-tree', $exclude) {
311+
@include std.component-tokens('igx-tree-node', 'tree', $schema);
312+
}
313+
314+
// Derived themes — emitted once per theme, gated the same way as the
315+
// parent component they augment, since they only apply overrides scoped
316+
// inside that component's own selectors.
317+
@if is-used('igx-grid', $exclude) {
318+
@include grid.derived-themes($schema, $theme);
319+
}
320+
321+
@if is-used('igx-column-actions', $exclude) {
322+
@include grid-column-actions.derived-themes($schema);
323+
}
324+
325+
@if is-used('igx-grid-toolbar', $exclude) {
326+
@include grid-toolbar.derived-themes($schema, $theme);
327+
}
328+
329+
@if is-used('igx-grid-excel-style-filtering', $exclude) {
330+
@include grid-excel-filtering.derived-themes($schema, $theme);
331+
}
332+
333+
@if is-used('igx-paginator', $exclude) {
334+
@include paginator.derived-themes($schema, $theme);
335+
}
336+
337+
@if is-used('igx-query-builder', $exclude) {
338+
@include query-builder.derived-themes($schema, $theme);
339+
}
185340

186341
@if is-used('igx-ripple', $exclude) {
187342
$ripple-theme-map: ripple-theme(

0 commit comments

Comments
 (0)