PostCSS Will Change

title="Philosopher’s stone, logo of PostCSS"
src="https://postcss.org/logo-leftp.svg">

[PostCSS] plugin to insert 3D hack before [will-change] property.

This plugin uses backface-visibility to force the browser to create
a new layer, without overriding existing backface-visibility properties.
This 3D CSS hack is commonly done with transform: translateZ(0),
but backface-visibility is used here to avoid overriding
the more popular transform property.

These hacks are required for browsers that do not support will-change.

Use this plugin only before [Autoprefixer]. It will add vendor prefixes
to backface-visibility.

[Autoprefixer]: https://github.com/postcss/autoprefixer
[will-change]: https://dev.opera.com/articles/css-will-change-property/
[PostCSS]: https://github.com/postcss/postcss

``css
.foo {
will-change: transform;
}
`

`css
.foo {
backface-visibility: hidden;
will-change: transform;
}
`


alt="Sponsored by Evil Martians" width="236" height="54">


Usage

Step 1: Install plugin:

`sh
npm install --save-dev postcss postcss-will-change
`

Step 2: Check you project for existed PostCSS config: postcss.config.js
in the project root, "postcss" section in package.json
or postcss in bundle config.

If you do not use PostCSS, add it according to [official docs]
and set this plugin in settings.

Step 3: Add the plugin to plugins list:

`diff
module.exports = {
plugins: [
+ require('postcss-will-change'),
require('autoprefixer')
]
}
``

[official docs]: https://github.com/postcss/postcss#usage