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

Preview Give feedback

1. Streamline module dependencies #5061
   Internal +1
   
2. Detach utils package #5053
   +0
   

[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]

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.

[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:

• Deprecate and remove @import sass/sass#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.

[Harpush]

Any news?

[joneff]

Any news?

Yep!

We are beginning with simple code refactoring. More broadly speaking, #5036 is the PR that, when merged, will resolve the issue, but there are myriad of other small tweaks that must be done. We'll update the issue as we go.

[Harpush]

Do what's the status?

[epetrow]

Do what's the status?

Hey @Harpush,

We have begun the process of migration to the modern syntax starting with common modules and will gradually continue with each theme.

[epetrow]

v10.0.0 of the Kendo Themes marks the official adoption of the dart-sass implementation. All Kendo UI theme products (including CSS Utilities and Font icons) have been updated to the @use/@forward syntax. Below is a short summary of the enchancements that this breaking change brings:

• Significantly decreased Telerik and Kendo UI themes bundle size.
• Faster compilation for the Telerik and Kendo UI themes.
• Improved capability for future development and maintenance due to the adoption of the Dart Sass module system.
• Resolution of all deprecation warnings during the Telerik and Kendo UI themes compilation.
• Bug fixes and compatibility with the latest Sass language features.
• Enhanced compatibility with modern JavaScript frameworks and build tools (e.g., Webpack, Vite, Next.js), ensuring smooth integration into - modern development workflows.
• Better alignment with CSS specifications, facilitating the creation of future-proof styles.

For more detailed information about the change and how to customize and import the themes, please refer to our official documentation.