bug(slider): $weight: Passing a number without unit % (60) is deprecated

[iKrishnaSahu]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Getting below error after migrating angular from v14 to v15rc

[build:demothemes] DEPRECATION WARNING[build:demothemes] : $weight: Passing a number without unit % (60) is deprecated.

To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units

   ╷
77 │ ┌     color.mix(
78 │ │       $value-indicator-color,
79 │ │       theme-color.prop-value(on-primary),
80 │ │       $value-indicator-opacity * 100
81 │ │     ),
   │ └─────^
   ╵
[build:demothemes]     node_modules\@material\slider\_slider-theme.scss 77:5                       @use
    node_modules\@angular\material\slider\_slider-theme.scss 3:1                @use
    node_modules\@angular\material\core\density\private\_all-density.scss 25:1  @forward
    node_modules\@angular\material\_index.scss 18:1                             @use
    libs\material\styles\all-theme.scss 1:1                                     @forward
    libs\material\index.scss 4:1                                                @use
    apps\ruf-app\src\app\demo.scss 27:1                                         @use
    apps\ruf-app\src\app\custom-themes\gold.scss 1:1                        root stylesheet

Reproduction

Steps to reproduce:
1.
2.

Expected Behavior

Throwing warning

Actual Behavior

Should not throw warning

Environment

• Angular: 15.0.0-rc.4
• CDK/Material: 15.0.0-rc.3
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[iKrishnaSahu]

Reproducible demo - https://stackblitz.com/edit/angular-wmnbjm?file=src/theme.scss

[michaelfaith]

I'm seeing this as well. Thanks for posting.

[rednez]

Hi.
This issue also reproduces in Angular Material 15 (release) when using a customizable theme by using @use '@angular/material' as mat.

I tried on the cold installation of Angular 15 release and then ng add @angular/material with custom theme option.

And as a result I see in console following:

(base) ➜  ang10 git:(master) ✗ ng serve                
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   3.55 MB | 
styles.css, styles.js | styles        | 323.55 kB | 
polyfills.js          | polyfills     | 314.26 kB | 
main.js               | main          |  12.67 kB | 
runtime.js            | runtime       |   6.51 kB | 

                      | Initial Total |   4.19 MB

Build at: 2022-11-18T09:05:50.024Z - Hash: 8025839a85f4f934 - Time: 7945ms

./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss?ngGlobalStyle - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation $weight: Passing a number without unit % (60) is deprecated.

To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units

@material/slider/_slider-theme.scss 77:5                                    @use
node_modules/@angular/material/slider/_slider-theme.scss 3:1                @use
node_modules/@angular/material/core/density/private/_all-density.scss 25:1  @forward
@angular/_index.scss 18:1                                                   @use
src/styles.scss 4:1                                                         root stylesheet




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

package.json:

{
  "name": "ang10",
  "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": "^15.0.0",
    "@angular/cdk": "^15.0.0",
    "@angular/common": "^15.0.0",
    "@angular/compiler": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/material": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.0",
    "@angular/cli": "~15.0.0",
    "@angular/compiler-cli": "^15.0.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.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.8.2"
  }
}

styles.scss:

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$ang10-primary: mat.define-palette(mat.$indigo-palette);
$ang10-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$ang10-warn: mat.define-palette(mat.$red-palette);

// Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography".
$ang10-theme: mat.define-light-theme((
  color: (
    primary: $ang10-primary,
    accent: $ang10-accent,
    warn: $ang10-warn,
  )
));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include mat.all-component-themes($ang10-theme);

/* You can add global styles to this file, and also import other style files */

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

[crisbeto]

I've sent a fix upstream to MDC.