refactor(*): bundle styles with components by simeonoff · Pull Request #15125 · IgniteUI/igniteui-angular

simeonoff · 2024-12-02T13:55:55Z

Additional information (check all that apply):

Checklist:

All relevant tags have been applied to this PR
This PR includes unit tests covering all the new code (test guidelines)
This PR includes API docs for newly added methods/properties (api docs guidelines)
This PR includes feature/README.MD updates for the feature docs
This PR includes general feature table updates in the root README.MD
This PR includes CHANGELOG.MD updates for newly added functionality
This PR contains breaking changes
This PR includes ng update migrations for the breaking changes (migrations guidelines)
This PR includes behavioral changes and the feature specification has been updated with them

* feat(chips-area): add separate theme + grid sample and chips-area changes * chore(): fix spacings

Replace four identical per-component stylesheets with a single shared grid-base.styles.scss compiled to a TS string export. The base directive registers it once into document.adoptedStyleSheets on first instantiation, guarded by platform.isBrowser. All grid variants drop their redundant styleUrl. Note: SSR renders without grid styles (no <style> tag injection); full SSR support is a follow-up.

…deprecations

… build - Clean up scripts/sass.mjs: drop dead code (compileSass, buildComponentStyles, buildBaseStyles, _postProcessor), consolidate shared sass config, use async mkdir, write external source maps for theme presets, throw instead of process.exit on theme failures. - Move incremental rebuild logic into createStylesBuilder with a reverse + forward dep map for O(deps) rebuilds. - watch-styles: use the builder for incremental rebuilds and accept --no-initial via scripts/get-args.mjs to skip the initial full build. - package.json: pass --no-initial to watch:styles in `npm start` so styles aren't built twice on startup.

adrianptrv · 2026-06-05T23:44:41Z

In the Time Picker and Date Picker components, after adding encapsulation: ViewEncapsulation.None, the component inline style styles: [':host { display: block; }'] is no longer being applied. As a result, the components falls back to the default display: inline property.

This also breaks some of the samples. The issue is most noticeable in the "Reactive Forms Overview" sample.

Component
Sample

adrianptrv · 2026-06-05T23:47:49Z

For the Button-group

We have to remove the display: inline-block property from the horizontal samples because it causes issues with the scoped-styles version of the Button Group component.

Samples

adrianptrv · 2026-06-09T08:20:45Z

Card component

On the elevated version of the Card, only the box-shadow is applied, while the master version has both the box-shadow and border applied. We should make the scoped-styles version of the Card the same way as the master version by applying both the box-shadow and the border.

Sample

adrianptrv · 2026-06-09T08:24:52Z

Calendar component

The ::after elements of the selected dates in the Calendar range selection do not have any border styles defined. They inherit the border styles from the Tailwind default styles, which results in white borders being displayed at both ends of the selected range.

Sample
Tailwind CSS

adrianptrv · 2026-06-09T13:42:02Z

Date Range Picker component:

There are grid-template-columns styles intended specifically for the two-input configuration, but currently are also applying to the single-input picker. This breaks the single-input layout.

We should scope these styles to a two-input-specific selector like &:has(igx-date-range-start, igx-date-range-end){}:

Sample
Code

adrianptrv · 2026-06-10T14:16:18Z

Simple Combo component

The Combo styling CSS variables are currently declared only for igx-combo and not for igx-simple-combo. As a result, the styles are not applied to igx-simple-combo.

Scoped Sample
Master samples

adrianptrv · 2026-06-10T14:20:07Z

Chat component

The igx-avatar styles are missing in the Chat component, causing the avatar not to be displayed.

Scoped sample
Master sample

adrianptrv · 2026-06-10T14:42:26Z

Dropdown component

However, the component also uses encapsulation: ViewEncapsulation.None, which prevents style from being applied to the igx-drop-down.

The position: absolute style is required for the component to function correctly. Without it, the dropdown items auto width does not always match the width of the trigger element and can sometimes expand to the full page width, as it currently does in the scoped-styles samples. I would suggest that we move this style to the scss files and apply it directly to igx-drop-down.

Scoped sample
Component

adrianptrv · 2026-06-11T12:30:23Z

Grid Cell Merging

All Grid cell bottom borders are missing when there are merged cells. There is a selector that is overriding the intended border styles.

Sample

These files and themes have been superseeded by the scoped styles for each component.

simeonoff and others added 30 commits January 20, 2025 14:29

refactor(checkbox): fix component styles

754ec5b

build(styles): don't rely on theme service for bundled styles

0a5378d

refactor(styles): add themed component styles to a layer

83e7bbd

demos(theme): update

b99884e

refactor(avatar): update base theme

5e2372c

Merge branch 'master' into simeonoff/scoped-styles

