Incosistency of styling between development and production build

Bug encountered:

I’m experiencing an inconsistent behavior regarding the styling of the form fields. In my application I styled the standard components mat-input-flex mat-form-field-flex class through ::ng-deep like so:

mat-form-field {
  &.mat-form-field {
    font-family: $body_font;
  }

  ::ng-deep .mat-form-field-flex,
  ::ng-deep .mat-input-flex {
    background-color: #f0f0ff !important;
    padding: 0 12px !important;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  }

and that works fine in my development environment. When I do build the application for production (with Angular CLI through ng build --prod) those styles don’t get applied anymore. I’m not entirely sure if it’s an issue with material or with the cli.

What is the expected behavior?

The styles produced in development should match the ones in production.

Versions

Tested on Chrome 62 and Firefox Quantum 57

Angular CLI: 1.5.5
Node: 8.9.1
OS: linux x64
Angular: 5.0.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.0-rc0
@angular/cli: 1.5.5
@angular/material: 5.0.0-rc0
@angular-devkit/build-optimizer: 0.0.34
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.38
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.8
typescript: 2.4.2
webpack: 3.8.1

[PrinzJuliano]

I can confirm that ng build --prod --build-optimizer=false works perfectly fine when you struggle to built your ng app with just ng build --prod

[clydin]

1.7 has a new stylesheet optimization pipeline. You can try it in the current betas (latest is 1.7.0-beta.1).