|
1 | 1 | # laravel-elixir-postcss |
2 | | -(Support for Elixir V6) Laravel Elixir PostCSS Extension. |
| 2 | +[](https://travis-ci.org/tureki/laravel-elixir-postcss) |
| 3 | +[](https://www.npmjs.com/package/laravel-elixir-postcss) |
| 4 | +[](https://www.npmjs.com/package/laravel-elixir-postcss) |
3 | 5 |
|
| 6 | +This Laravel Elixir extension allows you easy to compile PostCSS. |
4 | 7 |
|
5 | | -## Install |
| 8 | +If this package helpful and save your time. Do not forget star it :) |
6 | 9 |
|
7 | | -```sh |
| 10 | + |
| 11 | +## Installation |
| 12 | + |
| 13 | +```bash |
8 | 14 | $ npm install laravel-elixir-postcss --save-dev |
9 | 15 | ``` |
10 | 16 |
|
11 | 17 |
|
12 | 18 | ## Usage |
13 | 19 |
|
14 | 20 | ```javascript |
15 | | - |
16 | | -elixir.postcss(src:'app.css', options); |
17 | | - |
| 21 | +elixir(function(mix) { |
| 22 | + //app.css, *.css, **/*.css |
| 23 | + elixir.postcss('app.css'); |
| 24 | +}); |
18 | 25 | ``` |
19 | 26 |
|
20 | | -Example: |
| 27 | +#### Using PostCSS Plugins |
21 | 28 |
|
22 | 29 | ```javascript |
23 | | - |
24 | | -var elixir = require('laravel-elixir'); |
25 | | - |
26 | | -require('laravel-elixir-postcss'); |
27 | | - |
28 | 30 | elixir(function(mix) { |
29 | | - |
30 | | - //app.css, *.css, **/*.css |
31 | 31 | mix.postcss('app.css', { |
32 | | - plugins:[ //postcss's plugins |
| 32 | + plugins:[ |
33 | 33 | require('postcss-nested') |
34 | | - ] |
| 34 | + ] |
35 | 35 | }); |
36 | | - |
37 | 36 | }); |
38 | | - |
39 | 37 | ``` |
40 | 38 |
|
41 | | -Or run `PostCSS` with `csstyle`: |
| 39 | +#### Using Other Parser |
42 | 40 |
|
43 | | -```javascript |
44 | | - |
45 | | -... |
| 41 | +You can set the [options](https://github.com/postcss/postcss#options) using other parsers like `scss`, `sugarss` etc. |
46 | 42 |
|
| 43 | +```javascript |
47 | 44 | elixir(function(mix) { |
48 | | - |
49 | 45 | mix.postcss('app.css', { |
50 | | - plugins:[ |
51 | | - require('postcss-nested'), |
52 | | - require('csstyle') |
53 | | - ] |
| 46 | + options: { |
| 47 | + parser: require('postcss-scss') |
| 48 | + }, |
54 | 49 | }); |
55 | | - |
56 | 50 | }); |
| 51 | +``` |
57 | 52 |
|
| 53 | +Use `parser` and `plugins`. |
| 54 | +```javascript |
| 55 | +elixir(function(mix) { |
| 56 | + mix.postcss('app.css', { |
| 57 | + options: { |
| 58 | + parser: require('sugarss') |
| 59 | + }, |
| 60 | + plugins: [ |
| 61 | + require('postcss-nested') |
| 62 | + ], |
| 63 | + }); |
| 64 | +}); |
58 | 65 | ``` |
59 | 66 |
|
60 | | -Then run: |
61 | 67 |
|
62 | | -```sh |
63 | | -$ gulp |
64 | | -``` |
| 68 | +## Options |
| 69 | + |
| 70 | +This extension accept two parameters: |
65 | 71 |
|
66 | | -Or run `gulp watch` |
| 72 | +* An string of files. |
| 73 | +* An object of options. |
67 | 74 |
|
| 75 | +Common options: |
68 | 76 |
|
69 | | -## Default Options |
| 77 | +* `options`: See [postcss common options](https://github.com/postcss/postcss#options). |
| 78 | +* `output`: destination's path |
| 79 | +* `plugins`: postcss's plugins. |
| 80 | +* `srcPath`: source's directory. |
| 81 | +* `sourcemaps`: enable source map. |
| 82 | +* `watchs`: additional watch directories. |
70 | 83 |
|
| 84 | +#### Default Value |
71 | 85 | ```javascript |
72 | 86 | { |
| 87 | + options: {}, |
73 | 88 | output : 'public/css', |
74 | 89 | plugins : [], |
75 | | - srcDir : 'resources/assets/postcss/', |
76 | | - sourcemaps: true, // default value follow `elixir.config.sourcemaps` |
77 | | - watch: [], // set additional watch directories here. |
| 90 | + srcPath : 'resources/assets/postcss/', |
| 91 | + sourcemaps: true, //default value follow `elixir.config.sourcemaps` |
| 92 | + watchs: [], |
78 | 93 | } |
79 | 94 | ``` |
80 | 95 |
|
81 | 96 |
|
82 | 97 | ## Contributing |
83 | | -Welcome [PR](https://github.com/tureki/laravel-elixir-postcss/pulls) |
84 | | - |
85 | | - |
86 | | -## Todo |
87 | | - |
88 | | -1. Add Unit Test |
89 | | -2. Integrate CI |
| 98 | +Welcome [PR](https://github.com/tureki/laravel-elixir-postcss/pulls) and play it :smile: |
0 commit comments