Classnames not added to addon components when rendered in real app

[ssylvia]

I'm using this addon to add styles to components in my addon that I'm creating. My addon is using pods structure.

When I test my addon with the dummy app, the classname gets added to the component's tag. However, when I try using that component in a real app, the class never gets added to the component tag.

If I inspect the vendor.css, my component css did get added to the real app and is namespaced.

ember-component-css is listed in my addon dependencies.

The real app also uses ember-component-css to style its components.

[webark]

@ssylvia are you using an "npm/yarn" link with them? There is an issue with that currently, where if they both have a "node_modules/ember-component-css" directory in both the addon and app it doesn't work properly.

[webark]

if that is the issue you are having, you can delete the one in the addon and it will work in the app. not an ideal senerio i know. but until that issue gets fixed, its where we are unfortunately...

[ssylvia]

@webark Yep, I am using the npm link so that must be the issue. I deleted the addon dependency and it started working in the real app. I'll confirm once I publish and unlink the package.

Thanks for your quick response!

[ssylvia]

@webark I've confirmed this is the issue. I can leave this issue open or I can a new issue with a more relevant name.

[ericmackrodt]

Any news here? I'm having this same issue with ember-engines. The SCSS is compiled and loaded in the app but the style isn't applied to the component.

[monica-olejniczak-safetyculture]

Also wondering on any updates to this! I'm having the same issue when using this library in an addon and linking it in the consuming application. I can see the styles are namespaced in my consuming application's vendor.css file but the namespacing isn't applied to the component itself.

[meganre]

Any progress on this, working with multiple addons using component css and the dynamic class is not being added when the addon is rendered inside the actual app?

[webark]

Yes. I'm planning on having the fix done in the next couple of weeks. There is an "experimental" branch that you can use if you want a stop gap for the time being.

[teejayhh]

Is there a plan to merge this soon ??

[jeroenbell]

+1

Also having issues with this. We're building an app with nested engines using component-css. Loading the nested engine there are no issues. Loading the main engine, the styles only get applied to the main engine. Loading the consuming app, no styles get applied at all.

edit: Using the experimental branch for now which seems to work.

[webark]

@teejayhh yes. I am down to one last hurdle. Sorry that it’s been a couple of months past when i initially did, life and work have just been crazier then planned as of late. Expect to see something soon.