@IncludeStyles does not work on non-root component

[akaegi]

Somehow @IncludeStyles does not seem to work on a non-root component.
See my sample code at: /~https://github.com/akaegi/include-styles-demo.

• ok for root component /~https://github.com/akaegi/include-styles-demo/blob/master/src/app/app.component.ts
• styles not loaded for component /~https://github.com/akaegi/include-styles-demo/blob/master/src/app/hello.component.ts

(dom-module 'app-colors' defined in index.html)

[asyncLiz]

Seems like the component factory is not available when I'm scanning for it. A quick workaround is to add the components using @IncludeStyles to the entryComponents of their module.

That fixes for JIT compilation, but neither component has the styling with AOT compilation. I'm going to have to dig into that one further. Not sure if that's an existing bug, or something with the newer versions of Angular.

[asyncLiz]

I've got a fix for AOT not working, but we come back to the problem of the component factory.

We could document and require that any component using @IncludeStyles needs to be added to the entryComponents. Not a huge fan of that though, since it'll get annoying with many components and it adds extra overhead in creating factories that aren't needed.

We really just need to associate an HTML selector string with one or more Polymer style modules. The only reason I'm using a decorator and component factory is so that it improves the developer experience. There's no reason we can't do something like this:

IncludeStyles.for('app-child')('app-colors');

@Component({
  selector: 'app-child'
})
export class ChildComponent {}

It feels "side effect"-y to me, but it'd solve the problem and could get rid of a lot of code that is trying to dynamically look up the selector provided to @Component.

Using a decorator "feels" much better, but I can't think of a clever way to link a class's type to it's component metadata without the component factory.

If you have any suggestions, I would appreciate it!

[akaegi]

Thank you for your time and inputs! I digged further into the issue and it turned out it is a different issue.
I created another demo at /~https://github.com/akaegi/include-styles-demo2 to illustrate it.

I use vaadin components so I'm not yet sure if the problem might be on their side...
I use a custom-style to include 'lumo-color' and 'lumo-typography' as global style. In combination with using vaadin-tabs this removes the style element from the 'lumo-color' dom-module. (See screenshots). This is ShadyCSS code but seems to be ok?
As a consequence, the @IncludeStyles has the effect of adding an empty style element to my Angular component when using it for 'lumo-color'.

Is the solution that you have to apply some ShadyCSS functions from within your @IncludeStylescode? (The style is still there in the dom-module element but "hidden" within the _styles field).

Hope that explanation is not too confusing...

Note that when the global style-include for 'lumo-color' is deactivated (app.component.ts line 10), then the dom-module style is not "erased" and the @IncludeStyles works as expected)

[asyncLiz]

Good find! Looks like cssFromTemplate() does remove the style node from the DomModule element. That makes sense, since we don't want those styles leaking in legacy browsers.

I could change IncludeStyles to use cssFromModules() to get the CSS string instead of manually querying it.

[akaegi]

That looks right to me on first sight (but I am a real novice what concerns Polymer and ShadyCSS).
Do you have to handle the case when ShadyCSS is not available?

[asyncLiz]

ShadyCSS doesn't touch Polymer style modules, so there's no step there I have to worry about. Origami already checks and adds stylesheets to ShadyCSS in another module. All IncludeStyles does is add the string to the component styles, which would get passed through ShadyCSS later.

[akaegi]

Seems to work fine :-)
Changed "style retrieval" in patchedRendererFactory to:

const styleModules = getStyleModulesFor(getTypeFor(selector));
      let styles = styleModules.map(styleModule => {
        const styleElements = stylesFromModule(styleModule);
        return styleElements.map(e => e.innerText).join('\n');
      });

where stylesFromModule is imported from '@polymer/polymer/lib/utils/style-gather.js.
(cssFromModules is deprecated).

Shall I issue a PR?

[asyncLiz]

Sure! PRs are always welcome. If we don't use importStyleModule() anymore, we'll want to add @deprecated warnings to it so that it can be removed in the next major version

[asyncLiz]

AOT fix is pushed out and will be published shortly, but I'm leaving this open for the other problem

[akaegi]

For the style-related issue I issued a PR some time ago. Did you have the chance to look at it so that it can possibly be merged?

[asyncLiz]

Looks like my only comments on it were documentation, I can merge and tweak those manually.

[akaegi]

I'm not sure why this issue is still open. My PR was merged a long time ago (#90)...

[asyncLiz]

I left this open for some reason, but I can't think of it now!