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

[duydvu]

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:

grapesjs/src/css_composer/index.ts

Line 373 in 8025b95

getRules(selector: string) {

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

[artf]

Agree with the suggested alternative, I will update accordingly. Thanks @duydvu