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

    postcss-place

    5.0.0 • Public • Published

    PostCSS Place Properties PostCSS Logo

    NPM Version CSS Standard Status Build Status Support Chat

    PostCSS Place Properties lets you use place-* properties as shorthands for align-* and justify-*, following the CSS Box Alignment specification.

    .example {
      place-self: center;
      place-content: space-between center;
    }
     
    /* becomes */
     
    .example {
      align-self: center;
      justify-self: center;
      place-self: center;
      align-content: space-between;
      justify-content: center;
      place-content: space-between center;
    }

    Usage

    Add PostCSS Place Properties to your project:

    npm install postcss-place --save-dev

    Use PostCSS Place Properties to process your CSS:

    import postcssPlace from 'postcss-place';
     
    postcssPlace.process(YOUR_CSS /*, processOptions, pluginOptions */);

    Or use it as a PostCSS plugin:

    import postcss from 'postcss';
    import postcssPlace from 'postcss-place';
     
    postcss([
      postcssPlace(/* pluginOptions */)
    ]).process(YOUR_CSS /*, processOptions */);

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

    Node Webpack Create React App Gulp Grunt

    Options

    preserve

    The preserve option determines whether the original place declaration is preserved. By default, it is preserved.

    postcssPlace({ preserve: false })
    .example {
      place-self: center;
      place-content: space-between center;
    }
     
    /* becomes */
     
    .example {
      align-self: center;
      justify-self: center;
      align-content: space-between;
      justify-content: center;
    }

    Install

    npm i postcss-place

    DownloadsWeekly Downloads

    4,131,968

    Version

    5.0.0

    License

    CC0-1.0

    Unpacked Size

    14.8 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar