Angular production build - CSS mixins in component style NOT working properly with Polymer's custom-style

firstor commented 7 years ago

Reproduction

Angular 4.2.3
Polymer 2

Used origami to parse custom CSS variables and mixins in the component style

/* ========= app.module.ts ========= */
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import {PolymerModule} from '@codebakery/origami';
...

@NgModule({
   ...
   imports: [
       ...
       PolymerModule.forRoot(),
       ...
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   ...
})
...

Used CSS-mixins to style <paper-textarea> element in an Angular component

<!-- ========= angular.component.html ========= -->
...
<paper-textarea class="form-control message-input-field" ...>
</paper-textarea>
...

/* ========= angular.component.css ========= */
.message-input-field {
   --paper-input-container-input-color: var(--app-input-color); /* works fine */
   --paper-input-container-underline: { /* NOT working */
       display: none;
   }
   --paper-input-container-underline-focus: { /* NOT working */
       display: none;
   }
   @apply --app-word-wrapping; /* works fine */
}

/* ========= document-level styles ========= */
--app-word-wrapping: {
 overflow-wrap: break-word;
 word-wrap: break-word;
 -ms-word-wrap: break-word;
 word-break: break-word;
 -ms-word-break: break-word;
}

Current output (on the browser's inspector)

--paper-input-container-input-color: var(--app-input-color);
--paper-input-container-underline: {display:none}--paper-input-container-underline-focus:{display:none}overflow-wrap: var(--app-word-wrapping_-_overflow-wrap);
word-wrap: var(--app-word-wrapping_-_word-wrap);
-ms-word-wrap: var(--app-word-wrapping_-_-ms-word-wrap);
word-break: var(--app-word-wrapping_-_word-break);
-ms-word-break: var(--app-word-wrapping_-_-ms-word-break);

Expected output on the inspector

--paper-input-container-input-color: var(--app-input-color);
--paper-input-container-underline_-_display: none;
--paper-input-container-underline-focus_-_display: none;
overflow-wrap: var(--app-word-wrapping_-_overflow-wrap);
word-wrap: var(--app-word-wrapping_-_word-wrap);
-ms-word-wrap: var(--app-word-wrapping_-_-ms-word-wrap);
word-break: var(--app-word-wrapping_-_word-break);
-ms-word-break: var(--app-word-wrapping_-_-ms-word-break);

This does happen only in the production build and everything works fine in the development mode. The production build is configured based on origami's production build guide and enableProdMode() is invoked in the production mode. (See also https://github.com/hotforfeature/origami/tree/master/demo for more detail of my production build configuration)

Not sure if this problem comes from Angular production mode itself or anything else.

hotforfeature commented 7 years ago

This is one of those issues developers hate: the dreaded missing semicolon. The "correct" way to write a CSS mixin is with a semicolon at the end:

html {
  --my-mixin: { display: none }; <--
  --might-still-work-but-not-correct: { display: none }
}

Angular's production build is minifying the CSS, which ShadyCSS parses at runtime. Unminified with a line break (dev mode), ShadyCSS can parse it. Minified without a line break (prod mode), it needs the semicolon.

The following CSS from your example works for me when I cloned the repo:

app.component.css

html {
  --app-word-wrapping: {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
    word-break: break-word;
    -ms-word-break: break-word;
  }; <-- Note this worked without a semicolon because there are no rules following the "improper" mixin
}

.message-input-field {
  --paper-input-container-input-color: var(--app-input-color);
  --paper-input-container-underline: {
    display: none;
  };
  --paper-input-container-underline-focus: {
    display: none;
  };
  @apply --app-word-wrapping;
}

firstor commented 7 years ago

To keep tracking the discussion of the issue:

firstor commented 7 years ago

@hotforfeature Thanks for the update. Your last comment worked fine on my side. I mean the problem seemed fixed by simply replacing .message-input-field selector with paper-textarea. However, this time I am curious to know how it could be fixed. Is it kind of a ShadyCSS bug, or anything else I need to concern?

hotforfeature commented 7 years ago

Glad the workaround fixed the problem. I'm not sure where the bug is, though my suspicion is to start looking at ShadyCSS because:

The problem only exists on Edge/IE
The problem exists in both dev and prod mode

This is still on my radar, though I've got one other issue on Origami that I'm working through first since this has an easy workaround. I'll update this discussion if I find out more.

firstor commented 7 years ago

@hotforfeature Thanks for quick response. Will expect the next update with the background of the issue.

firstor / polymer-chat