Inline component CSS style processing

package.json

@@ -224,7 +224,7 @@
     "typescript": "4.2.4",
     "verdaccio": "4.12.0",
     "verdaccio-auth-memory": "^10.0.0",
-    "webpack": "5.31.0",
+    "webpack": "5.31.2",
     "webpack-dev-middleware": "4.1.0",
     "webpack-dev-server": "3.11.2",
     "webpack-merge": "5.7.3",

packages/angular_devkit/build_angular/package.json

@@ -69,7 +69,7 @@
     "terser-webpack-plugin": "4.2.3",
     "text-table": "0.2.0",
     "tree-kill": "1.2.2",
-    "webpack": "5.31.0",
+    "webpack": "5.31.2",
     "webpack-dev-middleware": "4.1.0",
     "webpack-dev-server": "3.11.2",
     "webpack-merge": "5.7.3",

packages/angular_devkit/build_angular/src/browser/specs/styles_spec.ts

@@ -124,6 +124,56 @@ describe('Browser Builder styles', () => {
     await browserBuild(architect, host, target, { extractCss: true });
   });
 
+  it('supports autoprefixer with inline component styles in JIT mode', async () => {
+    host.writeMultipleFiles({
+      './src/app/app.component.ts': `
+        import { Component } from '@angular/core';
+
+        @Component({
+          selector: 'app-root',
+          templateUrl: './app.component.html',
+          styles: ['div { flex: 1 }'],
+        })
+        export class AppComponent {
+          title = 'app';
+        }
+      `,
+      '.browserslistrc': 'IE 10',
+    });
+
+    // Set target to ES5 to avoid differential loading and unnecessary testing time
+    host.replaceInFile('tsconfig.json', '"target": "es2017"', '"target": "es5"');
+
+    const { files } = await browserBuild(architect, host, target, { aot: false });
+
+    expect(await files['main.js']).toContain('-ms-flex: 1;');
+  });
+
+  it('supports autoprefixer with inline component styles in AOT mode', async () => {
+    host.writeMultipleFiles({
+      './src/app/app.component.ts': `
+        import { Component } from '@angular/core';
+
+        @Component({
+          selector: 'app-root',
+          templateUrl: './app.component.html',
+          styles: ['div { flex: 1 }'],
+        })
+        export class AppComponent {
+          title = 'app';
+        }
+      `,
+      '.browserslistrc': 'IE 10',
+    });
+
+    // Set target to ES5 to avoid differential loading and unnecessary testing time
+    host.replaceInFile('tsconfig.json', '"target": "es2017"', '"target": "es5"');
+
+    const { files } = await browserBuild(architect, host, target, { aot: true });
+
+    expect(await files['main.js']).toContain('-ms-flex: 1;');
+  });
+
   extensionsWithImportSupport.forEach(ext => {
     it(`supports imports in ${ext} files`, async () => {
       host.writeMultipleFiles({
@@ -456,7 +506,8 @@ describe('Browser Builder styles', () => {
     main = await files['main.js'];
     expect(styles).toContain(`url('/assets/global-img-absolute.svg')`);
     expect(main).toContain(`url('/assets/component-img-absolute.svg')`);
-  });
+  // NOTE: Timeout for large amount of builds in test. Test should be split up when refactored.
+  }, 4 * 60 * 1000);
 
   it(`supports bootstrap@4 with full path`, async () => {
     const bootstrapPath = dirname(require.resolve('bootstrap/package.json'));