<commit_before># Postcss-position-alt

<img align="right" width="135" height="95"
  title="Philosopher’s stone, logo of PostCSS"
  src="http://postcss.github.io/postcss/logo-leftp.png">

[![NPM version][npm-image]][npm-url] [![Build Status][ci-img]][ci] [![Dependency Status][daviddm-image]][daviddm-url]

[![npm](https://nodei.co/npm/postcss-position-alt.svg?)](https://nodei.co/npm/postcss-position-alt/)

[PostCSS] plugin that adds shorthand to position declarations.

[PostCSS]: https://github.com/postcss/postcss
[ci-img]:  https://travis-ci.org/sylvainbaronnet/postcss-position-alt.svg
[ci]:      https://travis-ci.org/sylvainbaronnet/postcss-position-alt
[npm-url]: https://www.npmjs.com/package/postcss-position-alt
[npm-image]: https://badge.fury.io/js/postcss-position.svg
[daviddm-image]: https://david-dm.org/sylvainbaronnet/postcss-position-alt.svg
[daviddm-url]: https://david-dm.org/sylvainbaronnet/postcss-position-alt



```css

/* Input example */
.alpha {
  absolute: top left;
}
.beta {
  absolute: bottom 10px right z-index 1;
}
.gamma {
  fixed: top left 10px;
}
.delta {
  fixed: bottom auto left 10%;
}
.epsilon {
  fixed: top left bottom right z-index 9999;
}
.zeta {
  relative: top var(--some-var) left initial bottom revert;
}
```

```css
/* Output example */
.alpha {
  position: absolute;
  top: 0;
  left: 0;
}
.beta {
  position: absolute;
  bottom: 10px;
  right: 0;
  z-index: 1;
}
.gamma {
  position: fixed;
  top: 0;
  left: 10px;
}
.delta {
  position: fixed;
  bottom: auto;
  left: 10%;
}
.epsilon {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
.zeta {
  position: relative;
  top: var(--some-var);
  left: initial;
  bottom: revert;
}
```

It's also possible to use directly position without position type : 

```css

/* Input example */
.toto {
  top: 10px left z-index 100;
}
.titi {
  right: left 10px z-index bottom 1px;
}
```

```css
/* Output example */
.toto {
  top: 10px;
  left: 0;
  z-index: 100;
}
.titi {
  right: 0;
  left: 10px;
  bottom: 1px;
  z-index: 0;<commit_msg>add calc() example in readme<commit_after># Postcss-position-alt

<img align="right" width="135" height="95"
  title="Philosopher’s stone, logo of PostCSS"
  src="http://postcss.github.io/postcss/logo-leftp.png">

[![NPM version][npm-image]][npm-url] [![Build Status][ci-img]][ci] [![Dependency Status][daviddm-image]][daviddm-url]

[![npm](https://nodei.co/npm/postcss-position-alt.svg?)](https://nodei.co/npm/postcss-position-alt/)

[PostCSS] plugin that adds shorthand to position declarations.

[PostCSS]: https://github.com/postcss/postcss
[ci-img]:  https://travis-ci.org/sylvainbaronnet/postcss-position-alt.svg
[ci]:      https://travis-ci.org/sylvainbaronnet/postcss-position-alt
[npm-url]: https://www.npmjs.com/package/postcss-position-alt
[npm-image]: https://badge.fury.io/js/postcss-position.svg
[daviddm-image]: https://david-dm.org/sylvainbaronnet/postcss-position-alt.svg
[daviddm-url]: https://david-dm.org/sylvainbaronnet/postcss-position-alt



```css

/* Input example */
.alpha {
  absolute: top left;
}
.beta {
  absolute: bottom 10px right z-index 1;
}
.gamma {
  fixed: top left 10px;
}
.delta {
  fixed: bottom auto left 10%;
}
.epsilon {
  fixed: top left bottom right z-index 9999;
}
.zeta {
  relative: top var(--some-var) left initial bottom revert right calc(100% + 10px);
}
```

```css
/* Output example */
.alpha {
  position: absolute;
  top: 0;
  left: 0;
}
.beta {
  position: absolute;
  bottom: 10px;
  right: 0;
  z-index: 1;
}
.gamma {
  position: fixed;
  top: 0;
  left: 10px;
}
.delta {
  position: fixed;
  bottom: auto;
  left: 10%;
}
.epsilon {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
.zeta {
  position: relative;
  top: var(--some-var);
  left: initial;
  bottom: revert;
  right: calc(100% + 10px)
}
```

It's also possible to use directly position without position type : 

```css

/* Input example */
.toto {
  top: 10px left z-index 100;
}
.titi {
  right: left 10px z-index bottom 1px;
}
```

```css
/* Output example */
.toto {
  top: 10px;
  left: 0;
  z-index: 100;
}
.titi {
  right: 0;
  left: 10px;
  bottom: 1px;
  z-index: 0;
{'fraction_non_alphanumeric': 0.1776347162613257, 'fraction_numerical': 0.028135431568907965, 'mean_word_length': 3.535135135135135, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 18, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4163925', 'n_tokens_mistral': 1805, 'n_tokens_neox': 1649, 'n_words': 373}