17a9b1c

fix(avatar): icon size

444c21f

Merge branch 'master' into simeonoff/scoped-styles

e7564e8

build(lig): build component styles before library

a2b7306

refactor(icon): bundle styles with component (#15281)

363035e

fix(checkbox): make light themes functional again

8c013b2

fix(checkbox): dark themes

d27f37d

refactor(checkbox): untagle placeholder selectors

5338438

Merge branch 'master' into simeonoff/scoped-styles

2c30a5c

npm(package-lock): revert changes

e9038bd

npm(package-lock): revert changes

094e5b6

npm(package.json): revert file order

052cb39

build(npm): add back concurrently

6d2a79f

deps(node-watch): add back node-watch

9add91c

chore(*): remove some changes

ba4184b

build(scripts): global themes not building

1c0df4a

fix(checkbox): wrong tickmark in both indeterminate and checked

c1d1ad6

refactor(checkbox): organize variables better

9514481

refactor(demos): revert back to material

b1ab887

refactor(divider): convert to component and bundle styles (#15338)

8e94787

refactor(badge): bundle styles with component (#15278)

124bc0d

fix(badge): icon size

ff4cd94

refactor(badge): add layer mixin and fix icon size

f1684f4

Merge branch 'master' into simeonoff/scoped-styles

75a4e78

refactor(dialog): bundle styles with component (#15341)

8862f95

didimmova and others added 15 commits April 16, 2026 11:16

chore(deps): update theming package

ed345fe

feat(query-builder): update fluent and/or button styles

2de18bc

feat(grid): fix ghost-row styles

06d3f42

fix(chips): update chips paddings and gaps

c15c8fe

fix(badge): fix badge to work with content projection

89eb10f

fix(input-group): separate input and file-input tokens

997d916

feat(chips-area): add separate theme (#17205)

966c322

* feat(chips-area): add separate theme + grid sample and chips-area changes * chore(): fix spacings

Merge branch 'master' into simeonoff/scoped-styles

35002e3

refactor: fix build errors after merging master

3c3be0b

fix(elevations): fix indigo dark theme elevations

8f8b8dc

fix(date-range): fix discrepancies for daterange picker

f7e999e

fix(styles): rebuild grid-base.styles.ts on SCSS watch changes

48b6776

chore(scripts): clean up sass build scripts and suppress if-function …

6223d81

…deprecations

dkamburov mentioned this pull request Jun 8, 2026

[Grid] Pinned columns not showing border of active header cells #16639

Open

simeonoff added 2 commits June 10, 2026 12:20

Merge branch 'master' into simeonoff/scoped-styles

9a5f9c9

fix: errors post igniteui-theming update

6564655

simeonoff added 2 commits June 11, 2026 14:54

deps: bump theming to 27.1.0

c7aac08

npm: update package-lock.json

8cfdc9e

chore(styles): remove deprecated component/theme files

094c682

These files and themes have been superseeded by the scoped styles for each component.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(*): bundle styles with components#15125

refactor(*): bundle styles with components#15125
simeonoff wants to merge 257 commits into
masterfrom
simeonoff/scoped-styles

simeonoff commented Dec 2, 2024 •

edited by desig9stein

Loading

Uh oh!

adrianptrv commented Jun 5, 2026

Uh oh!

adrianptrv commented Jun 5, 2026

Uh oh!

adrianptrv commented Jun 9, 2026 •

edited

Loading

Uh oh!

adrianptrv commented Jun 9, 2026 •

edited

Loading

Uh oh!

adrianptrv commented Jun 9, 2026 •

edited

Loading

Uh oh!

adrianptrv commented Jun 10, 2026 •

edited

Loading

Uh oh!

adrianptrv commented Jun 10, 2026

Uh oh!

adrianptrv commented Jun 10, 2026

Uh oh!

adrianptrv commented Jun 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

simeonoff commented Dec 2, 2024 • edited by desig9stein Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Additional information (check all that apply):

Checklist:

Uh oh!

adrianptrv commented Jun 5, 2026

Uh oh!

adrianptrv commented Jun 5, 2026

Uh oh!

adrianptrv commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adrianptrv commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adrianptrv commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adrianptrv commented Jun 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

adrianptrv commented Jun 10, 2026

Uh oh!

adrianptrv commented Jun 10, 2026

Uh oh!

adrianptrv commented Jun 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

simeonoff commented Dec 2, 2024 •

edited by desig9stein

Loading

adrianptrv commented Jun 9, 2026 •

edited

Loading

adrianptrv commented Jun 9, 2026 •

edited

Loading

adrianptrv commented Jun 9, 2026 •

edited

Loading

adrianptrv commented Jun 10, 2026 •

edited

Loading