WIP: Importing a variable where value has a : in the string breaks website css

Browser: Any
OS: Any

Import the following into the variable manager:

–external-link-indicator-light: url(“data:image/svg+xml,%3Csvg xmlns=‘SVG namespace’ width=‘12’ height=‘12’ fill=‘white’ viewBox=‘0 0 16 16’%3E%3Cpath fill-rule=‘evenodd’ d=‘M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z’/%3E%3Cpath fill-rule=‘evenodd’ d=‘M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z’/%3E%3C/svg%3E”) / ‘External link’;

When the variable has been imported your website’s css has broken because Bricks only imports the following of the value - url("data

Unless you go and check the actual values that have been imported you don’t know this has happened. To fix it you simply have to copy and paste the variable’s value into the variable manager.

It should be possible to import special characters in the value.

Hi,

thank you for this. I was able to replicate the issue and I’ve added it to the internal bug tracker.

Best regards,
Matej