Generate class and css without escaping characters

[cnx-ednilsonalbuquerque]

Is it possible to change the way classes are generated? For example:

From

class="cnx-c_brand.primary.300"

To

class="cnx-c_brand-primary-300"

The reason I'm asking is that the escapes in the generated CSS interfere when applying styles using jest-dom, as the CSS ends up like this:

.cnx-c_brand\.primary\.300:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) {
  color: var(--cnx-colors-brand-primary-300);
}

This makes it difficult to work with styles in testing environments.

[cnx-ednilsonalbuquerque]

After some research, I found a way using the hooks:

  hooks: {
    "tokens:created": ({ configure }) => {
      configure({
        formatTokenName: (path) => {
          return path.join("-").replace(/\./g, "-");
        },
      });
    },
  },

But the real issue was with jest-dom. I switched to happy-dom, and it worked well without needing to format the tokens.