PostCSS Sparrow Clamp Fallback

A PostCSS plugin that creates fallback of clamp() for you.

/* Before transformations */
.foo {
  font-size: clamp(20px, 2vw, 40px);
}

/* After transformations */
/* If you set fallback: "media" */
/* Coming soon */
@media (width <= 1000px) {
  .foo{
   font-size: 20px; /*min*/
  }
}

.foo{
  font-size: 2vw;
}

@media (width >= 2000px) {
.foo{
   font-size: 40px; /*max*/
  }
}

/* After transformations */
/* If you set fallback: "minmax" */
.foo {
  font-size: max(20px, min(2vw, 40px));
}

Why do I need this plugin?

clamp() is a very powerful tool for creating a responsive design. Nevertheless, its support is limited at the moment. As of Sept 2020, this rule is only supported by 77% of all browsers.

This plugin will help you transform clamp() with the combination of min() and max() or media queries for more browser support.

Browser support for various fallback

• Falling back with min() and max() will give you 87.79% browser support.

• Falling back with media queries will give you 98.67% browser support, which would also support up to IE 9 (Coming soon)

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 postcss-sparrow-clamp-fallback

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-clamp-fallback')({
              fallback: 'minmax'
            })
          ]
        }
      ]
    })
  ]
}

API Reference

options.fallback : String

Choose the way to fallback clamp(). Set it to 'minmax' to fallback with the combination of min() and max(); set it to 'media' to fallback with media queries.

This option is default to 'minmax'.

Option for 'media' coming soon.