Angular 8 build environmental issue. "Compound selectors may no longer be extended"

We have an older Angular 8 app that has a some bit rot. We brought in a new developer and we are planning on upgrading everything to ng latest. I have an M1 Mac and everything builds fine on my machine. He has an intel based Mac, but when he tries to build, he gets the error below. Node, Npm, Angular CLI versions have all be downgraded to match mine, but still no luck.

ERROR in ./src/assets/scss/theme.scss
    Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):
     
                    @extend .k-button::before;
                           ^
          Compound selectors may no longer be extended.
    Consider `@extend .k-button, ::before` instead.
    See ExtendCompound for details.
     
        ╷
    105 │                 @extend .k-button::before;
        │                         ^^^^^^^^^^^^^^^^^
        ╵
      node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/toolbar/_layout.scss 105:25  root stylesheet
          in /Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/@progress/kendo-theme-bootstrap/modules/@progress/kendo-theme-default/scss/toolbar/_layout.scss (line 105, column 25)
        at /Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/webpack/lib/NormalModule.js:316:20
        at /Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/loader-runner/lib/LoaderRunner.js:367:11
        at /Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/loader-runner/lib/LoaderRunner.js:233:18
        at context.callback (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
        at /Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass-loader/lib/loader.js:52:13
        at Function.$2 (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:24388:48)
        at wO.$2 (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:15315:15)
        at uT.vr (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:9046:42)
        at uT.vq (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:9048:32)
        at iA.uD (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:8396:46)
        at us.$0 (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:8538:7)
        at Object.eH (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:1512:80)
        at ad.ba (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:8459:3)
        at iO.ba (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:8389:25)
        at iO.cv (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:8376:6)
        at py.cv (/Users/redacted/Development/Personal/repos/Projects/Proverbs/redacted/src/redacted.Web/ClientApp/node_modules/sass/sass.dart.js:8166:35)
    ERROR in node_modules/@types/node/assert.d.ts(2,68): error TS1144: '{' or ';' expected.
    node_modules/@types/node/assert.d.ts(53,68): error TS1144: '{' or ';' expected.
    node_modules/@types/node/assert.d.ts(62,94): error TS1144: '{' or ';' expected.
    node_modules/@types/node/assert.d.ts(62,101): error TS1005: ';' expected.
    node_modules/@types/node/assert.d.ts(62,104): error TS1005: ';' expected.
    node_modules/@types/node/assert.d.ts(64,98): error TS1144: '{' or ';' expected.
    node_modules/@types/node/assert.d.ts(64,105): error TS1005: ';' expected.
    node_modules/@types/node/assert.d.ts(64,108): error TS1005: ';' expected.
    node_modules/@types/node/assert.d.ts(72,47): error TS1144: '{' or ';' expected.
    node_modules/@types/node/assert.d.ts(72,53): error TS1005: ';' expected.
    node_modules/@types/node/assert.d.ts(72,56): error TS1005: ';' expected.
    node_modules/@types/node/assert.d.ts(99,61): error TS1005: ';' expected.
    node_modules/pdfjs-dist/types/src/display/annotation_storage.d.ts(66,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/annotation_storage.d.ts(80,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/api.d.ts(1410,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/api.d.ts(1466,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/editor/annotation_editor_layer.d.ts(190,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/editor/editor.d.ts(225,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/editor/tools.d.ts(173,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/editor/tools.d.ts(245,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/editor/tools.d.ts(271,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/metadata.d.ts(10,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/src/display/optional_content_config.d.ts(11,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/web/annotation_editor_layer_builder.d.ts(55,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/web/pdf_find_controller.d.ts(83,5): error TS1127: Invalid character.
    node_modules/pdfjs-dist/types/web/text_accessibility.d.ts(41,5): error TS1127: Invalid character.

You should check if you have to rename style and skipTests to versions 8 deprecated styleext and spec inside your angular.json file.

Check the following link:
https://github.com/angular/angular-cli/commit/e92c46a

I don't think your problem is with Angular/Node/NPM but rather with SASS, did you check that you have the same version (either dart or libsass?) as your colleague? Had to dig a little to find it again (had the same issue a while ago) but here it is for reference: https://sass-lang.com/documentation/breaking-changes/extend-compound

It seems to be a problem with the Sass-loader library, which is used to convert Sass code to CSS code. According to the error message, compound selectors can no longer be extended. Have you tried doing what error message suggests?

> Consider using @extend .k-button, ::before instead of @extend
> .k-button::before in theme.scss

You should also check that you are using the same version of Sass-loader.

You can also try removing the node_modules, clearing the cache with npm cache clean and re-installing the dependencies.

If you see the error itself, it explains the error, which is from your errors I am quoting

@extend .k-button::before;
Compound selectors may no longer be extended.
    Consider `@extend .k-button, ::before` instead.

The issue is because of the breaking change with sass @extend. Check Docs Example

> Breaking Change: Extending Compound Selectors
>
> LibSass currently allows compound selectors like .message.info to be
> extended, but the way it was extended doesn't match the way @extend is
> meant to work.

// Instead of just `.message.info`.
%message-info, .message.info {
  border: 1px solid black;
  font-size: 1.5rem;
}

.heads-up {
  // Instead of `.message.info`.
  @extend %message-info;
}

Kindly check the original docs for example

I can think of the following possibilities:

1. Wrong package-lock control version

It could be that your package-lock.json file is not on your version control.
Before of npm install: make sure that both, yours and the other machine are exactly the same.

If this turns out to be the problem, it means that there's an incompatibility issue between your TypeScript version and some of your @types packages. It works in your machine because your package-lock file "locked it" to a compatible one there. Also, npm update will break things for the same reasons.

2. Break types issue

It might be a CRLF (Windows), LF (Unix and Mac) vs CR (Old Mac) differences issue.

If the code was written using a MAC, then it's probably using LF only. git has an autocrlf option which you have to configure correctly to handle things transparently. Try to download the project again and run --renormalize:

git add --renormalize

From documentation:
> Apply the "clean" process freshly to all tracked files to forcibly add
> them again to the index. This is useful after changing core.autocrlf
> configuration or the text attribute in order to correct files added
> with wrong CRLF/LF line endings. This option implies -u.