Bot releases are visible (Hide)
stylelint-no-unsupported-browser-features
as it is unmaintainedgulp-babel
and gulp-concat
as they are unmaintainedgulp-plumber
with stream-plumber
Full Changelog: https://github.com/swissquote/crafty/compare/v1.26.0...v1.27.0
Published by onigoetz 5 months ago
css-loader
v7 introduced a change that requires the following change in all your CSS module imports:
- import styles from "./Component.module.css";
+ import * as styles from "./Component.module.css";
Full Changelog: https://github.com/swissquote/crafty/compare/v1.25.0...v1.26.0
Published by onigoetz 8 months ago
devServer
#2285@swissquote/swissquote/react/prop-types
in TypeScript files #2216paths
configuration in TypeScript #2066tsconfigFile
option to JS bundles to specify a custom tsconfig.json
Prettier 3 supports syntax for TypeScript 5.2 and 5.3 such as import assertions and resource management
eslint: {
settings: {
"formatting/mode": "prettier:3",
},
},
Webpack and ESLint support TypeScript's "paths"
options.
You can also change the tsconfig.json
by setting tsconfigFile
in the bundle options.
Full Changelog: https://github.com/swissquote/crafty/compare/v1.24.0...v1.25.0
Published by onigoetz 10 months ago
In alignment with Node.js release schedule, Crafty stops supporting Node 16, but supports version 18 and 20
When running crafty ide
a few files are created inside your repository so that your IDE knows you're using eslint/prettier/jest.
We got some feedback that this feature is confusing because every user needs to run it on their own machine.
Starting with this version, stylelint.config.mjs
, prettier.config.mjs
, and jest.config.mjs
are created in a commit-friendly way, it will no longer contain the content of the configuration but will allow to commit and get a pleasant out-of-the-box experience for newcomers
At this stage, this doesn't work for ESLint and this file should still not be committed, this is because ESLint's configuration is trickier and another change is ongoing for this one; #2250
As is the case every year, we update the list of supported browsers. The browserslist
query is now the following:
Edge >= 96, Safari >= 15, iOS >= 15, Chrome >= 96, and_chr >= 96, Firefox >= 94, > 1%, not dead, not op_mini all
As it is usual, TypeScript brings a lot of updates in this new version.
You can use all the new features of TypeScript 5.3 except for newly introduced syntax such as import attributes.
This is because Prettier 2 does not support it.
We are working on Prettier 3 support for Crafty to fix this.
Full Changelog: https://github.com/swissquote/crafty/compare/v1.23.0...v1.24.0
Published by onigoetz about 1 year ago
crafty-runner-rollup
as it wasn't used@squoosh/lib
with @onigoetz/resquoosh
gulp-typescript
with @onigoetz/gulp-typescript
using
)@swissquote/swissquote/import/first
since some test files need jest.mock
before import
Full Changelog: https://github.com/swissquote/crafty/compare/v1.22.3...v1.23.0
Published by onigoetz over 1 year ago
--fix
as the result could be unpredictable.Full Changelog: https://github.com/swissquote/crafty/compare/v1.22.2...v1.22.3
Published by onigoetz over 1 year ago
crafty-preset-jest
for ESMbin.cjs
to force node to start it as CommonJS, allows to install it within an ESM modulecrafty.runAllSync(method: string, ...args)
method to run all implementations of an extension within presets.CraftyPreset
class with the following methods:
implements(method: string)
run(method: string, ...args)
get(property: string)
import()
. This allows future presets to be created as ESM modulescrafty-preset-jest
for ESMpackage.json
contains type: "module"
enhanced-resolve
to resolve modules in Jest, allows to set .mjs
and .cjs
to be aliases of .mts
and .cts
Full Changelog: https://github.com/swissquote/crafty/compare/v1.22.1...v1.22.2
Published by onigoetz over 1 year ago
.mjs
and .mts
files in gulp.mts
files with dependencies to other .mts
files. Same for .cts
Full Changelog: https://github.com/swissquote/crafty/compare/v1.22.0...v1.22.1
Published by onigoetz over 1 year ago
crafty-preset-typescript
crafty-preset-lightningcss
as alternative to crafty-preset-postcss
crafty-preset-stylelint
--profile
and --analyze
optionsPrettier 2.0 was released a while ago, introducing some new formatting rules that aren't backwards compatible. We've held off from upgrading for now as our internal Git hooks are using Crafty to autoformat code on commit. Upgrading Crafty to Prettier 2.0 would mean that all projects need to migrate as soon as the change is introduced.
Instead of this, we decided to bundle both Prettier 1 and Prettier 2 and let you opt-in to Prettier 2 at your own pace.
Since the release of Prettier 2.0, new features were added to TypeScript along with new syntax, such as import type ... from ...
. Support for these new features is present in Prettier 2.0 but not Prettier 1.0, if you wish to use those, you need to upgrade opt-in to Prettier 2
crafty.config.js
:
module.exports = {
eslint: {
settings: {
"formatting/mode": "prettier:2"
}
}
}
SWC Provides both transpiling and minification abilities, its architecture and the fact it's written in Rust makes it a strong contender compared to Babel and Terser.
First, we replaced the default minification in Webpack by SWC, in our limited tests, it improved by about 30% our build time in Webpack.
crafty-preset-typescript
works with two steps, one is to convert TypeScript to modern EcmaScript, and a second step that transpiles EcmaScript down to what's supported by the browsers you need to support.
This second step was done by Babel but SWC will now be used instead.
TypeScript 5.0 was released a few weeks ago. Along with many features which I won't cover here, this version is 10-25% faster and smaller than before.
Along with the update we added a test suite to make sure that new syntax that's introduced by TypeScript can be properly parsed by the whole toolchain it goes through; ESLint, SWC, Prettier and all other pieces in between need to understand a new feature for it to be effectively useable inside Crafty. This also allows us to easily track the features that aren't working at the moment and make sure they'll be available to you when all tools support them.
This helped us finalize support for *.mts
and *.cts
files, you may now decide to use either extension for your module or commonjs files. Of course, the current *.ts
and *.tsx
extensions will continue to work fine.
crafty-preset-lightningcss
as alternative to crafty-preset-postcss
Lightningcss is a recent contender in the CSS space, built in Rust ... I think you can guess what's coming next; it's very fast.
Previous releases of Crafty have introduced lightningcss as a part of crafty-preset-postcss
and replaced some postcss plugins with it. We decided to take it a step further and provide a preset that completely bypasses postcss plugins.
You will get less features out of the box (as our postcss preset is packed with them) but could find that it's enough for your needs and offers a lighter and faster alternative.
crafty-preset-stylelint
Now that we have two presets that can convert CSS, we extracted CSS Linting into a separate package,.
This preset exposes the crafty cssLint
command and can be used without requiring crafty-preset-lightningcss
nor crafty-preset-postcss
crafty-runner-webpack
's --profile
and --analyze
optionsUp until Crafty 1.21.1 running crafty run
with --profile
would export an analysis created with webpack-bundle-analyzer. Starting with Crafty 1.22.0 this option is renamed to --analyze
The --profile
options still remains but instead outputs an analysis of the time spent in loaders and plugins provided by speed-measure-webpack-plugin. This can help track down performance issues in your builds.
Full Changelog: https://github.com/swissquote/crafty/compare/v1.21.1...v1.22.0
Published by onigoetz almost 2 years ago
note that React Fast Refresh works only with the development version of React, if you are loading React through requirejs or equivalent make sure to switch to the dev version while running crafty watch
Full Changelog: https://github.com/swissquote/crafty/compare/v1.20.0...v1.21.1
Published by onigoetz almost 2 years ago
Please don't use this version, something went wrong with the release.
Use version 1.21.1 instead.
Published by onigoetz about 2 years ago
Edge >= 86, Safari >= 15, iOS >= 15, Chrome >= 86, and_chr >= 86, Firefox >= 81, > 1%, not dead, not op_mini all
@parcel/css
with lightningcss
(the package has been renamed)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
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
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
postcss-dir-pseudo-class
: is now handled by lightningcsspostcss-attribute-case-insensitive
: is now fully supported by all browsers we supportpostcss-font-family-system-ui
: is now handled by lightningcsspostcss-pseudo-class-any-link
: is now fully supported by all browsers we supportpostcss-replace-overflow-wrap
: is fully supported by all browsers we support@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.
Naming a file with a .module.css
or .module.scss
will apply different rules than other CSS files
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
All Changes https://github.com/swissquote/crafty/compare/v1.19.1...v1.20.0
Published by onigoetz over 2 years ago
@swc/core
from 1.2.170 to 1.2.171eslint
from 8.13.0 to 8.14.0c8
from 7.11.0 to 7.11.2browserslist
from 4.20.2 to 4.20.3postcss-scss
from 4.0.3 to 4.0.4fork-ts-checker-webpack-plugin
from 7.2.6 to 7.2.7@rollup/plugin-commonjs
from 21.1.0 to 22.0.0Published by onigoetz over 2 years ago
postcss-csso
and other PostCSS plugins with @parcel/css
swissquote/no-variable-in-transpiled-function
to warn when unsupported@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.
color()
(now color-mod()
) and the W3C color()
functionswissquote/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.
https://devblogs.microsoft.com/typescript/announcing-typescript-4-6/
gulp-stylelint
fork, replace with @ronilaukkarinen/gulp-stylelint
crafty test
#1514xml2js
with fast-xml-parser
postcss-scss
to refer to the resolved module@babel/preset-env
and @babel/preset-react
options in @swissquote/babel-preset-swissquote
#1500postcss
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.170rollup
from 2.67.3 to 2.70.2webpack
from 5.69.1 to 5.72.0glob
from 7.2.0 to 8.0.1gulp-eslint-new
from 1.4.0 to 1.4.2big.js
from 5.2.2 to 6.1.1json5
from 2.2.0 to 2.2.1browserslist
from 4.19.3 to 4.20.2debug
from 4.3.3 to 4.3.4micromatch
from 4.0.4 to 4.0.5minimatch
from 5.0.0 to 5.0.1semver
from 7.3.5 to 7.3.7@rollup/plugin-babel
from 5.3.0 to 5.3.1babel-loader
from 8.2.3 to 8.2.5eslint
from 8.9.0 to 8.13.0mini-css-extract-plugin
from 2.5.3 to 2.6.0css-loader
from 6.6.0 to 6.7.1stylelint
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.20swc-loader
from 0.1.15 to 0.2.0@rollup/plugin-babel
from 5.3.0 to 5.3.1fork-ts-checker-webpack-plugin
from 7.2.1 to 7.2.6ts-jest
from 27.1.3 to 27.1.4ts-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.2webpack-dev-server
4.7.4 to 4.8.1enhanced-resolve
from 5.9.0 to 5.9.3yargs-parser
from 21.0.0 to 21.0.1@typescript-eslint/*
from 5.12.1 to 5.20.0eslint-config-prettier
from 8.4.0 to 8.5.0eslint-import-resolver-typescript
from 2.5.0 to 2.7.1eslint-plugin-import
from 2.25.4 to 2.26.0eslint-plugin-react
from 7.28.0 to 7.29.4eslint-plugin-react-hooks
from 4.3.0 to 4.4.0postcss-import
from 14.0.2 to 14.1.0postcss-pseudo-class-any-link
from 7.1.1 to 7.1.2stylelint-scss
from 4.1.0 to 4.2.0Published by onigoetz over 2 years ago
While this plugin is very useful it is also regularly adding new rules that break builds for teams that have automated updates.
Published by onigoetz over 2 years ago
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
gulp-sourcemaps
remove gulp-sourcemaps as the feature is embedded in vinyl
now
fork-ts-checker-webpack-plugin
for declaration filesIt seems that in some cases the definition files weren't generated. We reverted to the previous way of building these files.
@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.
@babel/core
from 7.17.2 to 7.17.5@swc/core
from 1.2.138 to 1.2.143browserslist
from 4.19.1 to 4.19.3minimatch
from 4.1.1 to 5.0.0terser
from 5.10.0 to 5.11.0stylelint
from 14.3.0 to 14.5.2ts-jest
from 27.0.7 to 27.1.3rollup
from 2.67.2 to 2.67.3webpack
from 5.68.0 to 5.69.1eslint-config-prettier
from 8.3.0 to 8.4.0eslint-plugin-sonarjs
from 0.11.0 to 0.12.0Published by onigoetz over 2 years ago
Some incorrect files were pushed, please avoid this release, replaced by 1.18.3
Published by onigoetz over 2 years ago
Resolve error: unable to load resolver "node" @swissquote/swissquote/import/export
common
to the recommended
preset.eslint
from 8.8.0 to 8.9.0gulp-eslint-new
from 1.3.0 to 1.4.0minimatch
from 3.0.5 to 4.1.1fork-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.0Published by onigoetz over 2 years ago
@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
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.
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 babelWhen 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
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.
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 |
oao
. Use a custom publish script instead@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
Published by onigoetz almost 3 years ago
Some warnings related to ESLint 8 configuration changes are fixed with a dependency update