[1.20.0]

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

• TypeScript 4.7
• TypeScript 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

[1.19.1] fix reference to terser in Rollup

Highlights

• fix reference to compiled "terser" dependency
• Dependencies updates

Updates

• @swc/core from 1.2.170 to 1.2.171
• eslint from 8.13.0 to 8.14.0
• c8 from 7.11.0 to 7.11.2
• browserslist from 4.20.2 to 4.20.3
• postcss-scss from 4.0.3 to 4.0.4
• fork-ts-checker-webpack-plugin from 7.2.6 to 7.2.7
• @rollup/plugin-commonjs from 21.1.0 to 22.0.0

[1.19.0] `@parcel/css` and Typescript 4.6

Highlights

• Replace postcss-csso and other PostCSS plugins with @parcel/css
• Added new Stylelint rule swissquote/no-variable-in-transpiled-function to warn when unsupported
• Support for TypeScript 4.6

Introducing @parcel/css

@parcel/css is a transpiler and minifier for CSS it natively supports many features and is now included in @swissquote/postcss-preset-swissquote
You can find a page that explains all the features that are supported here.

• Support both the legacy color() (now color-mod()) and the W3C color() function
• Added many tests to cover all the features and prevent regressions
• Some PostCSS plugins we included before are now no longer needed
  • autoprefixer
  • postcss-color-hsl
  • postcss-color-rgb
  • postcss-color-rgba-fallback
  • postcss-csso
  • postcss-calc
  • postcss-color-hex-alpha
  • postcss-color-rebeccapurple
  • postcss-custom-media
  • postcss-logical
  • postcss-media-minmax
  • postcss-selector-not
• Removed some plugins that were needed only for old IE versions
  • pixrem
  • pleeease-filters
  • postcss-pseudoelements

New stylelint rule swissquote/no-variable-in-transpiled-function

CSS Custom properties (variables) allow you to create CSS that can dynamically change values at runtime, but what happens when you are using custom properties on something that will be transpiled ?
The answer is that the transpiled function will not be dynamically updated anymore.
If you take the following : color: color-mod(var(--color) contrast(50%)); the output will be color: rgb(128, 128, 255);; the custom property is gone and your CSS is no longer dynamic.
This rule will warn you about these cases.

TypeScript 4.6

https://devblogs.microsoft.com/typescript/announcing-typescript-4-6/

Other changes

• remove gulp-stylelint fork, replace with @ronilaukkarinen/gulp-stylelint
• support any Jest option when using crafty test #1514
• replace xml2js with fast-xml-parser
• make sure the react test setup for jest works for React 18
• fix reference to to postcss-scss to refer to the resolved module
• allow to override @babel/preset-env and @babel/preset-react options in @swissquote/babel-preset-swissquote #1500

Updates

