pkg: Update svg processors (major) #1882

renovate · 2023-03-15T16:13:34Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
svgo	`^2.8.0` -> `^3.0.2`
svgo-loader	`^3.0.3` -> `^4.0.0`

Release Notes

svg/svgo

`v3.0.2`

Compare Source

Installing @types/csso no longer required

`v3.0.1`

Compare Source

store exposed types only in .d.ts files, no longer need to enable js checking
update svgo.browser.js
fixed "begin" attribute cleanup

Thanks to @Kreeg, @XhmikosR and @TrySound

`v3.0.0`

Compare Source

SVGO v3

Improvements and fixes

fixed datauri option when multipass is not enabled
improved default preset warnings

Breaking channges

Node.js 14+ is required for version
stable package is replaced with native stable sort (required node 12+)

Config

Typescript types are exposed out of the box. No longer need to install @types/svgo

// svgo.config.js
/**
 * @&#8203;type {import('svgo').Config}
 */
export default {
  // svgo configuration
}

Active flag is no longer supported

export default {
  plugins: [
    {
      name: 'removeDoctype',
      active: true
    },
    {
      name: 'removeComments',
      active: false
    }
  ]
}

extendDefaultPlugins is removed, preset-default plugin should be used instead
when need to customize plugins defaults

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          // plugins customization
        }
      }
    }
  ]
}

Enabled sortAttrs plugin by default to get better gzip compression.

<svg>
-  <rect fill-opacity="" stroke="" fill="" stroke-opacity="" />
+  <rect fill="" fill-opacity="" stroke="" stroke-opacity="" />
</svg>

Can be disabled if necessary

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          sortAttrs: false
        }
      }
    }
  ]
}

cleanupIDs plugin is renamed to cleanupIds

export default {
  plugins: [
    'cleanupIds'
  ]
}
// or
export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: {}
        }
      }
    }
  ]
}

Removed cleanupIds plugin "prefix" param, prefixIds should be used instead

export default {
  plugins: [
    'cleanupIds',
    {
      name: 'prefixIds',
      params: {
        prefix: 'my-prefix'
      }
    }
  ]
}

Public API

Removed width and height from optimization result.

const { width, height } = optimize(svg).info

Can be found with custom plugin

let width = null
let height = null
const plugin = {
  name: 'find-size',
  fn: () => {
    return {
      element: {
        enter: (node, parentNode) => {
          if (parentNode.type === 'root') {
            width = node.attributes.width
            height = node.attributes.height
          }
        }
      }
    }
  }
}
optimize(svg, {
  plugins: ['preset-default', plugin]
})

Removed error and modernError from optimization result

const {data, error, modernError } = optimize(svg)

Now all errors are thrown, parsing error can be checked by name

try {
  const { data } = optimize(svg)
} catch (error) {
  if (error.name === 'SvgoParserError') {
    // formatted error
    error.toString()
  } else {
    // runtime error
  }
}

Custom plugins

Removed full, perItem and perItemReverse plugin types.
visitor is the only supported plugin api so plugin.type
is no longer required.

Removed plugin.active flag.

Removed plugin.params used as default params, destructuring with defaults can be used instead

name and fn are only required now

const plugin = {
  name: 'my-custom-plugin',
  fn: (root, params) => {
    const { myParam = true } = params
    return {}
  }
}

Removed createContentItem and JSAPI class from nodes.
All nodes are now plain objects with one exception.
parentNode need to be defined to not break builtin plugins.

const plugin = {
  name: 'my-custom-plugin',
  fn: () => {
    return {
      element: {
        enter: (node) => {
          if (node === 'g') {
            const child = {
              type: 'element',
              name: 'g',
              attributes: {},
              children: []
            }
            Object.defineProperty(child, 'parentNode', {
              writable: true,
              value: node,
            })
            node.children.push(child)
          }
        }
      }
    }
  }
}

Thanks to @istarkov, @boidolr, @deining, @ranman, @mondeja, @liamcmitchell-sc, @rogierslag, @kriskowal, @hugolpz and @TrySound

svg/svgo-loader

`v4.0.0`: 4.0.0

Compare Source

Breaking changes:

Switched to SVGO 3, see its breaking changes: https://github.com/svg/svgo/releases/tag/v3.0.0
Removed support of Webpack 4

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

github-actions · 2023-03-15T16:17:14Z

Size Change: 0 B

Total Size: 367 kB

ℹ️ View Unchanged

