Custom radio field is not according to Lexicon when CSS is minified

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: forms.liferay.com, Master
• Fix Version/s: 7.0.0 DXP FP91, 7.0.10.14 DXP SP14, 7.0.X, 7.1.0 Beta 1, 7.1.X, 7.3.1 CE GA2, 7.3.10 DXP GA1, Master
• Component/s: ~ [Archived] Frontend Infrastructure
• Labels:
  • backend_test
  • ee-ts
  • liferay-dxp-70-sp14
  • liferay-fixpack-de-91-7010
• Branch Version/s:
  7.0.x
• Backported to Branch:
  Committed
• Fix Priority: 4
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/57800

Steps to reproduce:

1. Enable theme CSS minification on portal
2. Go to Content > Forms
3. Add a Radio Field
4. Publish Form
5. Copy Published URL to another tab
6. Check radio's option

Expected Result:
Field will look exactly like it is in Clay / Lexicon.

This is the expected CSS for the class:

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23FFF'/%3E%3C/svg%3E");
}

Actual Result:
Checked radio is just a blue circle.

This is the actual CSS for the class:

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
        background-image: url(data:image/svg+xml;charset=utf8,%3Csvgxmlns='http://www.w3.org/2000/svg'viewBox='-4-488'%3E%3Ccircler='3'fill='%23FFF'/%3E%3C/svg%3E);
}

It loses the spaces in the URL.

You can see an example of this issue in this forms.liferay.com form:
https://forms.liferay.com/web/forms/shared/-/form/342366