Version 6.3 of @lipemat/js-boilerplate is now available and ready for use. Over the past month or so there have been a couple minor version updates. This post will cover all changes since version 6.0.0.
The main focus of this release was to reduce the reliance on core-js in favor of improved browser targeting and tools to verify which browsers are actually targetted.
Reduce Reliance on Core-JS
Core JS is a set of polyfills which add support to older browsers for modern code structures like ES6 or ES7.
Previous versions of js-boilerplate would include the entire core-js module in all bundles, thus assuring that all browsers would be supported for all modern features. The downside of this is adding approximately 100k to all bundles.
Now the inclusion of any or all of core-js is handled automatically by Babel using @babel/preset-env while honoring the current project’s browserslist configuration. If you are targeting only modern browsers, no modules will be added and your finished bundle will be 100k smaller than previous versions. Even if you are targeting some legacy browsers, your bundle size will still likely be smaller as only required modules are added.
Browerslist Improvements
Instead of simply using the default browserslist configuration when one is not specified, the package will now default to lists provided by @wordpress/browserslist-config. Since WordPress runs 40% of the internet, it’s safe to assume that supporting the same list of browsers as WordPress is a good starting point. If a browserslist configuration is specified for a project, it will be honored as is.
Note: IE11 has been excluded from the default list of browsers so if you need support you’ll need to add your own browerslist config.
A new browserslist script has been added to retrieve a list of currently targeted browsers. Add the following to your package.json and run yarn browserslist. The console will display a list of browsers targeted by your browserslist configruation, or the defaults if no configuration is specified.
Automatic ES6 Package Detection
By default Babel will compile anything from your src directory to ES5 code which may be read by any browser (or at least the currently targeted browsers). However, any code within the node_modules directory is excluded as it adds unnecessary overhead and conflicts to Babel.
When a package is added to node_modules which does not contain an ES5 version of its code, it is now automatically detected and added to the list of code that Babel will compile into ES5. Now every package will work in browsers, regardless if the author has provided browser support or not.
If for some reason a package is not detected, additional packages may be added to the package.json file via an es6Modules key.
CSS Property Support
While most browsers now support CSS properties, when targeting legacy browsers, postcss-preset-env will generate static versions of CSS properties in the finished stylesheet. When using CSS modules with JS (as this library does) each .pcss file is treated as a separate CSS structure. Unless the CSS properties are declared separately in each file, PostCSS will have no reference of the original values and is unable to generate static versions.
To remedy this issue, the library will now look for CSS files which contain global CSS properties and will use the declared CSS properties to generate the static versions. The library will look for variables.css files in the following locations.
src/globals/pcss/variables.css../pcss/variables.css