What are advanced transforms?
Certain optimizations are not suitable for all use cases; unlike those that we bundle by default, advanced transforms all carry a certain amount of risk. For each type of transform, we've documented the assumptions that it must make about your CSS in order for the transform to be safe. Most of these transforms fall into either or both of categories.
A good example is postcss-merge-idents; in order for this transform to be safe
@keyframes rules and selectors that utilise them must be in the same file.
This transform changes CSS semantically; it may remove styles based on certain characteristics of the CSS, or it might update values to make the CSS smaller overall. Depending on exactly what the transform does, this may be undesirable because it might change the appearance of your website in certain use cases.
A good example is autoprefixer; this transform changes CSS semantics by removing out of date vendor prefixes. In order for this transform to be safe, your browserslist configuration must reflect the browsers that your site chooses to support.
Using advanced transforms
Advanced transforms are not bundled with cssnano by default, so you'll need to install the preset alongside cssnano:
npm install cssnano-preset-advanced --save-dev
You can then load it using any of the techniques mentioned in
our presets guide. For example, using
Do you have an idea for an advanced transform?
Did we miss an opportunity to compress your CSS further? You can learn about how to contribute in our next guide.
Last updated on Wed, 11 May 2022 16:04:38 GMT