HTML class names are not processed in an addon

[kboucher]

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.

[SergeAstapov]

@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

[kboucher]

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.

[boris-petrov]

@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! :)

[kboucher]

@boris-petrov That's great! I was not aware of that. I will check it out. Thanks!