Advanced transforms

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.

Assumes concatenation

This transform assumes that the CSS passed through cssnano is all that is needed
for a website to run; it doesn't resources from any other source. This may be
problematic if the styles you are writing in some way interact with third party
styles, or you are using multiple stylesheets instead of concatenating them, or
you are injecting CSS via JavaScript, for example.

A good example is postcss-merge-idents; in order for this transform to be safe
any @keyframes rules and selectors that utilise them must be in the same file.

Changes semantics

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 package.json:

{

"name":"awesome-application",

"cssnano":{

"preset":"advanced"

}

}

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.