Gazebo_simulation-Frontend/node_modules/postcss-place
Riddhi Dave f4870cd530 simulator page updates 2020-12-22 09:59:14 -05:00
..
node_modules simulator page updates 2020-12-22 09:59:14 -05:00
CHANGELOG.md React files 2020-12-21 10:29:31 -05:00
LICENSE.md React files 2020-12-21 10:29:31 -05:00
README.md React files 2020-12-21 10:29:31 -05:00
index.cjs.js React files 2020-12-21 10:29:31 -05:00
index.cjs.js.map React files 2020-12-21 10:29:31 -05:00
index.es.mjs React files 2020-12-21 10:29:31 -05:00
index.es.mjs.map React files 2020-12-21 10:29:31 -05:00
package.json simulator page updates 2020-12-22 09:59:14 -05:00

README.md

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;
}