-
-
Notifications
You must be signed in to change notification settings - Fork 78
PostCSS Preset Env 8
We're very mindful of the impact that major releases have which is why we're trying to keep the changes well documented, well thought out and establish a good way to move forward.
As a quick summary, we're trying to achieve the following:
A polyfill should be indistinguishable from the native behavior
This has been our motto for a while! We've seen that specs rarely change, but they do! And also, over time, some plugins got some features that were not spec-compliant. We've closely reviewed plugins and made corrections where needed.
Back when all of the plugins were moved to the monorepo (see announcement) we've been enforcing a consistent style among the plugins, both in terms of code style but also in file organization. This meant that links from unpkg hinted within plugins that require browser polyfills would have stopped working. To avoid creating more breaking changes, we had some script to copy to the old placement.
This script has now been removed so you will need to use the new locations if you rely on the old ones.
As hinted back in January, we're now not enabling by default plugins that require a browser polyfill. We've seen that those are "expected" to work but the implication of having a separate polyfill bundled within your JavaScript pipeline made. Hence, those plugins were almost never bundled in reality.
There were some plugins that had CLI packages distributed and some that didn't, we remediated that by creating a global CLI. While we don't recommend using the CLI as part of any pipeline, it's definitely useful when trying to quickly debug or demonstrate something.
We've removed those outliers that still kept an independent CLI so if you were relying on that, you should now migrate to use @csstools/csstools-cli.
The following plugins have been impacted:
- PostCSS Blank Pseudo
- PostCSS Focus Visible
- PostCSS Focus Within
- PostCSS Has Pseudo
- PostCSS Preset Env
- Prefers Color Scheme
The internal CLI exposed by the package has been removed in favor of the global CLI.
The old CDN URLs have been removed.
The browser polyfill has updated the initialization which means you need to update how it's called.
Generated CSS is now also different since it prepends js-blank-pseudo to the document on initialization so CSS doesn't start applying till then.
- Re-build your CSS with the new version of the library.
- If you use a CDN url, please update it.
- <script src="https://unpkg.com/css-blank-pseudo/browser"></script>
- <script src="https://unpkg.com/css-blank-pseudo/browser.min"></script>
+ <script src="https://unpkg.com/css-blank-pseudo/dist/browser-global.js"></script>- cssBlankPseudo(document)
+ cssBlankPseudoInit()- cssBlankPseudo({
- attr: false,
- className: 'blank'
- })
+ cssBlankPseudoInit({
+ replaceWith: '.blank'
+ })We've changed generated classes so it prepends .js-focus-visible to them. That way CSS is applied when the polyfill is known to be running. This class is added automatically by WICG's polyfill.
Even though there's no migration needed for this change, you might have been relying on the previous behavior which is why we've flagged this release as major.
We've changed generated classes so it prepends .js-focus-within to them. That way CSS is applied when the polyfill is known to be running. This class is added automatically by our browser polyfill which is now bundled within postcss-focus-visible as opposed to using the one from JSXTools.
- Import the polyfill from the PostCSS Plugin:
import focusWithinInit from 'postcss-focus-within/browser';
focusWithinInit();We have deprecated the experimental version of the plugin. All issues have been resolved in the main plugin and the experimental plugin is no longer maintained.
- Re-build your CSS with the new version of the library.
- If you were relying on
@csstools/css-has-pseudo-experimental, please use css-has-pseudo. - If you use a CDN URL, please update it.
- <script src="https://unpkg.com/css-has-pseudo/browser"></script>
+ <script src="https://unpkg.com/css-has-pseudo/dist/browser-global.js"></script>- <script src="https://unpkg.com/css-has-pseudo/browser.min"></script>
+ <script src="https://unpkg.com/css-has-pseudo/dist/browser-global.js"></script>enableClientSidePolyfills now defaults to false as opposed to true. This disables by default the following plugins:
- PostCSS Blank Pseudo
- PostCSS Focus Visible
- PostCSS Focus Within
- PostCSS Has Pseudo
- Prefers Color Scheme Query
These plugins require browser polyfills and transform your CSS in ways that make you dependent on the browser polyfill. As these plugins are rarely used and can be harmful we prefer to have these disabled by default.
If you did rely on plugins that need a client-side polyfill now pass the option enableClientSidePolyfills as true as opposed to not needing to pass it:
postcssPresetEnv({
+ enableClientSidePolyfill: true
});The old CDN URLs have been removed.
color-depth fallback has been removed.
The no-preference support has been dropped as this has been removed from the spec.
The old global object has been removed.
- Re-build your CSS with the new version of the library.
- If you use a CDN URL, please update it.
- <script src="https://unpkg.com/css-prefers-color-scheme/browser"></script>
+ <script src="https://unpkg.com/css-prefers-color-scheme/dist/browser-global.js"></script>- <script src="https://unpkg.com/css-prefers-color-scheme/browser.min"></script>
+ <script src="https://unpkg.com/css-prefers-color-scheme/dist/browser-global.js"></script>- Use
prefersColorSchemeInitto initialize the polyfill in the browser.
- initPrefersColorScheme()
+ prefersColorSchemeInit()- Remove
@media (prefer-color-scheme: no-preference)from your CSS.
@media (prefers-color-scheme: no-preference) was removed from the specification and should be equivalent to not having any media query.
- @media (prefers-color-scheme: no-preference) {
- .some-selector {
- /* your styles ... */
- }
- }
+ .some-selector {
+ /* your styles ... */
+ }