|
1 |
| -# PostCSS Custom Selector [](https://travis-ci.org/postcss/postcss-custom-selector) |
| 1 | +# PostCSS Custom Selectors [](https://travis-ci.org/postcss/postcss-custom-selector) |
2 | 2 |
|
3 | 3 | > [PostCSS](https://github.com/postcss/postcss) 实现 [W3C CSS Extensions(Custom Selectors)](http://dev.w3.org/csswg/css-extensions/#custom-selectors) 的插件。
|
4 | 4 |
|
5 | 5 |
|
6 | 6 |
|
7 |
| -## 安装(暂未发布) |
| 7 | +## 安装 |
8 | 8 |
|
9 |
| - $ npm install postcss-custom-selector |
| 9 | + $ npm install postcss-custom-selectors |
10 | 10 |
|
11 | 11 | ## 快速开始
|
12 | 12 |
|
13 | 13 | ```js
|
14 | 14 | // dependencies
|
15 | 15 | var fs = require('fs')
|
16 | 16 | var postcss = require('postcss')
|
17 |
| -var selector = require('postcss-custom-selector') |
| 17 | +var selector = require('postcss-custom-selectors') |
18 | 18 |
|
19 | 19 | // css to be processed
|
20 | 20 | var css = fs.readFileSync('input.css', 'utf8')
|
21 | 21 |
|
22 |
| -// process css using postcss-custom-selector |
| 22 | +// process css using postcss-custom-selectors |
23 | 23 | var output = postcss()
|
24 | 24 | .use(selector())
|
25 | 25 | .process(css)
|
@@ -118,31 +118,50 @@ a:link, a:visited {
|
118 | 118 | ### Grunt
|
119 | 119 |
|
120 | 120 | ```js
|
121 |
| -grunt.initConfig({ |
122 |
| - postcss: { |
123 |
| - options: { |
124 |
| - processors: [require('postcss-custom-selector').postcss] |
125 |
| - }, |
126 |
| - dist: { |
127 |
| - src: 'css/*.css' |
| 121 | +module.exports = function(grunt) { |
| 122 | + grunt.initConfig({ |
| 123 | + pkg: grunt.file.readJSON('package.json'), |
| 124 | + postcss: { |
| 125 | + options: { |
| 126 | + processors: [ |
| 127 | + require('autoprefixer-core')({ browsers: ['> 0%'] }).postcss, //Other plugin |
| 128 | + require('postcss-custom-selector')(), |
| 129 | + ] |
| 130 | + }, |
| 131 | + dist: { |
| 132 | + src: ['src/*.css'], |
| 133 | + dest: 'build/grunt.css' |
| 134 | + } |
128 | 135 | }
|
129 |
| - } |
130 |
| -}); |
| 136 | + }); |
| 137 | + |
| 138 | + grunt.loadNpmTasks('grunt-contrib-uglify'); |
| 139 | + grunt.loadNpmTasks('grunt-postcss'); |
131 | 140 |
|
132 |
| -grunt.loadNpmTasks('grunt-postcss'); |
| 141 | + grunt.registerTask('default', ['postcss']); |
| 142 | +} |
133 | 143 | ```
|
134 | 144 |
|
135 | 145 | ### Gulp
|
136 | 146 |
|
137 | 147 | ```js
|
138 | 148 | var gulp = require('gulp');
|
| 149 | +var rename = require('gulp-rename'); |
139 | 150 | var postcss = require('gulp-postcss');
|
140 |
| - |
141 |
| -gulp.task('css', function() { |
142 |
| - return gulp.src('./src/*.css') |
143 |
| - .pipe(postcss([require('postcss-custom-selector')])) |
144 |
| - .pipe(gulp.dest('./dest')); |
| 151 | +var selector = require('postcss-custom-selector') |
| 152 | +var autoprefixer = require('autoprefixer-core') |
| 153 | + |
| 154 | +gulp.task('default', function () { |
| 155 | + var processors = [ |
| 156 | + autoprefixer({ browsers: ['> 0%'] }), //Other plugin |
| 157 | + selector() |
| 158 | + ]; |
| 159 | + gulp.src('src/*.css') |
| 160 | + .pipe(postcss(processors)) |
| 161 | + .pipe(rename('gulp.css')) |
| 162 | + .pipe(gulp.dest('build')) |
145 | 163 | });
|
| 164 | +gulp.watch('src/*.css', ['default']); |
146 | 165 | ```
|
147 | 166 |
|
148 | 167 |
|
@@ -186,11 +205,11 @@ section h1, article h1, aside h1, nav h1 {
|
186 | 205 | ## 贡献
|
187 | 206 |
|
188 | 207 | * 安装相关依赖模块
|
189 |
| -* 尊重编码风格(安装) |
| 208 | +* 尊重编码风格(安装 [EditorConfig](http://editorconfig.org/)) |
190 | 209 | * 运行测试
|
191 | 210 |
|
192 | 211 | ```
|
193 |
| -$ git clone https://github.com/postcss/postcss-custom-selector.git |
| 212 | +$ git clone https://github.com/postcss/postcss-custom-selectors.git |
194 | 213 | $ git checkout -b patch
|
195 | 214 | $ npm install
|
196 | 215 | $ npm test
|
|
0 commit comments