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

[hotforfeature]

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]

To keep tracking the discussion of the issue:

• -> #20 (comment) (or hotforfeature/origami#37 (comment))
• <- hotforfeature/origami#37 (comment)

[firstor]

@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]

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]

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