When using components=true duplicate Classes are created

[juliancc]

When you parse using --components=true the css file generated works for the most part. The only main problem is that it generates duplicate classes if many elements with the same class exist in the original file.

For example if you have the following:

<div class="alert alert-warning">
some warning alert
</div>
.
some other code
.
<div class="alert alert-danger">
this is a second alert.. but now is danger
</div>

.alert {
	@apply relative px-3 py-3 mb-4 border rounded;
}
.alert-warning {
	@apply bg-orange-200 border-orange-300 text-orange-800;
}

.
.
.

.alert {
	@apply relative px-3 py-3 mb-4 border rounded;
}
.alert-danger {
	@apply bg-red-200 border-red-300 text-red-800;
}

see that .alert is duplicated

[Niels Drost]

@abdumu
Here is example code (not from me) that would help with this issue

$cssContent = <all css, right before you write it to the component.css file>

// Use regex to remove duplicate classes
$cleanedCSS = preg_replace('/(class\s*=\s*["\'][^"\']*["\'])[\s\S]*?\1/', '$1', $cssContent);

Now you have $cleanedCSS, which you can write to that component.css file.

You would probably need a PHPUnit test for this, correct?

[Abdulrahman ☕️]

@abdumu Here is example code (not from me) that would help with this issue

$cssContent = <all css, right before you write it to the component.css file>

// Use regex to remove duplicate classes
$cleanedCSS = preg_replace('/(class\s*=\s*["\'][^"\']*["\'])[\s\S]*?\1/', '$1', $cssContent);

Now you have $cleanedCSS, which you can write to that component.css file.

You would probably need a PHPUnit test for this, correct?

yes we need to test it before. it would be amazing if you make a PR for this.