CSS-Selektoren in PHP eine Klasse voranstellen

Bei einem Slider-Gutenberg-Block habe ich die Möglichkeit eingebaut, über ein Textfeld CSS einzugeben, das sich nur auf diesen einen Block auswirkt. Natürlich soll der User dabei nicht darauf achten müssen, die Selektoren so zu schreiben, dass sie wirklich nur für diesen Block gelten – das soll im Hintergrund vor der Frontend-Ausgabe geschehen.

Um das umzusetzen, habe ich mich nach einer PHP-Lösung zum Parsen von CSS umgeschaut und mit PHP CSS Parser ein passendes Tool gefunden.

Die Installation des Parsers funktioniert über Composer:

composer require sabberworm/php-css-parser
Code-Sprache: Bash (bash)

Um alle Selektoren aus einem CSS-Block jetzt so zu verändern, dass ein eindeutiger Klassenname davorsteht, sind nur ein paar wenige Zeilen nötig. Zum Glück für mich war sogar ein entsprechendes Beispiel in der Readme vorhanden (das CSS liegt in dem folgenden Beispiel in $attributes['customCss']):

<?php
use Sabberworm\CSS\Parser;

// Generate unique classname.
$unique_block_classname = 'slider_' . bin2hex( random_bytes( 6 ) );
$css_parser = new Parser( $attributes['customCss'] );
$css_document = $css_parser->parse();

// Loop CSS declaration blocks and add classname to selectors.
foreach ( $css_document->getAllDeclarationBlocks() as $declaration_block ) {
	foreach ( $declaration_block->getSelectors() as $selector ) {
		$selector->setSelector( ".$unique_block_classname" .' '. $selector->getSelector() );
	}
}

// Save modified CSS.
$custom_css = $css_document->render();
Code-Sprache: PHP (php)

Zunächst erstelle ich einen eindeutigen Klassennamen und parse das CSS mit der parse()-Methode der Parser-Klasse. Anschließend loope ich über die Deklarationen und innerhalb der Deklarationen über die Selektoren, um jedem Selektor mit der folgenden Zeile die eigene Klasse voranzustellen:

$selector->setSelector( ".$unique_block_classname" .' '. $selector->getSelector() );
Code-Sprache: PHP (php)

Über $css_document->render() wird am Ende das modifizierte CSS in die $custom_css-Variable gespeichert.