https://github.com/postcss/postcss-will-change
PostCSS plugin to insert 3D hack before will-change property
https://github.com/postcss/postcss-will-change
Last synced: 9 months ago
JSON representation
PostCSS plugin to insert 3D hack before will-change property
- Host: GitHub
- URL: https://github.com/postcss/postcss-will-change
- Owner: postcss
- License: mit
- Created: 2015-02-19T21:46:02.000Z (almost 11 years ago)
- Default Branch: main
- Last Pushed: 2024-07-18T14:18:13.000Z (over 1 year ago)
- Last Synced: 2024-10-29T13:46:52.818Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 404 KB
- Stars: 51
- Watchers: 8
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Will Change
[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;
}
```
## Usage
**Step 1:** Install plugin:
```sh
npm install --save-dev postcss postcss-will-change
```
**Step 2:** Check your project for existing 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