Issue: Incorrect Handling of CSS Class Names with Special Characters in GrapesJS

[Isc-mntl-snchz]

I'm working with Tailwind CSS, which allows the use of special characters in class names such as !max-h-[4rem]. However, when adding a custom trait for editing CSS classes, these special characters are being replaced with -, preventing the styles from being applied correctly to the canvas.

Custom Trait Code:

export function addClassTrait(editor) {
    editor.TraitManager.addType("class", {
        eventCapture: ["input"],
        createInput() {
            const el = document.createElement("textarea");

            el.setAttribute("rows", 5);
            // Actualizar el valor del textarea cuando se seleccione el componente
            this.onUpdate = () => {
                const classes = this.target
                    .get("classes")
                    .pluck("name")
                    .join(" ");
                el.value = classes;
            };

            return el;
        },
        onEvent({ elInput, component, event }) {
            const stringClasses = event.target.value;
            const classList = stringClasses.trim().split(/\s+/);
            component.getEl().className = '';
            classList.forEach(cls => {
                component.getEl().classList.add(cls);
            });
            
            console.log('classes after manual class update:', component.get('classes'));
        },
        changeProp: 1,
    });
}

Issue Description:

When I add classes containing special characters (e.g., !max-h-[4rem]) through the custom trait, the characters are replaced with -. As a result, the styles are not applied correctly to the elements in the canvas.

Steps to Reproduce:

1. Define the custom trait as shown above.
2. Add the custom trait to a component type in GrapesJS.
3. Try to add a class with special characters (e.g., !max-h-[4rem]) using the custom trait.

Expected Behavior:
The class name should be preserved as !max-h-[4rem].

Additional Observations:

When I open the class inspector, the class names appear normal, as shown in the trait.

However, when I log the class names using console.log('classes after manual class update:', component.get('classes'));, the characters are replaced as mentioned previously.

Additionally, if I run a command like command: "export-template", the characters are also replaced.

Questions:

1. Is there a known issue with how GrapesJS handles CSS class names with special characters?
   

2. Are there any recommended workarounds or fixes for this issue?
   

3. Could this be related to how the setClass method processes class names internally?
   

Thank you for your assistance.

[artf]

So yeah, it's not the first time there has been a complaint about this kind of issue, especially with Tailwind. I think it would make sense to make the default escaping strategy less strict.
For now, you should be able to provide your own escape function in the selector manager configuration:

grapesjs.init({
 // ...
 selectorManager: {
   escapeName: (name) => `${name}`.trim().replace(/\s+/g, '-'),
  }
})

[Isc-mntl-snchz]

Sorry if I duplicated the question, looked for similar issues but found nothing about it about the issue at hand, I appreciate you answering

[chrisfong]

I am having a similar issue. @artf's suggestion didn't seem to solve the problem...

class="grid grid-cols-[repeat(auto-fit-minmax(158px-1fr))] gap-3 p-4"

Doesn't match this:

.grid-cols-\[repeat\(auto-fit\, minmax\(158px\, 1fr\)\)\]{grid-template-columns:repeat(auto-fit, minmax(158px, 1fr));}

Notice that some hyphens are getting replaced by escaped commas. E.g. 158px-1fr becomes 158px\, 1fr.

@Isc-mntl-snchz: Did the solution work for you?