bug(Migration): Migration generates invalid scss file

[Mike-Becatti]

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

14.2.5

Description

When upgrading from Angular Material 14 to Angular Material 15 using the "ng update @angular/material@15" command, the migration creates an invalid scss file.

Reproduction

Steps to reproduce:

1. run "ng update @angular/material@15"

SCSS file before upgrade:
@use '@angular/material' as mat;
@import '@angular/material/theming';
@include mat.core();

// #region Palette Definition

// colors generated from using our base colors in this tool: http://mcg.mbitson.com/

$myBlue: (
50: #e1f0f8,
100: #b4d9ee,
200: #82bfe3,
300: #50a5d8,
400: #2b92cf,
500: #057fc7,
600: #0477c1,
700: #046cba,
800: #0362b3,
900: #014fa6,
A100: #d0e3ff,
A200: #9dc5ff,
A400: #6aa7ff,
A700: #5198ff,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);

//$myGreen: ( 50 : #e7f3e0, 100 : #c2e0b3, 200 : #99cc80, 300 : #70b84d, 400 : #52a826, 500 : #339900, 600 : #2e9100, 700 : #278600, 800 : #207c00, 900 : #146b00, A100 : #a5ff9a, A200 : #78ff67, A400 : #4aff34, A700 : #33ff1a, contrast: ( 50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #000000, A700 : #000000, ) );
$myGreen: (
50: #ebf7ed,
100: #ceebd1,
200: #addeb2,
300: #8cd093,
400: #73c67c,
500: #5abc65,
600: #52b65d,
700: #48ad53,
800: #3fa549,
900: #2e9737,
A100: #dcffdf,
A200: #a9ffb0,
A400: #76ff82,
A700: #5dff6a,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);

$myRed: (
50: #fee8e7,
100: #fcc7c3,
200: #faa19b,
300: #f77b72,
400: #f65f54,
500: #f44336,
600: #f33d30,
700: #f13429,
800: #ef2c22,
900: #ec1e16,
A100: #ffffff,
A200: #ffe9e9,
A400: #ffb8b6,
A700: #ff9f9c,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);

$my-yellow: (
50: #fff8e5,
100: #ffeebf,
200: #ffe394,
300: #ffd769,
400: #ffcf49,
500: #ffc629,
600: #ffc024,
700: #ffb91f,
800: #ffb119,
900: #ffa40f,
A100: #ffffff,
A200: #fffcf7,
A400: #ffe7c4,
A700: #ffddab,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #000000,
600: #000000,
700: #000000,
800: #000000,
900: #000000,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);

$my-gray: (
50: #fdfdfe,
100: #f9fbfb,
200: #f5f8f9,
300: #f1f5f7,
400: #eef2f5,
500: #ebf0f3,
600: #e9eef1,
700: #e5ecef,
800: #e2e9ed,
900: #dde5ea,
A100: #ffffff,
A200: #ffffff,
A400: #ffffff,
A700: #ffffff,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #000000,
600: #000000,
700: #000000,
800: #000000,
900: #000000,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);

// #endregion

$companyAppPrimary: mat.define-palette($myBlue);
$companyAppAccent: mat.define-palette($myGreen);
$companyAppWarn: mat.define-palette($myRed);

$companyAppTheme: mat.define-light-theme($companyAppPrimary, $companyAppAccent, $companyAppWarn);

@mixin mat-tooltip-theme($companyAppTheme) {
.mat-tooltip {
background: mat.get-color-from-palette($myBlue, 500);
}
}

@include mat.all-component-themes($companyAppTheme);

.mat-checkbox-inner-container {
height: 13px !important;
width: 13px !important;
}

.checkbox-smaller .mat-checkbox-inner-container {
height: 10px !important;
width: 10px !important;
}
.checkbox-smaller .mat-checkbox-frame {
border-width: 1px;
}

.mat-radio-inner-circle,
.mat-radio-outer-circle,
.mat-radio-container {
height: 13px !important;
width: 13px !important;
}

.mat-cancel {
background-color: #ffffff;
color: #000000;
}

.mat-raised-button {
border-radius: 5px !important;
font-weight: 600;
letter-spacing: 0.5px;
font-size: 100%;
}

.mat-error {
color: mat.get-color-from-palette($myRed, 500) !important;
}
.mat-warning {
color: mat.get-color-from-palette($my-yellow, 500) !important;
}
.mat-question {
color: mat.get-color-from-palette($myBlue, 500) !important;
}
.mat-info {
color: mat.get-color-from-palette($myBlue, 300) !important;
}
.mat-good {
color: mat.get-color-from-palette($myGreen, 300) !important;
}
.mat-raised-button[disabled] {
cursor: not-allowed !important;
}

.tooltip-large {
font-size: 10px;
line-height: 13px;
padding: 9px;
}

.tooltip-above {
background: #105783;
padding: 5px 10px;
margin-bottom: 5px !important;
overflow: visible !important;
font-size: 12px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.tooltip-above:after {
content: '';
width: 0;
height: 0;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: -5px;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #105783 transparent transparent transparent;
text-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}

.jobListAutoComplete .mat-option-text {
font-size: 13px;
}
.createNewCustomerOption {
color: #057fc7 !important;
}

/*
trying to remove some of the padding above and below the form field controls -->
https: //github.com//issues/7975
*/
.mat-form-field.no-padding {
margin-bottom: -1.25em;
margin-top: -1em;

.mat-form-field-wrapper {
padding-bottom: 0;
}

.mat-form-field-infix {
padding-top: 0;
}

.mat-form-field-underline {
bottom: 0;
}
}

/*
Travel editor checkbox label
*/
.moving-popup__footer .mat-checkbox-label {
font-size: 12px;
color: #595959;
}
.moving-popup__footer .autoApproveCheckBox .mat-checkbox-label {
position: relative;
top: 4px;
line-height: 14px;
white-space: normal;
}
.mat-snack-bar-container {
border-radius: 0px;
}

.snackBarPanel_systemMessages {
background-color: #0d7fc6;
border: solid 3px white;
height: 63px;
}
.snackBarPanel_systemMessages span {
color: white;
}
.snackBarPanel_systemMessages .mat-button {
background-color: mat.get-color-from-palette($myGreen, 300);
}

.mat-checkbox.smallerLabel {
.mat-checkbox-label {
font-size: 12px;
}
}

mat-checkbox.text-wrap {
label.mat-checkbox-layout {
white-space: normal;
}
span.mat-checkbox-inner-container {
margin-top: 5px;
}
}

.mat-raised-button.grayButton {
background-color: #ebf0f3;
}

.mat-radio-group.contents-top {
.mat-radio-label {
align-items: flex-start;
padding-top: 20px;
}
}

/* custom mat-accordion look /
.mat-accordion.more-spacing .mat-expansion-panel,
.mat-accordion.more-spacing .mat-expansion-panel {
margin: 5px 0px;
border-radius: 5px;
}
.mat-accordion.more-spacing .mat-expansion-panel:not(.mat-expanded),
.mat-accordion.more-spacing .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
border-radius: 5px;
}
.mat-accordion.more-spacing .mat-expansion-panel:not([class='mat-elevation-z']) {
box-shadow: none;
}
.mat-accordion.more-spacing .mat-expansion-panel.mat-expanded {
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
.mat-accordion.more-spacing .mat-expansion-panel-header-title,
.mat-accordion.more-spacing .mat-expansion-panel-header-description {
margin-right: 0px;
flex-grow: 2;
}
.mat-accordion.more-spacing .mat-expansion-panel-body {
padding: 0 15px 16px;
}

/* custom form-field w/o the underline (works for disabled too) */
.mat-form-field.no-underline .mat-form-field-underline {
display: none;
}

/* mat-dialog overload */
.cdk-overlay-dark-backdrop {
background: rgba(21, 46, 62, 0.9);
}

/* mat-select options dropdown panel needs to always be on top */
.cdk-overlay-container {
z-index: 100000;
}

/* mat-stepper custom look */
.mat-stepper-vertical.status-stepper .mat-step-header.mat-accent .mat-step-icon-state-edit {
background-color: #25c7e5;
}
.mat-stepper-vertical.status-stepper .mat-step-header .mat-step-icon {
background-color: #acb5b8;
}
.mat-stepper-vertical.status-stepper .mat-step-header.mat-accent .mat-step-icon.mat-step-icon-selected {
background-color: #5abc65;
}
.mat-stepper-vertical.status-stepper .mat-step-header .mat-step-text-label {
line-height: 18px;
}
.mat-stepper-vertical.status-stepper .mat-step-header .mat-step-label.mat-step-label-selected {
font-weight: 600;
}

SCSS After Upgrade

@use '@angular/material' as mat;
@import '@angular/material/theming';
@// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
// The following line adds:
// 1. Default typography styles for all components
// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
// If you specify typography styles for the components you use elsewhere, you should delete this line.
// If you don't need the default component typographies but still want the hierarchy styles,
// you can delete this line and instead use:
// @include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());
@include mat.all-legacy-component-typographies();
@include mat.legacy-core()

// #region Palette Definition

// colors generated from using our base colors in this tool: http://mcg.mbitson.com/

$myBlue: (
50: #e1f0f8,
100: #b4d9ee,
200: #82bfe3,
300: #50a5d8,
400: #2b92cf,
500: #057fc7,
600: #0477c1,
700: #046cba,
800: #0362b3,
900: #014fa6,
A100: #d0e3ff,
A200: #9dc5ff,
A400: #6aa7ff,
A700: #5198ff,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);

//$myGreen: ( 50 : #e7f3e0, 100 : #c2e0b3, 200 : #99cc80, 300 : #70b84d, 400 : #52a826, 500 : #339900, 600 : #2e9100, 700 : #278600, 800 : #207c00, 900 : #146b00, A100 : #a5ff9a, A200 : #78ff67, A400 : #4aff34, A700 : #33ff1a, contrast: ( 50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #000000, A700 : #000000, ) );
$myGreen: (
50: #ebf7ed,
100: #ceebd1,
200: #addeb2,
300: #8cd093,
400: #73c67c,
500: #5abc65,
600: #52b65d,
700: #48ad53,
800: #3fa549,
900: #2e9737,
A100: #dcffdf,
A200: #a9ffb0,
A400: #76ff82,
A700: #5dff6a,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #ffffff,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);

$myRed: (
50: #fee8e7,
100: #fcc7c3,
200: #faa19b,
300: #f77b72,
400: #f65f54,
500: #f44336,
600: #f33d30,
700: #f13429,
800: #ef2c22,
900: #ec1e16,
A100: #ffffff,
A200: #ffe9e9,
A400: #ffb8b6,
A700: #ff9f9c,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #ffffff,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);

$my-yellow: (
50: #fff8e5,
100: #ffeebf,
200: #ffe394,
300: #ffd769,
400: #ffcf49,
500: #ffc629,
600: #ffc024,
700: #ffb91f,
800: #ffb119,
900: #ffa40f,
A100: #ffffff,
A200: #fffcf7,
A400: #ffe7c4,
A700: #ffddab,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #000000,
600: #000000,
700: #000000,
800: #000000,
900: #000000,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);

$my-gray: (
50: #fdfdfe,
100: #f9fbfb,
200: #f5f8f9,
300: #f1f5f7,
400: #eef2f5,
500: #ebf0f3,
600: #e9eef1,
700: #e5ecef,
800: #e2e9ed,
900: #dde5ea,
A100: #ffffff,
A200: #ffffff,
A400: #ffffff,
A700: #ffffff,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #000000,
600: #000000,
700: #000000,
800: #000000,
900: #000000,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000
)
);

// #endregion

$companyAppPrimary: mat.define-palette($myBlue);
$companyAppAccent: mat.define-palette($myGreen);
$companyAppWarn: mat.define-palette($myRed);

$companyAppTheme: mat.define-light-theme($companyAppPrimary, $companyAppAccent, $companyAppWarn);

@mixin mat-tooltip-theme($companyAppTheme) {
.mat-tooltip {
background: mat.get-color-from-palette($myBlue, 500);
}
}

@include mmat.all-legacy-component-themes$companyAppTheme);

.mat-checkbox-inner-container {
height: 13px !important;
width: 13px !important;
}

.checkbox-smaller .mat-checkbox-inner-container {
height: 10px !important;
width: 10px !important;
}
.checkbox-smaller .mat-checkbox-frame {
border-width: 1px;
}

.mat-radio-inner-circle,
.mat-radio-outer-circle,
.mat-radio-container {
height: 13px !important;
width: 13px !important;
}

.mat-cancel {
background-color: #ffffff;
color: #000000;
}

.mat-raised-button {
border-radius: 5px !important;
font-weight: 600;
letter-spacing: 0.5px;
font-size: 100%;
}

.mat-error {
color: mat.get-color-from-palette($myRed, 500) !important;
}
.mat-warning {
color: mat.get-color-from-palette($my-yellow, 500) !important;
}
.mat-question {
color: mat.get-color-from-palette($myBlue, 500) !important;
}
.mat-info {
color: mat.get-color-from-palette($myBlue, 300) !important;
}
.mat-good {
color: mat.get-color-from-palette($myGreen, 300) !important;
}
.mat-raised-button[disabled] {
cursor: not-allowed !important;
}

.tooltip-large {
font-size: 10px;
line-height: 13px;
padding: 9px;
}

.tooltip-above {
background: #105783;
padding: 5px 10px;
margin-bottom: 5px !important;
overflow: visible !important;
font-size: 12px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

.tooltip-above:after {
content: '';
width: 0;
height: 0;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: -5px;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #105783 transparent transparent transparent;
text-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}

.jobListAutoComplete .mat-option-text {
font-size: 13px;
}
.createNewCustomerOption {
color: #057fc7 !important;
}

/*
trying to remove some of the padding above and below the form field controls -->
https: //github.com//issues/7975
*/
.mat-form-field.no-padding {
margin-bottom: -1.25em;
margin-top: -1em;

.mat-form-field-wrapper {
padding-bottom: 0;
}

.mat-form-field-infix {
padding-top: 0;
}

.mat-form-field-underline {
bottom: 0;
}
}

/*
Travel editor checkbox label
*/
.moving-popup__footer .mat-checkbox-label {
font-size: 12px;
color: #595959;
}
.moving-popup__footer .autoApproveCheckBox .mat-checkbox-label {
position: relative;
top: 4px;
line-height: 14px;
white-space: normal;
}
.mat-snack-bar-container {
border-radius: 0px;
}

.snackBarPanel_systemMessages {
background-color: #0d7fc6;
border: solid 3px white;
height: 63px;
}
.snackBarPanel_systemMessages span {
color: white;
}
.snackBarPanel_systemMessages .mat-button {
background-color: mat.get-color-from-palette($myGreen, 300);
}

.mat-checkbox.smallerLabel {
.mat-checkbox-label {
font-size: 12px;
}
}

mat-checkbox.text-wrap {
label.mat-checkbox-layout {
white-space: normal;
}
span.mat-checkbox-inner-container {
margin-top: 5px;
}
}

.mat-raised-button.grayButton {
background-color: #ebf0f3;
}

.mat-radio-group.contents-top {
.mat-radio-label {
align-items: flex-start;
padding-top: 20px;
}
}

/* custom mat-accordion look /
.mat-accordion.more-spacing .mat-expansion-panel,
.mat-accordion.more-spacing .mat-expansion-panel {
margin: 5px 0px;
border-radius: 5px;
}
.mat-accordion.more-spacing .mat-expansion-panel:not(.mat-expanded),
.mat-accordion.more-spacing .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
border-radius: 5px;
}
.mat-accordion.more-spacing .mat-expansion-panel:not([class='mat-elevation-z']) {
box-shadow: none;
}
.mat-accordion.more-spacing .mat-expansion-panel.mat-expanded {
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
.mat-accordion.more-spacing .mat-expansion-panel-header-title,
.mat-accordion.more-spacing .mat-expansion-panel-header-description {
margin-right: 0px;
flex-grow: 2;
}
.mat-accordion.more-spacing .mat-expansion-panel-body {
padding: 0 15px 16px;
}

/* custom form-field w/o the underline (works for disabled too) */
.mat-form-field.no-underline .mat-form-field-underline {
display: none;
}

/* mat-dialog overload */
.cdk-overlay-dark-backdrop {
background: rgba(21, 46, 62, 0.9);
}

/* mat-select options dropdown panel needs to always be on top */
.cdk-overlay-container {
z-index: 100000;
}

/* mat-stepper custom look */
.mat-stepper-vertical.status-stepper .mat-step-header.mat-accent .mat-step-icon-state-edit {
background-color: #25c7e5;
}
.mat-stepper-vertical.status-stepper .mat-step-header .mat-step-icon {
background-color: #acb5b8;
}
.mat-stepper-vertical.status-stepper .mat-step-header.mat-accent .mat-step-icon.mat-step-icon-selected {
background-color: #5abc65;
}
.mat-stepper-vertical.status-stepper .mat-step-header .mat-step-text-label {
line-height: 18px;
}
.mat-stepper-vertical.status-stepper .mat-step-header .mat-step-label.mat-step-label-selected {
font-weight: 600;
}

Expected Behavior

We were expecting that when the migration tool updated our scss file that it would not create an invalid file with syntax errors.

Actual Behavior

Our scss file was modified in a way that creates syntax errors.

Environment

• Angular:
  @angular-devkit/architect 0.1501.6
  @angular-devkit/build-angular 15.1.6
  @angular-devkit/core 15.1.6
  @angular-devkit/schematics 15.1.6
  @angular/cli 15.1.6
  @angular/google-maps 14.2.5
  @schematics/angular 15.1.6
  rxjs 7.5.7
  typescript 4.9.5
• CDK/Material: from 14.25 to 15.1.5
• Browser(s): NA
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[wagnermaciel]

This is very difficult to understand from what you've shared. Is the problem with the '@' before the todo? Please simplify your example to only demonstrate the issue. This saves us the pain of needing to read through walls of text to understand what is going on

[Mike-Becatti]

After the migration there were several syntax error that were introduced. You mentioned the '@' symbol. That is one, but look at how it tried to update the legacy theme "@include mmat.all-legacy-component-themes$companyAppTheme);" It should have been "@include mat.all-legacy-component-themes($companyAppTheme);" Noticed that it added an extra 'm' to the statement and did not create an open parenthesis.

[Mike-Becatti]

Also if you review my post you will see there are 2 sections. One shows the file before the upgrade and one after. If you compare the two, you will see the changes that it made including the syntax errors. I did not cut out any of my file in case it contributed to issue. If there is a better way to share the before and after of my file please let me know.