urbantrout / refactor-css

Helps you identify reoccurring CSS class name combinations in your markup
32 stars 1 forks source link

does not recognize string literals #6

Open TheophileMot opened 3 years ago

TheophileMot commented 3 years ago

This is a great extension. It would be nice for JSX/TSX files if it could recognize string literals:

<div className="a b c d e">       // works
<div className={`a b c d e`}>     // not detected

This would help with common patterns such as:

<div className={`a b c d e ${someCondition ? 'f' : 'g'}`}>

I realize that the contents of className={...} could be just about anything, but just parsing the literal part of it (i.e., ignoring any interpolated ${...} parts) would already be helpful.

TheophileMot commented 3 years ago

Ah, maybe I misunderstood: I thought the extension was looking for elements that shared at least 3 classes, but I see now that it's looking for elements with exactly the same combination of classes. Would be too computationally expensive to find shared classes?

For example, these three divs all have a b c:

<div className="a b c d e"></div>
<div className="a b c d e f"></div>
<div className="g h a b c"></div>

If that's not feasible, then I guess my request about string literals doesn't really make sense.