Filename	Size
`examples/typescript/dist/App.css`	1.53 kB
`examples/typescript/dist/App.js`	85 kB
`examples/typescript/dist/Error-index-tsx.chunk.js`	234 B
`examples/typescript/dist/GQL-index-tsx.chunk.js`	1.45 kB
`examples/typescript/dist/Home-__tests__-home-test-tsx.chunk.js`	316 B
`examples/typescript/dist/Home-__tests__-home-test-tsx.css`	271 B
`examples/typescript/dist/Home-index-tsx.css`	263 B
`examples/typescript/dist/index.html`	272 B
`examples/typescript/dist/Issues-index-tsx.chunk.js`	2.42 kB
`examples/typescript/dist/my.worker.js`	158 B
`examples/typescript/dist/polyfill.js`	5.28 kB
`examples/typescript/dist/Posts-__tests__-postList-test-tsx.chunk.js`	2.01 kB
`examples/typescript/dist/Posts-index-tsx.chunk.js`	2 kB
`examples/typescript/dist/Posts-PostCreate-tsx.chunk.js`	1.67 kB
`examples/typescript/dist/Posts-PostEdit-tsx.chunk.js`	2.07 kB
`examples/typescript/dist/Posts-PostForm-tsx.chunk.js`	1.39 kB
`examples/typescript/dist/Posts-PostListItem-tsx.chunk.js`	1.62 kB
`examples/typescript/dist/Posts-useForm-tsx.chunk.js`	315 B
`examples/typescript/dist/react.js`	46.7 kB
`examples/typescript/dist/redbox.chunk.js`	10.7 kB
`examples/typescript/dist/router.js`	11.9 kB
`examples/typescript/dist/Slow-index-tsx.chunk.js`	410 B
`examples/typescript/dist/src_pages_Home_index_tsx.chunk.js`	4.88 kB
`examples/typescript/dist/User-index-tsx.chunk.js`	1.6 kB
`examples/typescript/dist/vendors-node_modules_ant-design_icons_es_components_AntdIcon_js-node_modules_antd_es_list_ind-76ec18.chunk.js`	33.8 kB
`examples/typescript/dist/vendors-node_modules_ant-design_icons_es_components_AntdIcon_js-node_modules_path_path_js-nod-bae366.chunk.js`	7.68 kB
`examples/typescript/dist/vendors-node_modules_ant-design_icons_es_icons_InfoCircleOutlined_js-node_modules_ant-design_-564c9d.chunk.js`	3.9 kB
`examples/typescript/dist/vendors-node_modules_ant-design_icons_node_modules_ant-design_colors_dist_index_esm_js-node_m-284f31.chunk.js`	8.79 kB
`examples/typescript/dist/vendors-node_modules_ant-design_pro-layout_es_components_PageHeader_index_js.chunk.js`	31.6 kB
`examples/typescript/dist/vendors-node_modules_antd_es__util_statusUtils_js-node_modules_antd_es_config-provider_Disabl-c7a062.chunk.js`	21.8 kB
`examples/typescript/dist/vendors-node_modules_antd_es_button_index_js.chunk.js`	5.91 kB
`examples/typescript/dist/vendors-node_modules_antd_es_form_index_js-node_modules_antd_es_input_index_js.chunk.js`	11.6 kB
`examples/typescript/dist/vendors-node_modules_antd_es_grid_col_js-node_modules_antd_es_grid_row_js-node_modules_antd_n-b9a7aa.chunk.js`	3.81 kB
`examples/typescript/dist/vendors-node_modules_antd_es_input_TextArea_js.chunk.js`	6.13 kB
`examples/typescript/dist/vendors-node_modules_antd_es_typography_index_js.chunk.js`	8.1 kB
`examples/typescript/dist/vendors-node_modules_parse-link-header_index_js-node_modules_rest-hooks_react_lib_hooks_useLive_js.chunk.js`	5.28 kB
`examples/typescript/dist/vendors-node_modules_react-test-renderer_index_js.chunk.js`	26.4 kB
`examples/typescript/dist/vendors-node_modules_rest-hooks_endpoint_lib_endpoint_js-node_modules_rest-hooks_endpoint_lib-866236.chunk.js`	2.26 kB
`examples/typescript/dist/vendors-node_modules_rest-hooks_rest_lib_createResource_js.chunk.js`	3.34 kB
`examples/typescript/dist/webpack-runtime.js`	2.14 kB