A PostCSS plugin that helps you add the new experimental CSS declaration, content-visibility: auto
to any selectors for boosting render performance.
/* Before transformations */
.foo {
position: absolute;
}
/* After transformations */
.foo {
position: absolute;
content-visibility: auto; /*You can also generate this rule with any other value you want*/
}
For the benefit of content-visibility: auto
, check out this post.
This plugin is created using PostCSS Sparrow Props Filter and PostCSS Sparrow Values Filter under the hood.
As with any experimental features, they are subject to change at anytime. You should not manually add the new declaration into your stylesheet. Using this plugin, you can easily add or remove this declaration anywhere, anytime you need.
This plugin is made with love by a Hong Konger.
This plugin require you to use PostCSS Sparrow for matching with selectors you want.
Download both postcss-sparrow
and this plugin through NPM.
npm i postcss-sparrow postcss-sparrow-auto-content-visibility
Then import this plugin as the callback for PostCSS Sparrow.
//postcss.config.js
module.exports = {
plugins: [
//Other plugins...
require('postcss-sparrow')({
transformations: [
{
selectors: ['*'],
inclusion: true,
callbacks: [
require('postcss-sparrow-auto-content-visibility')({
props: ['display'], //Default to ['display']. This value will be passed to postcss-sparrow-props-filter as options.props
values: ['none'], // Default to ['none']. This value will be passed to postcss-sparrow-values-filter as options.values
declValue: 'auto' // Default to 'auto' for content-visibility: auto
})
]
}
]
})
]
}