Nostalgic Pickled Mango

    postcss-clamp

    4.1.0 • Public • Published

    PostCSS Clamp

    Build Status codecov.io

    PostCSS plugin to transform clamp() to combination of min/max.

    This plugin transform this css:

    .foo {
      width: clamp(10px, 4em, 80px);
    }

    into this:

    .foo {
      width: max(10px, min(4em, 80px));
    }

    Or with enabled options precalculate:

    .foo {
      width: clamp(10em, 4px, 10px);
    }
    
    /* becomes */
    
    .foo {
      width: max(10em, 14px);
    }

    'Can I use' table

    Instalation

    $ npm install postcss postcss-clamp --save-dev
    or
    $ yarn add --dev postcss postcss-clamp

    Usage

    Use PostCSS Clamp as a PostCSS plugin:

    const postcss = require('postcss');
    const postcssClamp = require('postcss-clamp');
    
    postcss([
      postcssClamp(/* pluginOptions */)
    ]).process(YOUR_CSS /*, processOptions */);

    PostCSS Clamp runs in all Node environments, with special instructions for:

    Node PostCSS CLI Webpack Create React App Gulp Grunt

    See PostCSS docs for examples for your environment.

    Options

    precalculate

    The precalculate option determines whether values with the same unit should be precalculated. By default, these are not precalculation.

    postcssColorHexAlpha({
      precalculate: true
    });

    The second and third value has the same unit (px):

    .foo {
      width: clamp(10em, 4px, 10px);
    }
    
    /* becomes */
    
    .foo {
      width: max(10em, 14px);
    }

    Here all values have the same unit:

    .foo {
      width: clamp(10px, 4px, 10px);
    }
    
    /* becomes */
    
    .foo {
      width: 24px;
    }

    LICENSE

    See LICENSE

    Install

    npm i postcss-clamp

    DownloadsWeekly Downloads

    2,065,598

    Version

    4.1.0

    License

    MIT

    Unpacked Size

    17.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • polemius