fix(@angular-devkit/build-angular): fix autoprefixer comments support in scss

Change Scss output style to `expanded` as otherwise sass will remove comments that are needed for autoprefixer when webpack is in prod mode because of the following implementation in `sass-loader`:
See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70

Fixes #17041

(cherry picked from commit d29d403)

Author: alan-agius4

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts

@@ -136,6 +136,11 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
               // bootstrap-sass requires a minimum precision of 8
               precision: 8,
               includePaths,
+              // Use expanded as otherwise sass will remove comments that are needed for autoprefixer
+              // Ex: /* autoprefixer grid: autoplace */
+              // tslint:disable-next-line: max-line-length
+              // See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70
+              outputStyle: 'expanded',
             },
           },
         },

packages/angular_devkit/build_angular/test/browser/styles_spec_large.ts

@@ -309,6 +309,24 @@ describe('Browser Builder styles', () => {
     expect(await files['styles.css']).toContain('/*! important-comment */div{flex:1}');
   });
 
+  it('supports autoprefixer grid comments in SCSS with optimization true', async () => {
+    host.writeMultipleFiles({
+      'src/styles.scss': tags.stripIndents`
+        /* autoprefixer grid: autoplace */
+        .css-grid-container {
+          display: grid;
+          row-gap: 10px;
+          grid-template-columns: 100px;
+        }
+      `,
+      browserslist: 'IE 10',
+    });
+
+    const overrides = { extractCss: true, optimization: true, styles: ['src/styles.scss'] };
+    const { files } = await browserBuild(architect, host, target, overrides);
+    expect(await files['styles.css']).toContain('-ms-grid-columns:100px;');
+  });
+
   // TODO: consider making this a unit test in the url processing plugins.
   it(`supports baseHref/deployUrl in resource urls without rebaseRootRelativeCssUrls`, async () => {
     // Use a large image for the relative ref so it cannot be inlined.