Skip to content
This repository has been archived by the owner on Jun 6, 2022. It is now read-only.

Commit

Permalink
Because the default wrap, modify the document and test file.
Browse files Browse the repository at this point in the history
  • Loading branch information
Ҽ˿ committed Dec 6, 2014
1 parent dc46fbb commit cc35989
Show file tree
Hide file tree
Showing 6 changed files with 65 additions and 15 deletions.
29 changes: 24 additions & 5 deletions README-zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,12 @@ article --heading + p {
你将得到:

```css
article h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p, article h6 + p {
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
```
Expand Down Expand Up @@ -89,7 +94,8 @@ a:--any-link {
output:

```css
a:link, a:visited {
a:link,
a:visited {
color: blue;
}
```
Expand All @@ -109,6 +115,17 @@ a:link, a:visited {
```
将会输出错误的 CSS 代码。

```css
.demo h1,
.demo h2,
.demo h3,
.demo h4,
.demo h5,
.demo h6,undefined {
font-size: 32px;
}
```

### Node Watch

依赖 [chokidar](https://github.com/paulmillr/chokidar) 模块。
Expand All @@ -135,7 +152,6 @@ chokidar.watch(src, {
fs.writeFileSync('output.css', output)
})
```
index.css 文件中的改动保存后将转换到 output.css

### Grunt

Expand Down Expand Up @@ -233,8 +249,11 @@ var output = postcss(selector(options))
input.css

```css
@custom-selector :--any .foo, .bar; /* 不会生效 */
:--any h1 {
/* 不会生效 */
section h1,
article h1,
aside h1,
nav h1 {
margin-top: 16px;
}
```
Expand Down
31 changes: 26 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,12 @@ article --heading + p {
You will get:

```css
article h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p, article h6 + p {
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
```
Expand All @@ -63,7 +68,7 @@ article h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p,
@custom-selector = @custom-selector <extension-name> <selector>;


## How to use it
## How to use

### Pseudo-element/Pseudo-class

Expand All @@ -89,7 +94,8 @@ a:--any-link {
output:

```css
a:link, a:visited {
a:link,
a:visited {
color: blue;
}
```
Expand All @@ -109,6 +115,17 @@ Example 3:
```
This will throw an error CSS code.

```css
.demo h1,
.demo h2,
.demo h3,
.demo h4,
.demo h5,
.demo h6,undefined {
font-size: 32px;
}
```

### Node Watch

Dependence [chokidar](https://github.com/paulmillr/chokidar) module.
Expand Down Expand Up @@ -191,7 +208,7 @@ gulp.watch('src/*.css', ['default']);

#### 1. **`lineBreak`**(default: `true`)

Setting multiple selector whether wrap.
Set whether multiple selector wrap.The default is turning on to be a newline.

Close the line breaks.

Expand Down Expand Up @@ -241,7 +258,11 @@ input.css
output:

```css
section h1, article h1, aside h1, nav h1 {
/* No effect */
section h1,
article h1,
aside h1,
nav h1 {
margin-top: 16px;
}
```
Expand Down
8 changes: 6 additions & 2 deletions test/fixtures/extension.expected.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
section h1, article h1, aside h1, nav h1 {
section h1,
article h1,
aside h1,
nav h1 {
margin-top: 16px;
}

main input[type="text"] > section + p, main #nav .bar + p {
main input[type="text"] > section + p,
main #nav .bar + p {
margin-top: 16px;
}
2 changes: 1 addition & 1 deletion test/fixtures/heading.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@custom-selector --heading h1, h2, h3, h4, h5, h6;

article --heading + p{
article --heading + p {
margin-top: 0;
}
7 changes: 6 additions & 1 deletion test/fixtures/heading.expected.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
article h1 + p, article h2 + p, article h3 + p, article h4 + p, article h5 + p, article h6 + p{
article h1 + p,
article h2 + p,
article h3 + p,
article h4 + p,
article h5 + p,
article h6 + p {
margin-top: 0;
}
3 changes: 2 additions & 1 deletion test/fixtures/pseudo.expected.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.foo > a::before img, .foo > a::after img {
.foo > a::before img,
.foo > a::after img {
display: block;
}

6 comments on commit cc35989

@MoOx
Copy link
Contributor

@MoOx MoOx commented on cc35989 Dec 16, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can see here that these kind of changes can affect existing code. That's why you should release this kind of features as major release (in this case you should had released 2.0.0 because of this breaking change). This is how semver works http://semver.org/
Don't be afraid to do major bump (some browsers are not for example ^^), that will prevent issue like this https://travis-ci.org/cssnext/cssnext/builds/44115199 (build is broken because I have used "^1.0.0" when I install this module, so it's getting 1.1.0).
Also interesting to read https://github.com/jonathanong/ferver

@MoOx
Copy link
Contributor

@MoOx MoOx commented on cc35989 Dec 16, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not a big deal for this time (cause just a few people are using it right now) but that advice is for the future :)

@yisibl
Copy link
Contributor

@yisibl yisibl commented on cc35989 Dec 17, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, the next, I will pay attention to this problem.
I'm very sorry, I don't have much experience.

@MoOx
Copy link
Contributor

@MoOx MoOx commented on cc35989 Dec 17, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's fine. That's why I take time to explain this to you. I hope you have learned something ;)

@MoOx
Copy link
Contributor

@MoOx MoOx commented on cc35989 Dec 17, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are all noobs.

@yisibl
Copy link
Contributor

@yisibl yisibl commented on cc35989 Dec 17, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have a sub company called the "noobs network" 😭

Please sign in to comment.