• postcss from 8.4.6 to 8.4.12
• @babel/* from 7.17.7 to 7.17.9
• @swc/core from 1.2.143 to 1.2.170
• rollup from 2.67.3 to 2.70.2
• webpack from 5.69.1 to 5.72.0
• glob from 7.2.0 to 8.0.1
• gulp-eslint-new from 1.4.0 to 1.4.2
• big.js from 5.2.2 to 6.1.1
• json5 from 2.2.0 to 2.2.1
• browserslist from 4.19.3 to 4.20.2
• debug from 4.3.3 to 4.3.4
• micromatch from 4.0.4 to 4.0.5
• minimatch from 5.0.0 to 5.0.1
• semver from 7.3.5 to 7.3.7
• @rollup/plugin-babel from 5.3.0 to 5.3.1
• babel-loader from 8.2.3 to 8.2.5
• eslint from 8.9.0 to 8.13.0
• mini-css-extract-plugin from 2.5.3 to 2.6.0
• css-loader from 6.6.0 to 6.7.1
• stylelint from 14.5.2 to 14.7.1
• @swc/helpers from 0.3.3 to 0.3.8
• @swc/jest from 0.2.17 to 0.2.20
• swc-loader from 0.1.15 to 0.2.0
• @rollup/plugin-babel from 5.3.0 to 5.3.1
• fork-ts-checker-webpack-plugin from 7.2.1 to 7.2.6
• ts-jest from 27.1.3 to 27.1.4
• ts-loader from 9.2.6 to 9.2.8
• @rollup/plugin-commonjs from 21.0.1 to 21.1.0
• @rollup/plugin-node-resolve from 13.1.3 to 13.2.1
• @rollup/plugin-replace from 3.1.0 to 4.0.0
• @rollup/pluginutils from 4.1.2 to 4.3.2
• webpack-dev-server 4.7.4 to 4.8.1
• enhanced-resolve from 5.9.0 to 5.9.3
• yargs-parser from 21.0.0 to 21.0.1
• @typescript-eslint/* from 5.12.1 to 5.20.0
• eslint-config-prettier from 8.4.0 to 8.5.0
• eslint-import-resolver-typescript from 2.5.0 to 2.7.1
• eslint-plugin-import from 2.25.4 to 2.26.0
• eslint-plugin-react from 7.28.0 to 7.29.4
• eslint-plugin-react-hooks from 4.3.0 to 4.4.0
• postcss-import from 14.0.2 to 14.1.0
• postcss-pseudo-class-any-link from 7.1.1 to 7.1.2
• stylelint-scss from 4.1.0 to 4.2.0

[1.18.4] Remove eslint-plugin-sonarjs

Remove eslint-plugin-sonarjs

While this plugin is very useful it is also regularly adding new rules that break builds for teams that have automated updates.

[1.18.3] Updates and bugfixes

Babel preset changes

Removed the forced transpiling of @babel/plugin-proposal-optional-chaining, @babel/plugin-proposal-nullish-coalescing-operator, @babel/plugin-proposal-class-properties as they are present in @babel/preset-env and are properly supported by Webpack 5 now

Removed gulp-sourcemaps

remove gulp-sourcemaps as the feature is embedded in vinyl now

Revert changes made to fork-ts-checker-webpack-plugin for declaration files

It seems that in some cases the definition files weren't generated. We reverted to the previous way of building these files.

Use ESLint's embedded parser instead of @babel/eslint-parser

ESLint's parsing has made big improvements recently in terms of feature supports, and is much faster than Babel to parse files.

Dependencies updates

• @babel/core from 7.17.2 to 7.17.5
• @swc/core from 1.2.138 to 1.2.143
• browserslist from 4.19.1 to 4.19.3
• minimatch from 4.1.1 to 5.0.0
• terser from 5.10.0 to 5.11.0
• stylelint from 14.3.0 to 14.5.2
• ts-jest from 27.0.7 to 27.1.3
• rollup from 2.67.2 to 2.67.3
• webpack from 5.68.0 to 5.69.1
• eslint-config-prettier from 8.3.0 to 8.4.0
• eslint-plugin-sonarjs from 0.11.0 to 0.12.0

[1.18.2]

Some incorrect files were pushed, please avoid this release, replaced by 1.18.3

[1.18.1] Bugfixes

Highlights

• Fix issue of Resolve error: unable to load resolver "node" @swissquote/swissquote/import/export
• Remove unneeded embedded dependency on TypeScript as the dependency is present
• Move some Stylelint rules from the common to the recommended preset.

Updates

• eslint from 8.8.0 to 8.9.0
• gulp-eslint-new from 1.3.0 to 1.4.0
• minimatch from 3.0.5 to 4.1.1
• fork-ts-checker-webpack-plugin from 7.2.0 to 7.2.1
• @rollup/plugin-replace from 3.0.1 to 3.1.0
• @typescript-eslint/*from 5.11.0 to 5.12.0

[1.18.0] PostCSS 8, dependencies reduction

Highlights

• Update to PostCSS 8 (#963)
• Many dependencies of Crafty are now bundled
• @swissquote/crafty-preset-jest ESM Transformer is now only using babel
• @swissquote/crafty-preset-typescript Use write-dts mode from fork-ts-checker-webpack-plugin
• Improved Error handling
• Crafty now includes some forked packages

Update to PostCSS 8 #963

All plugins and integrations have been updated to PostCSS 8.
You should see no difference in behaviour compared to previous versions.

Also, postcss-nesting was removed as it is a subset of postcss-nested as well as postcss-filter-gradient since only very old versions of IE needed it.

Bundled dependencies

Crafty's integration of many tools leads to hundreds of dependencies.
Some are outdated, deprecated, or do the same as other dependencies.

One consequence of these dependencies is that a change in one dependency can sometimes introduce issues in other dependencies.
As described in #1338, an update in PostCSS with a new feature broke a package that was still using an older major version and wasn't compatible with this new feature.
Bundling dependencies should help avoid, or at least reduce, these situations in the future.

In this effort, Crafty started to bundle many dependencies.
From a total of 1575 dependencies when this effort started (Version 1.15.0), Crafty now has 681 dependencies.
This number represents the total number of dependencies if you install Crafty and its presets, which probably isn't your case.

The size reduction is less impressive as we went down from 268MB in version 1.15.0 to 247MB in version.
However, one important thing to note is the increasing size of the typescript and @swc/core packages, which are respectively 62MB and 43MB.

@swissquote/crafty-preset-jest ESM Transformer is now only using babel

When importing ESM modules in a non-ESM package, Jest fails to load it.
Crafty has a feature to allow this to work, it was improved to only use Babel instead of a combination of Babel + cherow

@swissquote/crafty-preset-typescript Use write-dts mode from fork-ts-checker-webpack-plugin

When declaration: true is set in tsconfig.json, fork-ts-checker-webpack-plugin was disabled as it wasn't supported.
Since its version 7.1.0 it now supports writing TypeScript declaration files and is now enabled in all cases.

This should reduce your build time if you have declaration: true in your tsconfig.json

Improved Error handling

When a task fails with an issue, the error messages should be more relevant and less verbose.
If the error is related to your code, no stacktrace should be displayed.

Also, errors a mechanism now ensures the same error isn't logged more than once.

Crafty now includes some forked packages

Some packages on which Crafty depends are unmaintained and contain very old dependencies.
Those packages and their dependencies present a risk when there is a need to update them, for example, when there is a new update of PostCSS.

The forked packages are in the package-forks folder:

Package	Difference with original
assets	The original version could not be bundled
gulp-newer	Modernize and reduce dependencies
gulp-plumber	Modernize and reduce dependencies
gulp-stylelint	PostCSS 8 support
pixrem	PostCSS 8 support
pleeease-filters	PostCSS 8 support
postcss-assets	PostCSS 8 support
postcss-atroot	PostCSS 8 support
postcss-color-gray	PostCSS 8 support
postcss-color-hsl	PostCSS 8 support
postcss-color-hwb	PostCSS 8 support
postcss-color-mod-function	PostCSS 8 support. Support for legacy color() function. Fix incorrect color math.
postcss-color-rgb	PostCSS 8 support
postcss-color-rgba-fallback	PostCSS 8 support
postcss-custom-properties	PostCSS 8 support
postcss-image-set-polyfill	PostCSS 8 support
postcss-pseudoelements	PostCSS 8 support
postcss-selector-matches	PostCSS 8 support

Internal

• Update to Yarn 3.1.1
• Remove oao. Use a custom publish script instead
• Replace Jest for package tests with AVA

Dependencies Updates

• @babel/* from 7.16.0 to 7.17.2

• jest from 27.2.0 to 27.5.1

• eslint from 8.1.0 to 8.8.0

• postcss from 7.0.39 to 8.4.6

• rollup from 2.59.0 to 2.67.2

• stylelint from 13.13.1 to 14.3.0

• @swc/core from 1.2.106 to 1.2.138

• webpack from 5.61.0 to 5.68.0

• eslint-webpack-plugin from 3.1.0 to 3.1.1

• css-loader from 6.5.0 to 6.6.0

• gulp-postcss from 8.0.0 to 9.0.1

• mini-css-extract-plugin from 2.4.3 to 2.5.3

• postcss-scss from 2.1.1 to 4.0.3

• fork-ts-checker-webpack-plugin from 6.4.0 to 7.2.0

• rollup-plugin-typescript2 from 0.30.0 to 0.31.2

• gulp-eslint-new from 0.5.0 to 1.3.0

• @rollup/plugin-node-resolve from 13.0.6 to 13.1.3

• @rollup/plugin-replace from 3.0.0 to 3.0.1

• terser-webpack-plugin from 5.2.4 to 5.3.1

• webpack-dev-server from 4.4.0 to 4.7.4

• log-symbols from 4.1.0 to 5.1.0

• browserslist from 4.17.5 to 4.19.1

• enhanced-resolve from 5.8.3 to 5.9.0

• chokidar from 3.5.2 to 3.5.3

• find-up from 5.0.0 to 6.3.0

• merge-anything from 4.0.1 to 5.0.2

• copy-anything from 2.0.3 to 3.0.2

• yargs-parser from 20.2.9 to 21.0.0

• eslint-plugin-import from 2.25.2 to 2.25.4

• eslint-plugin-react from 7.26.1 to 7.28.0

• eslint-plugin-sonarjs from 0.10.0 to 0.11.0

• autoprefixer from 9.8.8 to 10.4.2

• postcss-advanced-variables replaced with @knagis/postcss-advanced-variables

• postcss-color-rebeccapurple from 6.0.0 to 7.0.2

• postcss-csso from 4.0.0 to 6.0.0

• postcss-custom-media from 7.0.8 to 8.0.0

• postcss-custom-selectors from 5.1.2 to 6.0.0

• postcss-dir-pseudo-class from 5.0.0 to 6.0.4

• postcss-font-family-system-ui from 4.3.0 to 5.0.0

• postcss-font-variant from 4.0.1 to 5.0.0

• postcss-import from 12.0.1 to 14.0.2

• postcss-initial from 3.0.4 to 4.0.1

• postcss-media-minmax from 4.0.0 to 5.0.0

• postcss-nested from 4.2.3 to 5.0.6

• postcss-property-lookup from 2.0.0 to 3.0.0

• postcss-pseudo-class-any-link from 6.0.0 to 7.1.1

• postcss-replace-overflow-wrap from 3.0.0 to 4.0.0

• postcss-reporter from 6.0.1 to 7.0.5

• postcss-selector-not from 4.0.1 to 5.0.0

• postcss-url from 8.0.0 to 10.1.3

• stylelint-scss from 3.21.0 to 4.1.0

• stylelint-prettier from 1.2.0 to 2.0.0

• postcss-value-parser from 4.1.0 to 4.2.0

• postcss-selector-parser from 6.0.6 to 6.0.9

[1.17.2] ESLint 8 updates

Fix eslint-plugin-react-hooks warnings

Some warnings related to ESLint 8 configuration changes are fixed with a dependency update

Updates

• @babel/* 7.15.8 to 7.16.0
• @typescript-eslint/* 5.2.0 to 5.3.0
• gulp-eslint-new 0.4.0 to 0.5.0
• css-loader 6.4.0 to 6.5.0
• webpack 5.60.0 to 5.61.0
• rollup 2.58.3 to 2.59.0
• webpack-dev-server 4.3.1 to 4.4.0
• eslint-plugin-react-hooks 4.2.0 to 4.2.1-alpha-a0d991fe6-20211031

[1.17.1] ESLint 8, Dropping IE11 support

Highlights

• We updated the list of browsers, IE 11 is no longer in the list
• ESLint 8

IE 11 support removed

We updated the list of supported browsers to the following: Edge >= 18, Safari >= 13, iOS >= 13, Chrome >= 77, and_chr >= 77, Firefox >= 69
Before this change it was : > 0.25%, Edge >= 17, Safari >= 11, iOS >= 11, Chrome >= 66, Firefox >= 60, IE >= 11, not op_mini all

You can still change this in your projects if you wish to have a larger or narrower browser support using the browsers field in crafty.config.js, more details In the docs

ESLint 8

ESLint 8 was released a few weeks ago, we updated Crafty to support it along with all the related plugins.

Full Changelog

Dependency updates

• eslint 7.32.0 to 8.1.0

• eslint-webpack-plugin 3.0.1 to 3.1.0

• gulp-eslint7 replaced with gulp-eslint-new

• @typescript-eslint/* 5.0.0 to 5.2.0

• @rollup/plugin-node-resolve 13.0.5 to 13.0.6

• @swc/core 1.2.95 to 1.2.103

• @swc/jest 0.2.4 to 0.2.5

• babel-plugin-istanbul 6.0.0 to 6.1.1

• babel-loader to 8.2.2 to 8.2.3

• browserslist 4.17.3 to 4.17.5

• fork-ts-checker-webpack-plugin 6.3.4 to 6.4.0

• jest 27.2.5 to 27.3.1

• mini-css-extract-plugin 2.4.2 to 2.4.3

• postcss-loader 6.1.1 to 6.2.0

• style-loader 6.1.1 to 6.2.0

• ts-jest 27.0.5 to 27.0.7

• rollup 2.58.0 to 2.58.3

• webpack 5.58.2 to 5.60.0