Comments (13)
Looks like my only comments on it were documentation, I can merge and tweak those manually.
from origami.
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.
from origami.
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!
from origami.
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 @IncludeStyles
code? (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)
from origami.
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.
from origami.
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?
from origami.
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.
from origami.
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?
from origami.
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
from origami.
AOT fix is pushed out and will be published shortly, but I'm leaving this open for the other problem
from origami.
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?
from origami.
I'm not sure why this issue is still open. My PR was merged a long time ago (#90)...
from origami.
I left this open for some reason, but I can't think of it now!
from origami.
Related Issues (20)
- Failed to compile entry-point @codebakery/origami/styles (module as esm5) due to compilation errors HOT 2
- paper-input-container attach causes "Cannot read property 'addEventListener' of null" HOT 1
- Angular 13 @angular/common Could not resolve dependency HOT 3
- Cannot read property 'polyfillWrapFlushCallback' of undefined
- Allow project root, app root, and .bowerrc directories for polymer-webpack-loader HOT 9
- Support for embedded media in Polymer elements ? HOT 2
- Unit Tests HOT 3
- Any way to run this with Angular 6? HOT 5
- Instead of `path-cli`, couldn't we use `ng eject` istead? HOT 4
- Docs: Zone.js doesn't play nice with webcomponents HOT 3
- How to use two-way databinding with vaadin-grid-filter for vaadin-grid? HOT 7
- Polyfill utilities throws "TypeError: Cannot read property 'toLowerCase' of undefined" HOT 7
- Dynamic/defer importing the AppModule makes the app failed to compile HOT 4
- IncludeStylesModule expects RouterModule to be imported. HOT 3
- Update for Angular 7 support HOT 5
- Latest version 3.1.1 causes ERROR ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor HOT 4
- routerLink within <template> HOT 1
- Origami prepare command throwing error with Polymer v3.3.1 HOT 2
- Angular 9 and ivy HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from origami.