CommonStyle does not work the same for frontend and builder

[mohbadreldeen]

Problem Description

CommonStyle return empty css block in PHP for some properties like css variables and grid-template-columns :repeat(3, 1fr)

CommonStyle::style([
      'selector' => $order_class . ' .prefix-grid-items',
      'attr' => $attrs['module']['advanced']['columns'] ?? [],
      'declarationFunction' => function ( array $args ) {
        $attrValue = $args['attrValue'];
        return "grid-template-columns :repeat({$attrValue}, 1fr);";
      }
])

2. Describe what you expected to happen This should return module_name_0 .prefix-grid-items {grid-template-columns :repeat(3, 1fr);}

3. Describe what actually happened This return module_name_0 .prefix-grid-items {}

I think the issue is in SanitizeCssTrait The last Regex test Regular expression to get CSS property and value within the curly braces.

The react version works fine

  selector={ `${ orderClass } .prefix-grid-items` }
  attr={ attrs?.module?.advanced?.columns }
  declarationFunction={ ( {attrValue}: any ) => {
      return `grid-template-columns: repeat(${ attrValue }, 1fr);`;
  } }
/>```
It return ```module_name_0 .prefix-grid-items {grid-template-columns :repeat(3, 1fr);}```