Skip to content

[1.18.0] PostCSS 8, dependencies reduction
Compare
Choose a tag to compare
@onigoetz onigoetz released this 10 Feb 23:33
· 1251 commits to master since this release
v1.18.0
d315a0f

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

Assets 2
Loading