Angular-cli: Optimization generates style warnings by @media print queries and removes style definitions.

[riede]

I've implemented a website that has multiple themes. It is possible to switch between the themes without reloading the app. For this each theme has an own style file where the 3rd party dependencies are imported wrapped by a class to use their SCSS variables and to style the elements (e.g. the buttons) without overwriting each statement of the 3rd party style files where a color is already set. In addition, there are specific styles of the website divided in several files (base.scss, print.scss, ...). All of them are imported in a single file named portal.scss that is included in the angunar.json. The imports are wrapped by a style statement to create a higher priority of the website styles than the styles of the 3rd party libraries without using !important.

Everything works fine using ng serve (no errors, no warnings). But building or serving the app with --prod generates several warnings that a unexpected bracket is at line xyz.

I've created a small example to reproduce the behaviour. You can check out the example and run it:

When the optimization flag is disabled ("optimization": false) in the angular.json the app starts without any warning. I opened the non-optimized style file and jumped to the lines where an unexpected bracket should be. In each case there is a closing bracket of an @media print statement.

🌍 Your Environment

Angular Version:

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.3.9
Node: 10.15.3
OS: darwin x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.9
@angular-devkit/build-angular     0.13.9
@angular-devkit/build-optimizer   0.13.9
@angular-devkit/build-webpack     0.13.9
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cli                      7.3.9
@ngtools/webpack                  7.3.9
@schematics/angular               7.3.9
@schematics/update                0.13.9
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

[alan-agius4]

Hi @riede, the problem is to be that the css generating contains warnings and infact after optimization certain parts of the code are removed to make it "valid".

The problematic part is this:

  @page {
    html.themable {
      size: auto;
      margin: 0.8cm 0.3cm;
      -moz-margin: 1cm 0.3cm;
    }
  }

The following selector html.themable is not supported in an @page rule. See: https://developer.mozilla.org/en-US/docs/Web/CSS/@page

un-optimized output

html.themable {
  /* Some basic stuff */
}
html.themable body {
  font-size: 15px;
}
html.themable button {
  border: 1px solid grey;
}
@media print {
  html.themable * {
    transition: none !important;
  }
  @page {
    html.themable {
      size: auto;
      margin: 0.8cm 0.3cm;
      -moz-margin: 1cm 0.3cm;
    }
  }
  html.themable button {
    border: 4px solid black;
  }
}

optimized output (prettified)

html.themable body {
  font-size: 15px
}

html.themable button {
  border: 1px solid grey
}

@media print {
  html.themable * {
    transition: none!important
  }
  html.themable button {
    border: 4px solid #000
  }
}

[alan-agius4]

Closing as this in actionable from our side.

[riede]

Thank you very much. 👏 Since I moved the @page part outside my part works. :-)

Now, I have to check bootstrap and other 3rd party dependencies because there are warnings, too.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}