fix(styled-jsx): Fix SVG interpolation

[Donny/강동윤 (kdy1)]

The Babel CSS output for

const CUTOUT_AVATAR_PERCENTAGE_VISIBLE = Math.random();
const HEAD_MARGIN_PERCENTAGE = Math.random();

const MaskedDivBad = () => {


    return (
        <>
            <div className="head">
                <div className="avatar-wrapper" />
            </div>
            <style jsx>{`
          .head {
            position: relative;
          }
          .avatar-wrapper {
            width: 40px;
            height: 40px;
            background: #ff6b6b;
            border-radius: 50%;
            mask-image:
              url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="0.5" cx="0.5" cy="0.5"/></svg>'),
              url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="${0.5 +
                HEAD_MARGIN_PERCENTAGE}" cx="${0.5 +
                CUTOUT_AVATAR_PERCENTAGE_VISIBLE +
                HEAD_MARGIN_PERCENTAGE}" cy="0.5"/></svg>');
            mask-size: 100% 100%;
            mask-repeat: no-repeat;
            mask-position: center;
            -webkit-mask-composite: source-out;
            mask-composite: subtract;
          }
        `}</style>
        </>
    );
};

Input CSS to the parser:

swc:

          .head {
            position: relative;
          }
          .avatar-wrapper {
            width: 40px;
            height: 40px;
            background: #ff6b6b;
            border-radius: 50%;
            mask-image:
              url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="0.5" cx="0.5" cy="0.5"/></svg>'),
              url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="--styled-jsx-placeholder-0__" cx="--styled-jsx-placeholder-1__" cy="0.5"/></svg>');
            mask-size: 100% 100%;
            mask-repeat: no-repeat;
            mask-position: center;
            -webkit-mask-composite: source-out;
            mask-composite: subtract;
          }

Input CSS to the transform:

babel:

        .head {
          position: relative;
        }
        .avatar-wrapper {
          width: 40px;
          height: 40px;
          background: #ff6b6b;
          border-radius: 50%;
          mask-image:
            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="0.5" cx="0.5" cy="0.5"/></svg>'),
            url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="%%styled-jsx-placeholder-0%%" cx="%%styled-jsx-placeholder-1%%" cy="0.5"/></svg>');
          mask-size: 100% 100%;
          mask-repeat: no-repeat;
          mask-position: center;
          -webkit-mask-composite: source-out;
          mask-composite: subtract;
        }

Output CSS from transform

babel

.head {
  position: relative; }

.avatar-wrapper {
  width: 40px;
  height: 40px;
  background: #ff6b6b;
  border-radius: 50%;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="0.5" cx="0.5" cy="0.5"/></svg>'), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="%%styled-jsx-placeholder-0%%" cx="%%styled-jsx-placeholder-1%%" cy="0.5"/></svg>');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-composite: source-out;
  mask-composite: subtract; }

With custom babel plugin (sass):

 .head {
  position: relative;
}

.avatar-wrapper {
  width: 40px;
  height: 40px;
  background: #ff6b6b;
  border-radius: 50%;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="0.5" cx="0.5" cy="0.5"/></svg>'), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><circle r="%%styled-jsx-placeholder-0%%" cx="%%styled-jsx-placeholder-1%%" cy="0.5"/></svg>');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
}

swc:

.head.__jsx-style-dynamic-selector {
	position: relative
}

.avatar-wrapper.__jsx-style-dynamic-selector {
	-webkit-mask-composite: source-out;
	background: #ff6b6b;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><circle r=\"0.5\" cx=\"0.5\" cy=\"0.5\"/></svg>"), url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><circle r=\"--styled-jsx-placeholder-0__\" cx=\"--styled-jsx-placeholder-1__\" cy=\"0.5\"/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><circle r=\"0.5\" cx=\"0.5\" cy=\"0.5\"/></svg>"), url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 1 1\"><circle r=\"--styled-jsx-placeholder-0__\" cx=\"--styled-jsx-placeholder-1__\" cy=\"0.5\"/></svg>");
	-webkit-mask-position: 50%;
	mask-position: 50%;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-composite: source-out;
	mask-composite: subtract
}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 37858b2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR