SVG mask-type not recognised

SonarQube Cloud
1

We’re experiencing a typescript failure on the rule:
typescript:S6747

The code is an inline svg element, with a mask-type:

<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="5" y="5" width="14" height="14">

Error: Unknown property 'mask-type' found

The svg itself is valid JSX for react:

const CloseIcon = ({ className }: HTMLStyleAttributes) => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className={className}>
      <path fillRule="evenodd" clipRule="evenodd" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="currentColor" />
      <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="5" y="5" width="14" height="14">
        <path fillRule="evenodd" clipRule="evenodd" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="currentColor" />
      </mask>
      <g mask="url(#mask0)">
      </g>
    </svg>
  );
};

This icon renders in react 19, but SonarCloud doesn’t like mask-type

5

Hello @richardshephard1,

thanks for reporting this. I added this attribute to the list of FP for that rule. Issue

Cheers,
Victor

1 Like