Be water

Be water, be fluid, be responsive.

A PostCSS plugin that helps you automatically apply clamp() to values to achieve a fluid design efficently.

This plugin uses PostCSS Sparrow, PostCSS Sparrow Units Filter and PostCSS Sparrow Props Filter under the hood for filtering CSS declarations.

/* Before transformation */
p {
  font-size: 30px;
  padding: 15px;
}
 

//postcss.config.js
module.exports = {
  plugins: [
    //Other plugins...
 
    require('postcss-sparrow')({
      transformations: [
        {
          selectors: ['*'],
          inclusion: true,
          callbacks: [
            require('bewater')(
              {
                props: {
                  props: ['font-size'],
                  inclusion: true
                },
                units: {
                  units: ['*'],
                  inclusion: true
                },
                scale: 1.5, //Multiplier for the original value, and the product will be used as the 3rd param for clamp()
                changeRate: '4vw' //The rate for the value to change.  This value will be used as the 2nd param for clamp()
              }
            )
          ]
        }
      ]
    })
  ]
}

/* After transformation */
p {
  font-size: clamp(30px, 4vw, 45px);
  padding: 15px;
}
 

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 postcss-sparrow bewater
 

Then import this plugin as the callback for PostCSS Sparrow.

API Reference

options.props : Object

Filter options for filtering CSS declaration by its prop. Read the API reference of PostCSS Sparrow Props Filter for more details. props defaults to [*] and inclusion defaults to true.

options.units : Object

Filter options for filtering CSS declaration by its prop. Read the API reference of PostCSS Sparrow Units Filter for more details. units defaults to [*] and inclusion defaults to true.

options.scale : Number

Multiplier for the original value, and the product will be used as the 3rd param for clamp(). Default to 2.

options.changeRate : String

The rate for the value to change. This value will be used as the 2nd param for clamp(). Default to 2vw.