BUG: Performance issue when adding more than 20 classes to a single component

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Edge v119.0.2151.72

Reproducible demo link

https://grapesjs.com/demo.html

Describe the bug

Hi, thank you for creating an amazing project. I would like to report an issue found during my use of GrapesJS.

How to reproduce the bug?

1. Select a component
2. Add classes with arbitrary names until the component has over 20 classes.
3. Select another component and re-select the component.

What is the expected behavior? There should be no performance issue.

What is the current behavior? The browser freezes for a noticeable amount of time. The more classes added, the longer it freezes. My browser freezes for 10 seconds when the component has 23 classes.

This is a common issue when working with TailwindCSS since there are a lot of classes. For example, if I copy an HTML template from a TailwindCSS library, the browser might freeze when I import to the Custom Code.

Cause So I investigated and found the problem. Here it is:

The combine function generates all combinations of the classes, which results in 2^n combinations (n is the number of classes). So if there are 20 classes, there would be 1048576 combinations.

If I understand it right, it generates all combinations to filter the CSS rules of the component in this function: https://github.com/GrapesJS/grapesjs/blob/8025b95a645907574389e950f32950190ceb602c/src/css_composer/index.ts#L373

I think this algorithm is not optimal since it loops through all selectors and rules. A better solution is only looping through all the rules and for each rule, checking if the rule's selectors is a subset of the component's selectors.

Simplified example: Component's selectors: ['.a', '.b', '.c', '.d', '.e', '.f'] Rules' selectors:

[
  ['.a', '.b', '.c'],
  ['.x', '.y', '.z'],
]

For each rule, you only need to check if ['.a', '.b', '.c'] is a subset of ['.a', '.b', '.c', '.d', '.e', '.f'], without generating all combinations of 6 classes.

Code of Conduct

• I agree to follow this project's Code of Conduct