Doesn't work with flag template-only-glimmer-components

[aklkv]

with this add-on installed and template-only-glimmer-components turned on wrapping div is being created. It would be nice to provide an element as root to attach auto generated class to.

[aklkv]

I guess I have to use tagName property in component.js

[topaxi]

I'm not familiar with template only components and ember-component-css, but maybe try using <div class={{styleNamespace}}></div> in your template?

[aklkv]

this would generate two divs with auto generated class:

[aklkv]

the only way I was able to get it working correctly is by doing the following:

  init() {
    this._super(...arguments);
    this.tagName = 'div';
    this.classNames =['main-navbar', 'sticky', 'navCTA'];
    this.classNameBindings = ['styleNamespace'];
  }

and result is :

It would be useful to have logic not to generate outer div if {{styleNamespace}} is used in the template

[aklkv]

I have done I little more digging. The way template-only-glimmer-components is that if there is now component.js file in the component folder outer div will not be generated. Feather more, here it looks like if tagName is not set on component the outer div will be generated even if I am already using {{styleNamespace}} inside the component. I guess to solve it would need to add additional check if {{styleNamespace}} is present in component template.

[webark]

Ya. Template only components aren't currently working with this. The proposed change that is under development will be to use ahtmlbars-ast-plugin transformation and wrap the template in a let block that gives access to styleNamespace in the template.

[webark]

right now to do a "tagless" component with ECC, you have to set the tagName to '' in the component.js file and then use styleNamespace in the template.

[webark]

I know that isn't what a template-only-glimmer-components is, but until the new version is complete, that will be what you have to do.

[aklkv]

@webark Thanks a lot for quick reply! Let me know if you need a hand getting this working. I would be happy to help!

[knownasilya]

What's the status on this? Since it also affects glimmer components I think as well.

[aklkv]

Indeed it does, I have already asked this question in discord. But I guess it will take some time to make it forward compatible. I am more then willing to help but with some directions from maintainer

[rtablada]

Hit this today when working with Glimmer and Sparkles components. Is there any movement forward to get something working for those cases?

[rtablada]

When working with Sparkles Components you can do something like:

import Component from 'sparkles-component';
import podNames from 'ember-component-css/pod-names';

export default class ReportConfigButton extends Component {
  get styleNamespace() {
    return podNames['foo-bar'];
  }
}

Where foo-bar is the path for the current component.

I'd imagine that this is similar to what would be wanted when working with the let AST transform since at build time we have access to the current module path.

[webark]

ya. if you look in PR #300, you can see the template transform that does that. (i ended up just doing a string adjustment cause it’s always wrapping i don’t have to go through the complexity of a handlebars transform)

That PR is held up due to me not really loving the babel transform that adds the styleNamespace into the component js files, and considering having to manually do the imports for addons similarly to how you do the templates with importing the layout

[knownasilya]

In Ember 3.13

with this add-on installed and template-only-glimmer-components turned on wrapping div is being created.

is no longer true, and if you disable template-only-glimmer-components classes aren't generated either

reproduction: https://github.com/knownasilya/repro-3.13-component-css-bug