Angular 15 support

[dkimmich-onventis]

🗣️ Foreword

Angular 15 was just released. This package seems to cause issues with it.

:person_frowning: Problem Statement

After updating to Angular 15, there are build errors coming from this package, for example:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: rgb(var(--palette-primary-500)) is not a color.
  ╷
9 │   --mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
  │                                    ^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@angular/material/button/_button-theme-private.scss 9:36         -ripple-color()
  node_modules/@angular/material/button/_button-theme-private.scss 35:5         ripple-theme-styles()
  node_modules/@angular/material/button/_button-theme.scss 177:7                @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 176:5       @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 216:3       disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 175:3       using-mdc-theme()
  node_modules/@angular/material/button/_button-theme.scss 43:3                 color()
  node_modules/@angular/material/button/_button-theme.scss 216:7                @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3               private-check-duplicate-theme-styles()
  node_modules/@angular/material/button/_button-theme.scss 210:3                theme()
  node_modules/@angular/material/datepicker/_datepicker-legacy-compat.scss 6:5  legacy-button-compat-theme()
  node_modules/@angular/material/legacy-button/_button-theme.scss 168:3         color()
  node_modules/@angular/material/legacy-button/_button-theme.scss 214:7         @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3               private-check-duplicate-theme-styles()
  node_modules/@angular/material/legacy-button/_button-theme.scss 208:3         theme()
  node_modules/@angular/material/legacy-core/theming/_all-theme.scss 45:5       @content
  node_modules/@angular/material/core/theming/_theming.scss 402:3               private-check-duplicate-theme-styles()
  node_modules/@angular/material/legacy-core/theming/_all-theme.scss 43:3       all-legacy-component-themes()
  projects/material-css-vars/src/lib/_main.scss 63:3                            init-mat-theme()
  projects/material-css-vars/src/lib/_main.scss 88:3                            init-material-css-vars()
  src/styles.scss 10:1

❔ Possible Solution

This package probably needs some tweaks to support Angular 15.

⤴️ Describe alternatives you've considered

Stay on Angular 14, where everything still works like expected.

➕ Additional context

I've forked this repository and performed the update, I'm getting errors here as well. https://github.com/dkimmich-onventis/angular-material-css-vars/tree/angular-15

[vpetrusevici]

Hi!. I updated too. Here is PR #104
Looks like I fixed all changes, but still has some strange scss errors on build. Can smb check it pls?

[vpetrusevici]

After some changes I got this:

SassError: $color: rgb(var(--palette-primary-500)) is not a color.
   ╷
16 │     track-color: color.adjust(mdc-theme-color.prop-value($color), $alpha: -0.75),

Looks like now it will be more difficult to use css vars

[vpetrusevici]

I think it relates #25981

[mayurrawte]

Any updates on this

[vpetrusevici]

Any updates on this

I don't think you will see any update until Angular team fix issue with css vars...

[vpetrusevici]

Hi, guys. I spent really much time to fix it and now looks like it's working.
Please check my PR #104

[DmitryEfimenko]

@johannesjo PR is open, could you please take a look? I see no communication is happening and we're all very much looking forward to Angular 15 support.

Thanks.

[johannesjo]

I will try to have a look tomorrow. Sorry! I am very busy these days... :-/

[json-derulo]

I've tried out version 4.0.0 and I have 2 issues with it.

1. I am no longer able to import the main SCSS file from angular-material-css-vars/src/lib/main, it throws a Sass error. This can be fixed by properly configuring the exports in package.json.
2. For MDC components, the styling works fine. But legacy components are not properly styled anymore. This can be fixed by additionally adding the legacy mixins, but it increases the resulting bundle size.

I will prepare a pull request to fix those issues.

[vpetrusevici]

@json-derulo we can add "if" condition in scss to use legacy or mdc components based on flag param.
Or just create a separate function with -legacy suffix

[json-derulo]

@johannesjo @vpetrusevici please see my new pull request #110.

[maxfriedmann]

@json-derulo I tested your PR, works really well. Also solves #94 which I always had to patch manually.

[dkimmich-onventis]

I am now successfully able to use this package in Angular v15. Thanks everyone!

[johannesjo]

Thank you very much!! And sorry again for the delay!