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 🆓 🆓

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
              })
          ]
        }
      ]
    })
  ]
}