Wondering what’s next for npm?Check out our public roadmap! »

    @postcss-plugins/button-builder
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.1 • Public • Published

    @postcss-plugins/button-builder

    npm

    A PostCSS plugin to generate button styles from given colors. At the moment, we generate four kind of appearances: solid, outline, stroke and flat.

    If you want to see the styles generated take a look here.

    button-builder

    Installation

    yarn add @postcss-plugins/button-builder
    

    Usage

    You should define the colors because the plugin needs them to generate the utility classes of each appearance.

    const buttonBuilder = require('@postcss-plugins/button-builder');
    
    postcss([
      buttonBuilder({
        colors: {
          'red-50': '#ec1b49',
          'green-50': '#14d0a6',
          'blue-50': '#0056ff',
        },
      }),
    ]);

    The plugin will generate the following utilities:

    • .btn
    • .btn-block
    • .btn-disabled

    For radius:

    • .btn-radius-sm
    • .btn-radius-md
    • .btn-radius-lg
    • .btn-radius-rounded

    For sizes:

    • .btn-sm
    • .btn-md
    • .btn-lg

    For appearances:

    • .btn-solid-red-50
    • .btn-outline-red-50
    • .btn-stroke-red-50
    • .btn-flat-red-50

    You need to use always .btn + .btn-{solid|outline|stroke|flat}-{color}, for example:

    <button class="btn btn-solid-red-50">solid red 50</button>
    <button class="btn btn-outline-green-50">outline green 50</button>
    <button class="btn btn-stroke-blue-50">stroke blue 50</button>

    Utility classes are generated following the same Tailwind's naming convention.

    Options

    The plugin accepts these configuration options:

    export interface ButtonBuilderProps {
      prefix?: string;
      colors: { [key in string]: string };
      base?: { [key in string]: string };
      radius?: { [key in string]: string };
      sizes?: { [key in string]: { [key in string]: string } };
    }

    Examples:

    prefix

    Allows you to add a custom prefix only to generated utility classes. For example:

    base

    You can override the default base style.

    /* DEFAULT BASE STYLE */
    
    .btn {
      border: 1px solid transparent !important;
      border-radius: 0.25rem !important;
      color: #fff !important;
      cursor: pointer !important;
      display: inline-block !important;
      text-align: center !important;
      text-decoration: none !important;
      transition: all 0.3s ease !important;
      user-select: none !important;
      padding: 0.375rem 0.75rem !important;
      font-size: 0.875rem !important;
      line-height: 1.5rem !important;
    }

    For example:

    postcss([
      buttonBuilder({
        prefix: 'ez',
        base: {
          textTransform: 'uppercase',
          color: '#000',
        },
      }),
    ]);

    Output:

    .ez-btn {
      text-transform: uppercase !important;
      color: #000 !important;
    }

    radius

    You can override the default radius:

    /* DEFAULT RADIUS STYLE */
    
    .btn-radius-sm {
      border-radius: 0.125rem !important;
    }
    .btn-radius-md {
      border-radius: 0.25rem !important;
    }
    .btn-radius-lg {
      border-radius: 0.375rem !important;
    }
    .btn-radius-rounded {
      border-radius: 9999px !important;
    }

    For example:

    postcss([
      buttonBuilder({
        prefix: 'ez',
        radius: {
          small: '0.2rem',
          large: '1rem',
        },
      }),
    ]);

    Output:

    .ez-btn-radius-small {
      border-radius: 0.2rem !important;
    }
    .ez-btn-radius-large {
      border-radius: 1rem !important;
    }

    Sizes

    You can override the default sizes:

    /* DEFAULT SIZES STYLE */
    
    .btn-sm {
      padding: 0.25rem 0.5rem !important;
      font-size: 0.75rem !important;
      line-height: 1.25rem !important;
    }
    .btn-md {
      padding: 0.375rem 0.75rem !important;
      font-size: 0.875rem !important;
      line-height: 1.5rem !important;
    }
    .btn-lg {
      padding: 0.5rem 1rem !important;
      font-size: 1rem !important;
      line-height: 1.75rem !important;
    }

    For example:

    postcss([
      buttonBuilder({
        prefix: 'ez',
        sizes: {
          small: {
            padding: '0.2rem',
            fontSize: '0.7rem',
          },
          large: {
            padding: '1rem',
            fontSize: '1rem',
          },
        },
      }),
    ]);

    Output:

    .ez-btn-small {
      padding: 0.2rem !important;
      font-size: 0.7rem !important;
    }
    .ez-btn-large {
      padding: 1rem !important;
      font-size: 1rem !important;
    }

    Contributing

    • ⇄ Pull requests and ★ Stars are always welcome.
    • For bugs and feature requests, please create an issue.

    MIT License

    Install

    npm i @postcss-plugins/button-builder

    DownloadsWeekly Downloads

    21

    Version

    0.1.1

    License

    MIT

    Unpacked Size

    732 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar