Skip to content

Commit 4813a5b

Browse files
author
Ҽ˿
committed
Add lineBreak option
1 parent de408ab commit 4813a5b

File tree

4 files changed

+59
-5
lines changed

4 files changed

+59
-5
lines changed

CHANGELOG.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
# 1.0.0 - 2014-12-04
1+
# 1.0.0 - 2014-12-06
22

3-
First release
3+
First release

README-zh.md

+25-1
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,31 @@ gulp.watch('src/*.css', ['default']);
190190

191191
### 选项
192192

193-
**`extensions`** (default: `{}`)
193+
#### 1. **`lineBreak`**(default: `true`)
194+
195+
设置多个选择器是否换行,默认开启换行。
196+
197+
关闭换行:
198+
199+
```js
200+
var options = {
201+
lineBreak: false
202+
}
203+
204+
var output = postcss(selector(options))
205+
.process(css)
206+
.css
207+
```
208+
209+
「示例1」中的 `input.css` 将输出为:
210+
211+
```css
212+
article h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p, article h6 + p {
213+
margin-top: 0;
214+
}
215+
```
216+
217+
#### 2. **`extensions`** (default: `{}`)
194218

195219
该选项允许你自定义一个对象来设置 `<extension-name>`(选择器别名)和 `<selector>`,这些定义将覆盖 CSS 中相同别名的 `@custom-selector`
196220

README.md

+25-1
Original file line numberDiff line numberDiff line change
@@ -189,7 +189,31 @@ gulp.watch('src/*.css', ['default']);
189189

190190
### Options
191191

192-
**`extensions`** (default: `{}`)
192+
#### 1. **`lineBreak`**(default: `true`)
193+
194+
Setting multiple selector whether wrap.
195+
196+
Close the line breaks.
197+
198+
```js
199+
var options = {
200+
lineBreak: false
201+
}
202+
203+
var output = postcss(selector(options))
204+
.process(css)
205+
.css
206+
```
207+
208+
In the 'Example 1' `input.css` will output:
209+
210+
```css
211+
article h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p, article h6 + p {
212+
margin-top: 0;
213+
}
214+
```
215+
216+
#### 2. **`extensions`** (default: `{}`)
193217

194218
This option allows you to customize an object to set the `<extension-name>` (selector alias) and `<selector>`, these definitions will cover the same alias of `@custom-selector` in CSS.
195219

index.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ function customSelector(options) {
1717
return function(styles) {
1818
options = options || {}
1919
var extensions = options.extensions || {}
20+
var line_break = '\n'
2021
var map = {}
2122
var toRemove = []
2223
var customSelectors = {}
@@ -47,6 +48,11 @@ function customSelector(options) {
4748
customSelectors[extension] = extensions[extension]
4849
})
4950

51+
//控制选择器是否换行
52+
if (!options.lineBreak && options.lineBreak == false) {
53+
line_break = ' '
54+
}
55+
5056
// 转换自定义的选择器别名
5157
styles.eachRule(function(rule) {
5258
for (var prop in customSelectors) {
@@ -58,7 +64,7 @@ function customSelector(options) {
5864
if ($2 == prop) {
5965
return customSelector.split(",").map(function(selector) {
6066
return $1 + selector.trim() + $3
61-
}).join(", ")
67+
}).join("," + line_break)
6268
}
6369
})
6470

0 commit comments

Comments
 (0)