blob: 515f9a55e208892687233db9321b5e7f30f9d048 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
# PostCSS Will Change
<img align="right" width="135" height="95"
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;
}
```
<a href="https://evilmartians.com/?utm_source=postcss-will-change">
<img src="https://evilmartians.com/badges/sponsored-by-evil-martians.svg"
alt="Sponsored by Evil Martians" width="236" height="54">
</a>
## 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
|
