[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