`@swc/plugin-styled-jsx` does not transpile url-encoded SVG correctly

[ian-moriarty-equiem]

Description

URL-encoded SVG data URIs in styled-jsx are incorrectly truncated.

For example, this typescript:

export const MyComponent: React.FC = () => (
  <>
    <div />
    <style jsx>{`
      div {
        background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 24 24' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath fill='none' d='M0 0h24v24H0z'%3E%3C/path%3E%3Cpath d='M17 3h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h4V1h2v2h6V1h2v2zm3 6V5h-3v2h-2V5H9v2H7V5H4v4h16zm0 2H4v8h16v-8zM6 13h5v4H6v-4z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E%0A");
      }
    `}</style>
  </>
);

...is transpiled to:

export var MyComponent = function() {
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
        className: "jsx-dc192c4e34fe1865"
    }), /*#__PURE__*/ React.createElement(_JSXStyle, {
        id: "dc192c4e34fe1865"
    }, "div.jsx-dc192c4e34fe1865{background-image:url(\"data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 24 24' height='1em' width='1em' xmlns='http:\n}\n\n)}"));
};

Version

• @swc/core: 1.6.5
• @swc/plugin-styled-jsx: 2.0.11

Additional context

Minimal reproduction: https://github.com/ian-moriarty-equiem/styled-jsx-transpile-issue