JS ne fonctionne plus pour le composant de thème

Dev
1

Continuing the discussion from A little help with a CSS selector?:

Hi,

A little bit ago I made this topic and the JavaScript for making CSS selectors for trust levels worked. It doesn’t work anymore. This is the JS…


import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => { 
  const allowedGroups = ["trust_level_4"]; // Add the groups you want to target
  const includeUsersField = ["username"]; // Use either "id" or "username"

  api.modifyClass("component:chat/message/info", (SuperClass) => {
    return class extends SuperClass {
      @service currentUser;

      get usernameClasses() {
        if (!this.currentUser) {
          return super.usernameClasses;
        }
        const allowedGroupClasses = this.currentUser.groups
          .filter((g) => allowedGroups.includes(g.name))
          .map((g) => `group--${g.name}`);

        const extraClasses = [
          ...allowedGroupClasses,
          ...includeUsersField.map((f) => `user--${this.currentUser[f]}`),
        ]
          .filter(Boolean)
          .join(" ");

        return super.usernameClasses + " " + extraClasses;
      }
    };
  });
})

And this is the CSS I was using…

.chat-message-info__username.group–trust_level_4 {
.chat-message-info__username__name {
color: blue;
}
}

Any ideas on how I can fix this?

Specifically, is there some Discourse update that I should know about or does this have to do with tl4 not being a primary group or something?

Thanks!