namespace Elementor\Modules\Variables\Classes;
use Elementor\Modules\Variables\Services\Variables_Service;
if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
private Variables_Service $service;
public function __construct( Variables_Service $service ) {
$this->service = $service;
private function global_variables(): array {
return $this->service->get_variables_list();
public function raw_css(): string {
$list_of_variables = $this->global_variables();
if ( empty( $list_of_variables ) ) {
$css_entries = $this->css_entries_for( $list_of_variables );
if ( empty( $css_entries ) ) {
return $this->wrap_with_root( $css_entries );
private function css_entries_for( array $list_of_variables ): array {
foreach ( $list_of_variables as $variable_id => $variable ) {
$entry = $this->build_css_variable_entry( $variable_id, $variable );
private function build_css_variable_entry( string $id, array $variable ): ?string {
$variable_name = sanitize_text_field( $id );
if ( ! array_key_exists( 'deleted_at', $variable ) ) {
$variable_name = sanitize_text_field( $variable['label'] ?? '' );
$value = sanitize_text_field( $variable['value'] ?? '' );
if ( empty( $value ) || empty( $variable_name ) ) {
return "--{$variable_name}:{$value};";
private function wrap_with_root( array $css_entries ): string {
return ':root { ' . implode( ' ', $css_entries ) . ' }';