ember-component-css
ember-component-css copied to clipboard
webark
Component subclassing support?
Hi there! Our team just decided to start using ember-component-css (which has been great so far!) and in the process of cramming scss files into our pods, I ran across a situation where we have two components that both subclass a base-widget component. The children widgets share some styling so I was like, "let me try cramming all those shared styles into the base-css pod"!
Unsurprisingly, it didn't work because the base-widget styles assume anticipate a .base-widget-blah class applied to the component elements, but instead all they have is the .child-widget-blah class.
Right now, I've just bailed on using pod-bound styling for the shared styling but I'd love to see this case supported in the future!
:+1:
I just ran into this scenario. It would be great if the .base-widget-blah CSS class was also added to the extended component. That would solve this issue, but I couldn't find any reference to this in the addon's code.
I was trying to do this today and came across this comment that said it should already be supported, but it's not working for me either.
+1 for this. Would be great (for my use case right now...), if mixins used by components also had their styles inherited. Maybe a style.scss (etc) found inside the mixin could be included in the component, without ember-component-css generating a css class for the mixin. Then the mixin could declare (say)
classNames: ['foo-mixin']
And have in style.scss
.foo-mixin { blah }
which would result in the equivalent of
& { &.foo-mixin { blah } ... }
In the mixing-in component.
I have a similar issue, only different.
When i subclass a component.. i cant define pod styles for it at all? even if the sublass has its own styles.css. the component itself will not get a namespaced class name.
hey! I'm going to be doing some more work on this PR, doing some of the optimizations suggested and getting it prepped for merging, but it's basically a rewrite to be much more performant and not monkey patch anything, so I'll look into getting this issue while I'm there. What exactly do you mean by "component subclassing" @slimeate and @grapho
@webark what I personally mean by "component subclassing" is creating a new component by importing and extending a different base component.
In all likelyhood creating a mixin with my common functions would probably be the preferred solution though..
ahh.. ok cool. no. I get ya. sometimes you would want to use a shared template or something and just override some behavior on the component.
this is possible to do in the current system, though it is kind of clunky, and would be nice if it was streamlined. You can, however, do something like..
import podNames from "ember-component-css/pod-names"
classNames: [podNames["path/to/base/class"]]
This will add the namespaces class to the component, as well as still having its own generated namespace class.
