[ selector => [ prop => value ] ] ]. * * @var array */ private $rules = []; /** * Current selector. * * @var string */ private $current_selector = ''; /** * Current media context (null = base). * * @var string|null */ private $current_media = null; /** * Breakpoints (max-width in px). * * @var array */ private $breakpoints = [ 'tablet' => 1024, 'mobile' => 767, ]; /** * Set the active selector. * * @param string $selector CSS selector. * @return self */ public function set_selector( $selector ) { // Defense in depth: strip "<" from any selector. Selectors are built from the // block's `blockId` (sanitized upstream in CSS_Generator_Service), but should // an id reach here unsanitized, a "" inside the selector would break // out of the inline " (escape the style tag → // XSS), or "}selector{" / ";prop:val" (inject extra CSS). Strip them all. $value = str_replace( [ '<', '>', '{', '}', ';' ], '', (string) $value ); if ( '' === $value ) { return $this; } $media = $this->current_media ?? 'base'; if ( ! isset( $this->rules[ $media ] ) ) { $this->rules[ $media ] = []; } if ( ! isset( $this->rules[ $media ][ $this->current_selector ] ) ) { $this->rules[ $media ][ $this->current_selector ] = []; } $this->rules[ $media ][ $this->current_selector ][ $property ] = $value; return $this; } /** * Open a media query block for a device or custom query. * * @param string $device 'desktop' | 'tablet' | 'mobile' | raw query. * @return self */ public function start_media_query( $device ) { if ( 'desktop' === $device ) { $this->current_media = '@media (min-width: ' . ( $this->breakpoints['tablet'] + 1 ) . 'px)'; } elseif ( isset( $this->breakpoints[ $device ] ) ) { $this->current_media = '@media (max-width: ' . $this->breakpoints[ $device ] . 'px)'; } else { $this->current_media = $device; } return $this; } /** * Close the current media query block. * * @return self */ public function end_media_query() { $this->current_media = null; return $this; } /** * Render the collected rules as minified CSS. * * @return string */ public function get_output() { $css = ''; if ( isset( $this->rules['base'] ) ) { $css .= $this->render_rules( $this->rules['base'] ); } foreach ( $this->rules as $media => $selectors ) { if ( 'base' === $media ) { continue; } $inner = $this->render_rules( $selectors ); if ( '' !== $inner ) { $css .= $media . '{' . $inner . '}'; } } return $css; } /** * Render a selector => properties map. * * @param array $selectors Selector map. * @return string */ private function render_rules( $selectors ) { $css = ''; foreach ( $selectors as $selector => $properties ) { if ( empty( $properties ) ) { continue; } $declarations = ''; foreach ( $properties as $property => $value ) { $declarations .= $property . ':' . $value . ';'; } $css .= $selector . '{' . $declarations . '}'; } return $css; } }