8000 4.0.1 · csstools/postcss-short-position@ed6ba89 · GitHub
Skip to content
This repository was archived by the owner on Oct 18, 2024. It is now read-only.

Commit ed6ba89

Browse files
jonathantnealjonathantneal
committed
4.0.1
1 parent 409c1b5 commit ed6ba89

3 files changed

Lines changed: 88 additions & 11 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,30 @@
11
# Changes to PostCSS Short Position
22

3-
### 1.0.0 (October 9, 2018)
3+
### 4.0.1 (October 10, 2018)
44

5-
- Initial version
5+
- Updated documentation
6+
7+
### 4.0.0 (October 9, 2018)
8+
9+
- Added: Support for PostCSS 7, Node 6
10+
11+
### 3.0.0 (May 25, 2017)
12+
13+
- Added: Support for PostCSS 6, Node 4
14+
- Removed: echint and jscs devDependencies
15+
- Updated: 2 spaces in Markdown
16+
- Updated: dependencies
17+
18+
### 2.0.1 (December 8, 2016)
19+
20+
- Updated: Use destructing assignment on plugin options
21+
- Updated: Use template literals
22+
23+
### 2.0.0 (September 27, 2016)
24+
25+
- Added: Define `skip` token
26+
- Updated: boilerplate conventions (Node v6.9.1 LTS)
27+
28+
### 1.0.0 (September 19, 2015)
29+
30+
- Added: Initial release

‎README.md‎

Lines changed: 60 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,26 @@
55
[![Support Chat][git-img]][git-url]
66

77
[PostCSS Short Position] lets define sides within the `position` property in
8-
CSS, following the [1-to-4 syntax] to target `top`, `right`, `bottom`, and
9-
`left`.
8+
CSS.
109

1110
```pcss
1211
.header {
13-
position: fixed 0 1em;
12+
position: fixed 0 1em *;
1413
}
1514
1615
/* becomes */
1716
1817
.header {
19-
top: 0;
20-
right: 1em;
21-
bottom: 0;
22-
left: 1em;
23-
position: fixed;
18+
top: 0;
19+
right: 1em;
20+
left: 1em;
21+
position: fixed;
2422
}
2523
```
2624

25+
The `position` declaration can be extended with the [1-to-4 syntax] to target
26+
`top`, `right`, `bottom`, and `left`. Sides can be omitted using the skip token.
27+
2728
## Usage
2829

2930
Add [PostCSS Short Position] to your project:
@@ -63,6 +64,57 @@ postcss([
6364
[npm-img]: https://img.shields.io/npm/v/postcss-short-position.svg
6465
[npm-url]: https://www.npmjs.com/package/postcss-short-position
6566

67+
## Options
68+
69+
#### prefix
70+
71+
The `prefix` option defines a prefix required by properties being transformed.
72+
Wrapping dashes are automatically applied, so that `x` would transform
73+
`-x-position`.
74+
75+
```js
76+
postcssShortPosition({ prefix: 'x' });
77+
```
78+
79+
```pcss
80+
.header {
81+
x-position: fixed 0 1em *;
82+
}
83+
84+
/* becomes */
85+
86+
.header {
87+
top: 0;
88+
right: 1em;
89+
left: 1em;
90+
position: fixed;
91+
}
92+
```
93+
94+
#### skip
95+
96+
The `skip` option defines the skip token used to ignore portions of the
97+
shorthand.
98+
99+
```js
100+
postcssShortPosition({ skip: '-' });
101+
```
102+
103+
```pcss
104+
.header {
105+
position: fixed 0 1em -;
106+
}
107+
108+
/* becomes */
109+
110+
.header {
111+
top: 0;
112+
right: 1em;
113+
left: 1em;
114+
position: fixed;
115+
}
116+
```
117+
66118
[1-to-4 syntax]: https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases
67119
[PostCSS]: https://github.com/postcss/postcss
68120
[PostCSS Short Position]: https://github.com/jonathantneal/postcss-short-position

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "postcss-short-position",
3-
"version": "4.0.0",
3+
"version": "4.0.1",
44
"description": "Define sides within the position property in CSS",
55
"author": "Jonathan Neal <jonathantneal@hotmail.com>",
66
"license": "CC0-1.0",

0 commit comments

Comments
 (0)