postcss-sparrow-auto-content-visibility
v0.1.1
Published
A PostCSS Sparrow plugin that add content visibility property for you automatically.
Downloads
9
Maintainers
Readme
PostCSS Sparrow Auto Content Visibility
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.
Why should I use this plugin?
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.
Made in Hong Kong :free: :free:
This plugin is made with love by a Hong Konger.
Installation
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
})
]
}
]
})
]
}