Skip to content

[1.20.0]
Compare
Choose a tag to compare
@onigoetz onigoetz released this 07 Oct 15:56
· 680 commits to master since this release
v1.20.0
500cc26

Highlights

  • Drop node 12 and node 14 support
  • Upgraded browserslist query to : Edge >= 86, Safari >= 15, iOS >= 15, Chrome >= 86, and_chr >= 86, Firefox >= 81, > 1%, not dead, not op_mini all
  • Add React Fast Refresh support as opt-in, the default is still react-hot-loader for now.
  • Replace webpack-dev-server with webpack-plugin-serve this change should be transparent.
  • Remove old PostCSS plugins that aren't useful anymore due to more modern browsers
  • Replace @parcel/css with lightningcss (the package has been renamed)
  • Better support for CSS Modules
  • Update Jest 27 to 29
  • Update TypeScript 4.6.3 to 4.8.4

Update list of supported browsers

Every year, Swissquote reviews its supported browsers, and the following is the resulting browserslist query:

Edge >= 86, Safari >= 15, iOS >= 15, Chrome >= 86, and_chr >= 86, Firefox >= 81, > 1%, not dead, not op_mini all

Add React Fast Refresh support as opt-in, the default is still react-hot-loader for now.

React Hot Loader introduced the concept of reloading parts of a page while keeping state.
But this was done by patching React and needs lots of configuration.

React Fast Refresh is React's own implementation of this feature.
Crafty now allows you to choose which one you want to enable, the default remains React Hot Loader for now, as we are making sure it's stable and works as expected.

Check the documentation on how to switch

Replace webpack-dev-server with webpack-plugin-serve

webpack-plugin-serve is smaller and has more frequent updates compared to webpack-dev-server.

With the implemented configuration, you shouldn't see any difference in behaviour.

Here is the difference between both implementations

Remove old PostCSS plugins that aren't useful anymore due to more modern browsers

  • postcss-dir-pseudo-class: is now handled by lightningcss
  • postcss-attribute-case-insensitive: is now fully supported by all browsers we support
  • postcss-font-family-system-ui: is now handled by lightningcss
  • postcss-pseudo-class-any-link: is now fully supported by all browsers we support
  • postcss-replace-overflow-wrap: is fully supported by all browsers we support

Replace @parcel/css with lightningcss

@parcel/css has been rebranded to lightningcss, many improvements and new feature are added regularly and are constantly improving the library.

Better support for CSS Modules

Naming a file with a .module.css or .module.scss will apply different rules than other CSS files

  • CSS Class names will be hashed to avoid collisions.
  • Apply CSS Modules transforms.
  • Linting rules for naming are relaxed for module files.

Update Jest 27 to 29

Two major versions of Jest came out, this should mostly have no impact on your builds except a change in the Snapshot format.
Which means that on next test run, your snapshots will have many differences, running crafty test -u will update them.

Jest 28 Release notes - Jest 28 Release notes

Update TypeScript 4.6 to 4.8

Important updates

  • Update Jest 27.5.1 to 29.1.2
  • Update TypeScript 4.6.3 to 4.8.4
  • Update Babel 7.17 to 7.19
  • Update ESLint 8.14.0 to 8.24.0
  • Update SWC 1.2.171 to 1.3.5
  • Update Postcss 8.4.12 to 8.4.17
  • Update Stylelint 14.7.1 to 14.13.0
  • Update Rollup 2.70.2 to 2.79.1
  • Update Webpack 5.72.0 to 5.74.0

All Changes v1.19.1...v1.20.0

Assets 2