kendo-themes icon indicating copy to clipboard operation
kendo-themes copied to clipboard

Getting Warning Usage of '~' in imports is deprecated

Open raphaelpinel opened this issue 2 years ago • 2 comments

Describe the bug I am installing Angular 14.2.2 together with @progress/kendo-theme-material 5.8.1

While installing with npm install I am getting a lot (more than 100) of similar warnings:

Warning: '/Users/<user-name>/<project-path>/node_modules/@progress/kendo-theme-material/scss/action-buttons/_layout.scss' imports '~@progress/kendo-theme-default/scss/action-buttons/_layout.scss' with a tilde. Usage of '~' in imports is deprecated.

Here is the link to the webpack Sass loader where the deprecation is coming from: https://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules

Affected package (please remove the unneeded items)

  • theme-material

Affected suites (please remove the unneeded items)

  • Kendo UI for Angular

Build system information (please remove the unneeded items)

  • OS: [Mac]
  • Node version: [16.17.0]
  • NPM version: [8.15.0]

raphaelpinel avatar Sep 15 '22 15:09 raphaelpinel

Unlike node, sass, as of now, works with local files first and then tries to resolve the path by means of checking in specific folders or use function, both provided trough configuration.

In other words, we use tilde (~) to denote import from package manager folder, because it's a very obvious prefix and is not a valid path that will fallback to said function.

That's more or less the same thing stated in sass-loader documentation.

But let's get to the question in hand -- can we make the warnings disappear? Sure, but that will require a major version. We can target it for 2023 R1, together with some other planned changes.

In the mean time, in the highly unlikely scenario that said deprecation turns to "not supported", you can simply pass an importer function sass-loader, which is what happens right now, internally.

joneff avatar Sep 16 '22 09:09 joneff

Thanks @joneff What is the planned schedule for the 2023.1 release?

raphaelpinel avatar Sep 16 '22 11:09 raphaelpinel

Pardon me for the delay. The themes have a slightly offset release cycle so the product themes have time to implement changes.

The themes will be released on January 9th, 2023 and the product release will follow on January 18th, 2023.

However, starting immediately after 2022 R3 SP2, which is November 28th and December 7th, respectively, we can have those changes applied in a dev version. Considering dev versions are automatically released every monday morning, a dev version with the changes could be out as soon as December 12th. Could.

We use fixes, closes and resolves keywords and as soon as we merge the target PR, this issue will be closed and you'll know that the changes will be in the next dev version.

joneff avatar Oct 30 '22 08:10 joneff

As of Angular 15, the tilde import is deprecated in the angular-devkit package. This will cause project build to fail when the theme is imported from the source scss folder:

@import '@progress/kendo-theme-bootstrap/scss/all.scss';

As a temporary workaround, until we fix the import paths, you can import the theme from the flattened file in the dist folder as follows:

@import '@progress/kendo-theme-bootstrap/dist/all.scss';

Here is a working StackBlitz example with the workaround for the theme import: https://stackblitz.com/edit/angular-kdsrdk-9svntr

The above workaround will still produce warning errors for division in calc, due to the usage of the modern Sass API in angular. These warnings can be ignored for now. However, they can also be silenced through the NG_BUILD_LEGACY_SASS=1 ng build flag.

Juveniel avatar Nov 24 '22 09:11 Juveniel

@Juveniel indeed, it's a working solution. By the way it's importing whole huge styles set... At least, project compiles and styling applied, thx!

BaHXeLiSiHg avatar Nov 30 '22 08:11 BaHXeLiSiHg

@Juveniel @joneff I am trying to scoped theme css inside a class as per recommendation over here https://www.telerik.com/account/support-center/view-ticket/1588967

However all.scss compile is not working if i import inside class. Am i missing anything here?

Hoping you can view this support ticket. Below are my description.

I am loading application in Hybrid mode which use both AngularJs and Angular. And as my AngularJS use kendo js version and in Angular i am using kendo angular version. So my css are getting conflict each others.

Trying to namespace all theme css class with a custom class. .angular-scoped{ @import '~@progress/kendo-theme-default/dist/all.scss'; }

In Html:

<div class="angular-scoped">
  <div class="row">
    <button kendoButton [themeColor]="'success'">Inside scope</button>
  </div>
</div>

My package.json

{ "name": "app14", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test" }, "private": true, "dependencies": { "@angular/animations": "^14.2.0", "@angular/common": "^14.2.0", "@angular/compiler": "^14.2.0", "@angular/core": "^14.2.0", "@angular/forms": "^14.2.0", "@angular/platform-browser": "^14.2.0", "@angular/platform-browser-dynamic": "^14.2.0", "@angular/router": "^14.2.0", "@progress/kendo-angular-buttons": "^8.2.2", "bootstrap": "^5.2.3", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4", "@progress/kendo-angular-common": "^3.0.0", "@progress/kendo-angular-l10n": "^4.0.0", "@progress/kendo-angular-popup": "^5.0.0", "@progress/kendo-licensing": "^1.0.2", "@angular/localize": "^14.2.0", "@progress/kendo-theme-default": "^5.0.0" }, "devDependencies": { "@angular-devkit/build-angular": "^14.2.10", "@angular/cli": "~14.2.10", "@angular/compiler-cli": "^14.2.0", "@types/jasmine": "~4.0.0", "jasmine-core": "~4.3.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "typescript": "~4.7.2" } }

Getting compiled error ./src/styles.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js): C:\Users\asit.panda\vm_share\app14\node_modules@progress\kendo-theme-default\dist\all.scss:4761:12: Can't resolve 'null' in 'C:\Users\asit.panda\vm_share\app14\src'

./src/styles.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js): C:\Users\asit.panda\vm_share\app14\node_modules@progress\kendo-theme-default\dist\all.scss:18467:8: Can't resolve 'null' in 'C:\Users\asit.panda\vm_share\app14\src'

./src/styles.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js): C:\Users\asit.panda\vm_share\app14\node_modules@progress\kendo-theme-default\dist\all.scss:31731:12: Can't resolve 'null' in 'C:\Users\asit.panda\vm_share\app14\src'

asitpanda avatar Dec 06 '22 05:12 asitpanda

As a temporary workaround, until we fix the import paths, you can import the theme from the flattened file in the dist folder

This isn't working for me and I am getting this error. I have installed the dev version (v15.12.1-dev.0) to no avail.

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
3 │ @import "~@progress/kendo-theme-core/scss/functions/index.import.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@progress/kendo-theme-bootstrap/scss/core/functions/_index.scss 3:9  @import
  node_modules/@progress/kendo-theme-bootstrap/scss/core/_index.scss 1:9            @import
  node_modules/@progress/kendo-theme-bootstrap/scss/index.scss 1:9                  @import
  @progress/kendo-theme-bootstrap/scss/all.scss 1:9                                 @import
  _main.scss 3:9                                                                    @import
  src/styles.scss 2:9                                                               root stylesheet

Am I doing something wrong @Juveniel?

geo242 avatar Dec 08 '22 19:12 geo242

@geo242 I had the same issue with Angular 15 (3869). Your mistake is, that you aren't importing the 'all.scss' from the dist folder: @progress/kendo-theme-bootstrap/dist/all.scss

EricSch avatar Dec 13 '22 13:12 EricSch