Repository: gregberge/svgr (ts)

Issue:
 React does not recognize the `maskType` prop on a DOM element
<!-- Love SVGR? Please consider supporting our collective: 👉  https://opencollective.com/svgr/donate -->

## 🐛 Bug Report

*Warning: React does not recognize the `maskType` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `masktype` instead. If you accidentally passed it from a parent component, remove it from the DOM element.*

![image](https://user-images.githubusercontent.com/9919760/144318660-b513561e-ec81-4821-a24d-44f919043211.png)


I believe this change made this bug appear: https://github.com/gregberge/svgr/pull/621

## To Reproduce

I'm sorry but don't know how to demonstrate this bug as we speak. I have a React UI lib where I bundle with Rollup and use it in `Create React App(CRA)`.  

// EDIT: [codesandbox.io/s/react-does-not-recognize-the-masktype-6r344](https://codesandbox.io/s/react-does-not-recognize-the-masktype-6r344)

Using:
```
My UI Lib:
"rollup": "^2.60.2"
"@svgr/rollup": "^6.0.0"

// with the config
svgr({
 ref: true,
 titleProp: true,
 svgo: false,
})

-----------------------
App (CRA):
"react": "^17.0.2"
"react-dom": "^17.0.2"
"react-scripts": "4.0.3"
"my-ui-lib": "x"
```



Pull request:
fix: do not transform mask-type
Fix #643


Patch:
diff --git a/packages/cli/src/dirCommand.ts b/packages/cli/src/dirCommand.ts
index 4409879..907220e 100644
--- a/packages/cli/src/dirCommand.ts
+++ b/packages/cli/src/dirCommand.ts
@@ -47,8 +47,11 @@ const defaultIndexTemplate: IndexTemplate = (paths) => {
   return exportEntries.join('\n')
 }
 
-const resolveExtension = (config: Config, ext?: string) =>
-  ext || (config.typescript ? 'tsx' : 'js')
+const resolveExtension = (
+  config: Config,
+  ext: string | null | undefined,
+  jsx: boolean,
+) => ext || (config.typescript ? (jsx ? 'tsx' : 'ts') : 'js')
 
 export const dirCommand: SvgrCommand = async (
   opts,
@@ -64,7 +67,7 @@ export const dirCommand: SvgrCommand = async (
     outDir,
   } = opts
 
-  const ext = resolveExtension(opts, extOpt)
+  const ext = resolveExtension(opts, extOpt, true)
 
   const write = async (src: string, dest: string) => {
     if (!isCompilable(src)) {
@@ -92,6 +95,7 @@ export const dirCommand: SvgrCommand = async (
     files: string[],
     opts: Options,
   ) => {
+    const ext = resolveExtension(opts, extOpt, false)
     const filepath = path.join(dest, `index.${ext}`)
     const indexTemplate = opts.indexTemplate || defaultIndexTemplate
     const fileContent = indexTemplate(files)
diff --git a/packages/hast-util-to-babel-ast/src/mappings.ts b/packages/hast-util-to-babel-ast/src/mappings.ts
index fcccc40..d0e7ebb 100644
--- a/packages/hast-util-to-babel-ast/src/mappings.ts
+++ b/packages/hast-util-to-babel-ast/src/mappings.ts
@@ -299,7 +299,6 @@ export const ATTRIBUTE_MAPPING = {
   mask: 'mask',
   maskcontentunits: 'maskContentUnits',
   maskunits: 'maskUnits',
-  'mask-type': 'maskType',
   mathematical: 'mathematical',
   mode: 'mode',
   numoctaves: 'numOctaves',
diff --git a/website/gatsby-config.js b/website/gatsby-config.js
index 8de30bc..3188bf6 100644
--- a/website/gatsby-config.js
+++ b/website/gatsby-config.js
@@ -10,6 +10,7 @@ module.exports = {
         description: 'Transforms SVG into React Components.',
         siteUrl: 'https://react-svgr.com',
         githubRepositoryURL: 'https://github.com/gregberge/svgr',
+        githubDefaultBranch: 'main',
         baseDirectory: path.resolve(__dirname, '..'),
         navItems: [
           { title: 'Playground', url: '/playground/' },
diff --git a/website/pages/docs/options.mdx b/website/pages/docs/options.mdx
index 418d3f7..825e1a2 100644
--- a/website/pages/docs/options.mdx
+++ b/website/pages/docs/options.mdx
@@ -15,17 +15,17 @@ API.
 
 Specify a custom config file.
 
-| Default | CLI Override    | API Override           |
-| ------- | --------------- | ---------------------- |
-| `null`  | `--config-file` | `configFile: <string>` |
+| Default | CLI Override    | API Override         |
+| ------- | --------------- | -------------------- |
+| `null`  | `--config-file` | `configFile: string` |
 
 ## Runtime config
 
 Disable runtime config (`.svgrrc`, `.svgo.yml`, `.prettierrc`).
 
-| Default | CLI Override          | API Override            |
-| ------- | --------------------- | ----------------------- |
-| `true`  | `--no-runtime-config` | `runtimeConfig: <bool>` |
+| Default | CLI Override          | API Override             |
+| ------- | --------------------- | ------------------------ |
+| `true`  | `--no-runtime-config` | `runtimeConfig: boolean` |
 
 ## JSX runtime
 
@@ -35,9 +35,9 @@ Specify a JSX runtime to use.
 - "automatic": do not add anything
 - "classic-preact": adds `import { h } from 'preact'` on the top of file
 
-| Default   | CLI Override    | API Override            |
-| --------- | --------------- | ----------------------- | ----------- | ------------------ |
-| `classic` | `--jsx-runtime` | `jsxRuntime: <'classic' | 'automatic' | 'classic-preact'>` |
+| Default   | CLI Override    | API Override           |
+| --------- | --------------- | ---------------------- | ----------- | ----------------- |
+| `classic` | `--jsx-runtime` | `jsxRuntime: 'classic' | 'automatic' | 'classic-preact'` |
 
 ## JSX runtime import source
 
@@ -51,30 +51,30 @@ Example: `jsxRuntimeImport: { source: 'preact', specifiers: ['h'] }` for "classi
 
 ## Icon
 
-Replace SVG `width` and `height` value by `1em` in order to make SVG size inherits from text size.
+Replace SVG `width` and `height` by a custom value. If value is omitted, it uses `1em` in order to make SVG size inherits from text size.
 
-| Default | CLI Override | API Override   |
-| ------- | ------------ | -------------- |
-| `false` | `--icon`     | `icon: <bool>` |
+| Default | CLI Override     | API Override   |
+| ------- | ---------------- | -------------- | ------ | ------- |
+| `false` | `--icon [value]` | `icon: boolean | string | number` |
+
+> If you use `--icon` without any argument, be careful of separating files from arguments using `--`, ex: `svgr --icon -- assets/svg`
 
 ## Native
 
 Modify all SVG nodes with uppercase and use a specific template with
 [`react-native-svg`](https://github.com/react-native-community/react-native-svg) imports. **All unsupported nodes will be removed.**
 
-Override using the API with `native: { expo: true }` to template SVG nodes with the [ExpoKit SVG package](https://docs.expo.io/versions/latest/sdk/svg/). This is only necessary for 'ejected' ExpoKit projects where `import 'react-native-svg'` results in an error.
-
-| Default | CLI Override | API Override                                 |
-| ------- | ------------ | -------------------------------------------- |
-| `false` | `--native`   | `native: <bool>` or `native: { expo: true }` |
+| Default | CLI Override | API Override      |
+| ------- | ------------ | ----------------- |
+| `false` | `--native`   | `native: boolean` |
 
 ## TypeScript
 
 Generates `.tsx` files with [TypeScript](https://www.typescriptlang.org/) typings.
 
-| Default | CLI Override   | API Override         |
-| ------- | -------------- | -------------------- |
-| `false` | `--typescript` | `typescript: <bool>` |
+| Default | CLI Override   | API Override          |
+| ------- | -------------- | --------------------- |
+| `false` | `--typescript` | `typescript: boolean` |
 
 ## Dimensions
 
@@ -87,34 +87,34 @@ Removal is guaranteed if `dimensions: false`, unlike the `removeDimensions: true
 - Any SVGO processing will occur prior to this removal.
 - When removing dimensions, SVGO will be configured not to remove the `viewBox` if one is present. You can override this behaviour via your own config.
 
-| Default | CLI Override      | API Override         |
-| ------- | ----------------- | -------------------- |
-| `true`  | `--no-dimensions` | `dimensions: <bool>` |
+| Default | CLI Override      | API Override          |
+| ------- | ----------------- | --------------------- |
+| `true`  | `--no-dimensions` | `dimensions: boolean` |
 
 ## Expand props
 
 All properties given to component will be forwarded on SVG tag. Possible values: `"start"`, `"end"` or `false` (`"none"` in CLI).
 
-| Default | CLI Override     | API Override            |
-| ------- | ---------------- | ----------------------- |
-| `end`   | `--expand-props` | `expandProps: <string>` |
+| Default | CLI Override     | API Override          |
+| ------- | ---------------- | --------------------- |
+| `end`   | `--expand-props` | `expandProps: string` |
 
 ## Prettier
 
 Use [Prettier](https://github.com/prettier/prettier) to format JavaScript code
 output.
 
-| Default | CLI Override    | API Override       |
-| ------- | --------------- | ------------------ |
-| `true`  | `--no-prettier` | `prettier: <bool>` |
+| Default | CLI Override    | API Override        |
+| ------- | --------------- | ------------------- |
+| `true`  | `--no-prettier` | `prettier: boolean` |
 
 ## Prettier config
 
 Specify Prettier config. [See Prettier options](https://prettier.io/docs/en/options.html).
 
-| Default | CLI Override        | API Override               |
-| ------- | ------------------- | -------------------------- |
-| `null`  | `--prettier-config` | `prettierConfig: <object>` |
+| Default | CLI Override        | API Override                     |
+| ------- | ------------------- | -------------------------------- |
+| `null`  | `--prettier-config` | `prettierConfig: PrettierConfig` |
 
 ## SVGO
 
@@ -122,41 +122,41 @@ Use [SVGO](https://github.com/svg/svgo/) to optimize SVG code before transformin
 
 **NOTE:** SVGR implicitly enables the [`prefixIds` SVGO plugin](https://github.com/svg/svgo/blob/master/plugins/prefixIds.js) which adds a prefix to values of `id` and `class` attributes to [reduce the chance of collision issues](https://github.com/gregberge/svgr/issues/210).
 
-| Default | CLI Override | API Override   |
-| ------- | ------------ | -------------- |
-| `true`  | `--no-svgo`  | `svgo: <bool>` |
+| Default | CLI Override | API Override    |
+| ------- | ------------ | --------------- |
+| `true`  | `--no-svgo`  | `svgo: boolean` |
 
 ## SVGO config
 
 Specify SVGO config. [See SVGO options](https://github.com/svg/svgo#configuration).
 
-| Default | CLI Override    | API Override           |
-| ------- | --------------- | ---------------------- |
-| `null`  | `--svgo-config` | `svgoConfig: <object>` |
+| Default | CLI Override    | API Override             |
+| ------- | --------------- | ------------------------ |
+| `null`  | `--svgo-config` | `svgoConfig: SVGOConfig` |
 
 ## Ref
 
 Setting this to `true` will forward ref to the root SVG tag.
 
-| Default | CLI Override | API Override  |
-| ------- | ------------ | ------------- |
-| `false` | `--ref`      | `ref: <bool>` |
+| Default | CLI Override | API Override   |
+| ------- | ------------ | -------------- |
+| `false` | `--ref`      | `ref: boolean` |
 
 ## Memo
 
 Setting this to `true` will wrap the exported component in [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo).
 
-| Default | CLI Override | API Override   |
-| ------- | ------------ | -------------- |
-| `false` | `--memo`     | `memo: <bool>` |
+| Default | CLI Override | API Override    |
+| ------- | ------------ | --------------- |
+| `false` | `--memo`     | `memo: boolean` |
 
 ## Replace attribute value
 
 Replace an attribute value by an other. The main usage of this option is to change an icon color to "currentColor" in order to inherit from text color.
 
-| Default | CLI Override                      | API Override                        |
-| ------- | --------------------------------- | ----------------------------------- |
-| `[]`    | `--replace-attr-values <old=new>` | `replaceAttrValues: { old: 'new' }` |
+| Default | CLI Override                      | API Override                                   |
+| ------- | --------------------------------- | ---------------------------------------------- |
+| `[]`    | `--replace-attr-values <old=new>` | `replaceAttrValues: { [key: string]: string }` |
 
 > You can specify dynamic property using curly braces: `{ '#000': "{props.color}" }` or `--replace-attr-values #000={props.color}`. It is particularly useful with a custom template.
 
@@ -164,9 +164,9 @@ Replace an attribute value by an other. The main usage of this option is to chan
 
 Add props to the root SVG tag.
 
-| Default | CLI Override               | API Override                  |
-| ------- | -------------------------- | ----------------------------- |
-| `[]`    | `--svg-props <name=value>` | `svgProps: { name: 'value' }` |
+| Default | CLI Override               | API Override                          |
+| ------- | -------------------------- | ------------------------------------- |
+| `[]`    | `--svg-props <name=value>` | `svgProps: { [key: string]: string }` |
 
 > You can specify dynamic property using curly braces: `{ focusable: "{true}" }` or `--svg-props focusable={true}`. It is particularly useful with a custom template.
 
@@ -174,62 +174,62 @@ Add props to the root SVG tag.
 
 Add title tag via title property. If titleProp is set to true and no title is provided (`title={undefined}`) at render time, this will fallback to an existing title element in the svg if exists.
 
-| Default | CLI Override   | API Override        |
-| ------- | -------------- | ------------------- |
-| `false` | `--title-prop` | `titleProp: <bool>` |
+| Default | CLI Override   | API Override         |
+| ------- | -------------- | -------------------- |
+| `false` | `--title-prop` | `titleProp: boolean` |
 
 ## Template
 
 Specify a template file (CLI) or a template function (API) to use. For an example of template, see [the default one](https://github.com/gregberge/svgr/blob/main/packages/babel-plugin-transform-svg-component/src/defaultTemplate.ts).
 
-| Default                                                                                                                      | CLI Override | API Override       |
-| ---------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------ |
+| Default                                                                                                                              | CLI Override | API Override       |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------ | ------------------ |
 | [`basic template`](https://github.com/gregberge/svgr/blob/main/packages/babel-plugin-transform-svg-component/src/defaultTemplate.ts) | `--template` | `template: <func>` |
 
 ## Output Directory
 
 Output files into a directory.
 
-| Default     | CLI Override          | API Override       |
-| ----------- | --------------------- | ------------------ |
-| `undefined` | `--out-dir <dirname>` | `outDir: <string>` |
+| Default     | CLI Override          | API Override     |
+| ----------- | --------------------- | ---------------- |
+| `undefined` | `--out-dir <dirname>` | `outDir: string` |
 
 ## index.js template
 
 Specify a template function (API) to change default index.js output (when --out-dir is used).
 
-| Default                                                                                          | CLI Override       | API Override               |
-| ------------------------------------------------------------------------------------------------ | ------------------ | -------------------------- |
+| Default                                                                                        | CLI Override       | API Override               |
+| ---------------------------------------------------------------------------------------------- | ------------------ | -------------------------- |
 | [`basic template`](https://github.com/gregberge/svgr/blob/main/packages/cli/src/dirCommand.ts) | `--index-template` | indexTemplate: files => '' |
 
 ## index.js file
 
 Disable index.js file generation
 
-| Default | CLI Override | API Override    |
-| ------- | ------------ | --------------- |
-| `false` | `--no-index` | `index: <bool>` |
+| Default | CLI Override | API Override     |
+| ------- | ------------ | ---------------- |
+| `false` | `--no-index` | `index: boolean` |
 
 ## Ignore existing
 
 When used with `--out-dir`, it ignores already existing files.
 
-| Default | CLI Override        | API Override             |
-| ------- | ------------------- | ------------------------ |
-| `false` | `--ignore-existing` | `ignoreExisting: <bool>` |
+| Default | CLI Override        | API Override              |
+| ------- | ------------------- | ------------------------- |
+| `false` | `--ignore-existing` | `ignoreExisting: boolean` |
 
 ## Filename case
 
 Specify a custom filename case. Possible values: `pascal` for PascalCase, `kebab` for kebab-case or `camel` for camelCase.
 
-| Default  | CLI Override      | API Override             |
-| -------- | ----------------- | ------------------------ |
-| `pascal` | `--filename-case` | `filenameCase: <string>` |
+| Default  | CLI Override      | API Override           |
+| -------- | ----------------- | ---------------------- |
+| `pascal` | `--filename-case` | `filenameCase: string` |
 
 ## File extension
 
 Specify a custom extension for generated files.
 
-| Default | CLI Override | API Override    |
-| ------- | ------------ | --------------- |
-| `"js"`  | `--ext`      | `ext: <string>` |
+| Default | CLI Override | API Override  |
+| ------- | ------------ | ------------- |
+| `"js"`  | `--ext`      | `ext: string` |


Test patch:
diff --git a/packages/cli/src/__snapshots__/index.test.ts.snap b/packages/cli/src/__snapshots__/index.test.ts.snap
index dc21e59..a2c6a58 100644
--- a/packages/cli/src/__snapshots__/index.test.ts.snap
+++ b/packages/cli/src/__snapshots__/index.test.ts.snap
@@ -619,3 +619,8 @@ export default SvgComponent
 
 "
 `;
+
+exports[`cli using typescript option, it creates index with \`.ts\` extension 1`] = `
+"export { default as File } from './File'
+"
+`;
diff --git a/packages/cli/src/index.test.ts b/packages/cli/src/index.test.ts
index 78fb2da..9575084 100644
--- a/packages/cli/src/index.test.ts
+++ b/packages/cli/src/index.test.ts
@@ -203,6 +203,15 @@ describe('cli', () => {
     expect(content).toMatchSnapshot()
   })
 
+  it('using typescript option, it creates index with `.ts` extension', async () => {
+    const inDir = '__fixtures__/simple'
+    const outDir = `__fixtures_build__/ts-index`
+    await del(outDir)
+    await cli(`${inDir} --out-dir=${outDir} --typescript`)
+    const content = await fs.readFile(path.join(outDir, 'index.ts'), 'utf-8')
+    expect(content).toMatchSnapshot()
+  })
+
   it('should support --index-template in cli', async () => {
     const inDir = '__fixtures__/simple'
     const outDir = `__fixtures_build__/custom-index-arg`
diff --git a/packages/hast-util-to-babel-ast/src/__snapshots__/index.test.ts.snap b/packages/hast-util-to-babel-ast/src/__snapshots__/index.test.ts.snap
index dc1bf52..1ea9512 100644
--- a/packages/hast-util-to-babel-ast/src/__snapshots__/index.test.ts.snap
+++ b/packages/hast-util-to-babel-ast/src/__snapshots__/index.test.ts.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`hast-util-to-babel-ast should correctly transform svg 1`] = `"<svg width=\\"88px\\" height=\\"88px\\" viewBox=\\"0 0 88 88\\" version={1.1} xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"><title>{\\"Dismiss\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;"`;
-
 exports[`hast-util-to-babel-ast should handle spaces and tab 1`] = `"<svg viewBox=\\"0 0 32 32\\" xmlns=\\"http://www.w3.org/2000/svg\\"><path d=\\"M25,5h-3V3c0-1.7-1.3-3-3-3H5C3.3,0,2,1.3,2,3v20c0,1.7,1.3,3,3,3h4v1c0,2.2,1.8,4,4,4h12c2.2,0,4-1.8,4-4V9        C29,6.8,27.2,5,25,5z M5,24c-0.6,0-1-0.5-1-1V3c0-0.6,0.4-1,1-1h14c0.5,0,1,0.4,1,1v2h-6.3H13H6.3c-0.6,0-1,0.4-1,1s0.4,1,1,1h3.2       C9.4,7.3,9.2,7.7,9.1,8C9.1,8,9,8,9,8H6.5c-0.6,0-1,0.4-1,1s0.4,1,1,1H9v3c-0.1,0-0.1,0-0.2,0H6.1c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.7       c0.1,0,0.1,0,0.2,0V16c-0.1,0-0.1,0-0.2,0H6.1c-0.6,0-1,0.4-1,1c0,0.6,0.4,1,1,1h2.7c0.1,0,0.1,0,0.2,0V19c-0.1,0-0.1,0-0.2,0H6.1       c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.7c0.1,0,0.1,0,0.2,0v3H5z M27,27c0,1.1-0.9,2-2,2H13c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h0.7H25       c1.1,0,2,0.9,2,2V27z M25.2,19c0,0.6-0.4,1-1,1H13.4c-0.6,0-1-0.4-1-1s0.4-1,1-1h10.7C24.7,18,25.2,18.4,25.2,19z M25.2,22       c0,0.6-0.4,1-1,1H13.4c-0.6,0-1-0.4-1-1s0.4-1,1-1h10.7C24.7,21,25.2,21.4,25.2,22z M25.2,25c0,0.6-0.4,1-1,1H13.4c-0.6,0-1-0.4-1-1       s0.4-1,1-1h10.7C24.7,24,25.2,24.4,25.2,25z M12.3,11c0-0.6,0.4-1,1-1h7.3c0.6,0,1,0.4,1,1s-0.4,1-1,1h-7.3       C12.8,12,12.3,11.6,12.3,11z M16,13c0.6,0,1,0.4,1,1s-0.4,1-1,1h-2.5c-0.6,0-1-0.4-1-1s0.4-1,1-1H16z\\" /></svg>;"`;
+
+exports[`hast-util-to-babel-ast transforms SVG 1`] = `"<svg width=\\"88px\\" height=\\"88px\\" viewBox=\\"0 0 88 88\\" version={1.1} xmlns=\\"http://www.w3.org/2000/svg\\" xmlnsXlink=\\"http://www.w3.org/1999/xlink\\"><title>{\\"Dismiss\\"}</title><desc>{\\"Created with Sketch.\\"}</desc><defs /><g id=\\"Blocks\\" stroke=\\"none\\" strokeWidth={1} fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}><path d=\\"M51,37 L37,51\\" id=\\"Shape\\" /><path d=\\"M51,51 L37,37\\" id=\\"Shape\\" /></g></g></svg>;"`;
diff --git a/packages/hast-util-to-babel-ast/src/index.test.ts b/packages/hast-util-to-babel-ast/src/index.test.ts
index 30e3054..2bb78c6 100644
--- a/packages/hast-util-to-babel-ast/src/index.test.ts
+++ b/packages/hast-util-to-babel-ast/src/index.test.ts
@@ -13,7 +13,7 @@ function transform(code: string) {
 }
 
 describe('hast-util-to-babel-ast', () => {
-  it('should correctly transform svg', () => {
+  it('transforms SVG', () => {
     const code = `
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="88px" height="88px" viewBox="0 0 88 88" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -32,27 +32,32 @@ describe('hast-util-to-babel-ast', () => {
     expect(transform(code)).toMatchSnapshot()
   })
 
-  it('should correctly transform aria-x', () => {
+  it('transforms "aria-x"', () => {
     const code = `<svg aria-hidden="true"></svg>`
     expect(transform(code)).toMatchInlineSnapshot(
       `"<svg aria-hidden=\\"true\\" />;"`,
     )
   })
 
-  it('should correctly transform aria-xxxXxx', () => {
+  it('transforms "aria-xxxXxx"', () => {
     const code = `<svg aria-labelledby="foo" aria-describedat="foo" aria-describedby="foo"></svg>`
     expect(transform(code)).toMatchInlineSnapshot(
       `"<svg aria-labelledby=\\"foo\\" aria-describedat=\\"foo\\" aria-describedby=\\"foo\\" />;"`,
     )
   })
 
-  it('should correctly transform data-x', () => {
+  it('transformss "data-x"', () => {
     const code = `<svg data-hidden="true"></svg>`
     expect(transform(code)).toMatchInlineSnapshot(
       `"<svg data-hidden=\\"true\\" />;"`,
     )
   })
 
+  it('preserves "mask-type"', () => {
+    const code = `<svg><mask mask-type="alpha" /></svg>`
+    expect(transform(code)).toBe('<svg><mask mask-type="alpha" /></svg>;')
+  })
+
   it('should handle spaces and tab', () => {
     const code = `<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
     <path d="M25,5h-3V3c0-1.7-1.3-3-3-3H5C3.3,0,2,1.3,2,3v20c0,1.7,1.3,3,3,3h4v1c0,2.2,1.8,4,4,4h12c2.2,0,4-1.8,4-4V9