Migrate to the new SASS modules API (@use and @forward instead of @import)

[Harpush]

Is your feature request related to a problem? Please describe. The main motivating "issue" is that @import is now deprecated in favor of the new SASS modules API.

Describe the solution you would like to see implemented An API similar to the new material theming API:

@use '@progress/kendo-theme-*' as kendo-theme;

@include kendo-theme.all-components-themes($options);
@include kendo-theme.dateinput-theme($options);

Describe the alternatives you have considered Continue using the deprecated @import.

Additional context None

### Tasks
- [ ] https://github.com/telerik/kendo-themes/pull/5061
- [ ] https://github.com/telerik/kendo-themes/pull/5053

[joneff]

Our Fluent theme is based on @use instead of @import. There were, and still are, many outstanding question, challenges with this syntax. We are threading carefully, because the "old" syntax is still supported.

[Harpush]

@joneff Supported yet deprecated... All that's left is to wait I guess. Is it on the roadmap though?

[joneff]

@joneff Supported yet deprecated... All that's left is to wait I guess. Is it on the roadmap though?

That's not a question I can answer in a politically correct way...

[joneff]

It was brought to my attention that my answer may sound ~~misleading~~ ambiguous...

What I meant was that I cannot give you a straightforward answer. Is it on the roadmap -- of course! However, neither in the immediate vicinity, nor for a specific date...

To get there we need to complete certain steps like complete, verify and battle test our module system, color system and utils; workout proper customization for the new syntax; reduce differences, as much as possible, between the two flavours; to name a few.

Without those -- we are nowhere near migrating.

[goat67]

Angular 15 will not compile if this is not resolved so it is no longer supported.

[roshan-sama]

Angular 15 will not compile if this is not resolved so it is no longer supported.

Is it because of this issue: https://stackoverflow.com/questions/70074186/worker-terminated-due-to-reaching-memory-limit-js-heap-out-of-memory

I am running into this as well, I assume the solution would be to revert to Angular V14?

I was also running into issues like "$kendo-color-white", "$kendo-color-white" variable not found, but I'm not sure if I should open a separate ticket for those, would they be related to the Dart compiler being used instead of node-sass?

[joneff]

$kendo-color-white and $kendo-color-dark and many many more, are part of v6, not v5. Speaking of v6, I urge you to look at the change log -- https://github.com/telerik/kendo-themes/releases/tag/v6.0.0. This time we made sure it's as humongous as it gets, although we still find it lacking in some areas.

[joneff]

Angular 15 will not compile if this is not resolved so it is no longer supported.

@goat67 by "this", what exactly do you mean? Would it be the '~' imports, because those are fixed with v6?

[BaHXeLiSiHg]

I've tried version 6.0.1 and yes, seems like it is compiling. But scss bundle become too large if you want to import style just for few components, like +30 MB oO

With 5.0.x version we have imported styles like this:

@import "@progress/kendo-theme-material/dist/variables";
@import "@progress/kendo-theme-material/dist/maskedtextbox";
@import "@progress/kendo-theme-material/dist/editor";
@import "@progress/kendo-theme-material/dist/grid";

With 6.0.1 version it became like this (if i'm not wrong):

@import "@progress/kendo-theme-material/scss/variables";
@import "@progress/kendo-theme-material/scss/maskedtextbox/index";
@import "@progress/kendo-theme-material/scss/editor/index";
@import "@progress/kendo-theme-material/scss/grid/index";

• styles for grid were not applied...

Somebody else facing same problem with partial styles importing, or am i doing something wrong?

[joneff]

@BaHXeLiSiHg #4227 targets the first part (which is utils). We'll followup with icons.

[Harpush]

@Juveniel @joneff how does it resolve the issue? Please reopen

[Juveniel]

@Harpush the issue was unintentionally closed by automation.

@BaHXeLiSiHg the bundle size issue is be fixed in 6.0.3

[BaHXeLiSiHg]

@Juveniel 6.0.3 fails to compile with Angular 15, imports starts with "~" throws error "Can't find stylesheet to import." :/

[joneff]

@BaHXeLiSiHg Can you specify which file? I am looking at our code and I can't find a single ~ import.

[BaHXeLiSiHg]

@joneff I'm so sorry, i just noticed that i was referencing old package from another project (working inside nx workspace), for some reason, package 6.0.3 was not installed...

Yep, with 6.0.3 version everything is compiling and seems like css bundle size is small like it was!

I'm feeling that some styles for grid were not applied and saw that all Kendo packages was updated to version 11.0 (npm repository). Should we update all of them, to match 6.0.3 theming version or it is not necessary?

Grid with material theme:

[BaHXeLiSiHg]

Tried to import all styles, hoping that it will fix broken grid styles issue:

@import "@progress/kendo-theme-material/scss/all";

But got an error:

[Juveniel]

@BaHXeLiSiHg you should import the theme from the /dist folder and also update component packages to latest version.

[BaHXeLiSiHg]

@Juveniel importing from dist folder leads to same error...

By the way, after updating packages to the latest version, partial import seem like working, at least components looks normal (few styling fixes was made).

Probably editors component theming issue, applied styles like this:

$kendo-base-bg: white;

@import "@progress/kendo-theme-material/scss/variables";
@import "@progress/kendo-theme-material/scss/editor/index";

1. Background of editors toolbar controls wasn't changed (inputs + buttons) + background has different shades (inputs vs buttons).

But if i change color, for example to red:

$kendo-base-bg: red;

@import "@progress/kendo-theme-material/scss/variables";
@import "@progress/kendo-theme-material/scss/editor/index";

2. Background of editors toolbar buttons was changed, but inputs - not.

Can not find reason :\

[BaHXeLiSiHg]

Another issue about grid:

$kendo-color-primary: blue;
$kendo-base-bg: white;

@import "@progress/kendo-theme-material/scss/variables";
@import "@progress/kendo-theme-material/scss/grid/index";

1. Group footer borders are doubled (i think it's related to grids css).
2. Disabled color of navigation buttons was overridden by "@progress/kendo-theme-default/scss/pager/_layout.scss" (line 70).

3. Text and background colors of paging buttons was overridden by "@progress/kendo-theme-default/scss/pager/_layout.scss" (line 59).

Comparison screenshot of version 6.0.3

Comparison screenshot of version 5.12.0

[Harpush]

@Juveniel This issue was created for sass modules migration. It has gone off topic. I believe @BaHXeLiSiHg should create a different issue.

[Juveniel]

@BaHXeLiSiHg, the current issue is related to dart sass 2.0 migration. Thus, please open a separate issue for the Grid Material issues, or alternatively open a product support ticket from your telerik account.

[Harpush]

Any news concerning this?

[Juveniel]

Hey @Harpush,

We are working on the internals - integrating and expanding the core module system that is the base for each theme. This will allow us to gradually migrate all themes and align them with the latest sass spec.

Also, there has been news from the sass team, that the @import syntax will still be supported throughout v2.0.0. You can read more here:

• https://github.com/sass/sass/issues/3513

Taking the above into consideration, we will try to push for the kendo themes to support both the @import and @use syntax (this year/early next year) and align with the sass releases for the deprecation.

//cc @joneff

[Harpush]

Hey @Juveniel where is it standing now? It seems to be going in right direction :)

[Juveniel]

Hey @Harpush,

We are moving in that direction, yes. We are working on abstracting common chunks in the core package that will enable faster transition to the new syntax. However, we still need to wait for the official announcement from the sass team and evaluate the usage of node-sass. A specific discussion with more concrete information and steps regarding the migration will be created here in the themes repo.