HTML class names are not processed in an addon
Opened this issue · 4 comments
I am having trouble converting a few related projects from ember-css-modules
to ember-component-css
. Specifically, I am unable to get ember-component-css
to work with an addon using classic structure or pods structure with a /pods
path segment -- which is how the consuming app is configured and I want to avoid changing that if possible.
The ember-component-css
docs say:
If you are using classic (non pod) structure, your addon directory structure might look like:
yourAddonDirectory
│ index.js
│ ... etc
└───addon
│ └───components
│ │ yourAddonComponent.js
│ └───templates
│ │ yourAddonComponent.hbs
│ └───styles
│ │ addon.scss (includes the 'pod-styles' import)
│ └───component-styles (this dir name is configurable)
│ │ yourAddonComponent.scss
└───app
└───components
│ yourAddonComponent.js
I have followed this exactly (although I think the default classic structure would put the template in the templates/components
folder). -- I have tried both.
While I am seeing the generated CSS as expected (with underscores and hash value added), the class name in the markup remain undecorated.
As the documentation suggested, I did add "after": "ember-component-css"
to the "ember-addon"
block in the addon's package.json file, but that had no effect.
Again, according to the documentation I should be able to make this work in an addon using classic structure. Not sure if I'm doing something incorrect, or the documentation needs to be updated.
If there is a way to configure this to work with pods structure in a /pods
directory that would also work in this case.
@kboucher TBH I would recommend not doing such switch. This addon is not future proof and won't work under Embroider.
IMO ember-css-modules
is better option as it should be relatively easy to switch to smth like https://github.com/ijlee2/embroider-css-modules
I appreciate that feedback. I actually abandoned ember-component-css
on my last greenfield project because I had issues using it with Ember 3.28 -- and I prefer my own convention over extra dependencies.
That said, this is the first time I've encountered CSS Modules and I absolutely loathe it. In fact, this migration is really about just excising CSS Modules from these projects.
At the end of the day today I removed the "pod-styles" import and just implemented my own convention and got where I needed to be.
I had hoped to migrate to ember-component-css
to maintain the "scoping" functionality (just for the other devs on the team), but I'm not sure it's worth it.
@kboucher there is ember-cli-styles which is practically an updated version of ember-component-css
which works with the latest Ember and ember-cli
. It requires a few changes from ember-components-css
but nothing major. And it works wonderfully! :)
@boris-petrov That's great! I was not aware of that. I will check it out. Thanks!