1 | # rollup-plugin-css-porter
|
2 |
|
3 | A rollup plugin to collect and combine all the imported css file. Such as `import './my.css'`.
|
4 | Then output them to a standalone css file. Besides, use [clean-css](https://www.npmjs.com/package/clean-css)
|
5 | to create a minified css file as you wish.
|
6 |
|
7 | ## Installation
|
8 |
|
9 | Use `npm`:
|
10 |
|
11 | ```bash
|
12 | npm install --save-dev rollup-plugin-css-porter
|
13 | // or
|
14 | npm i --D rollup-plugin-css-porter
|
15 | ```
|
16 |
|
17 | Use `yarn`:
|
18 |
|
19 | ```bash
|
20 | yarn add rollup-plugin-css-porter --dev
|
21 | ```
|
22 |
|
23 | ## Usage
|
24 |
|
25 | ### Case 1 (default behavior):
|
26 | Output to a standalone css file and a minified css file.
|
27 | The output destination is the same dir with `bundle.write()` options.dest
|
28 |
|
29 | ```js
|
30 | import { rollup } from 'rollup';
|
31 | import css from 'rollup-plugin-css-porter';
|
32 |
|
33 | rollup({
|
34 | entry: 'main.js',
|
35 | plugins: [ css() ]
|
36 | }).then(bundle => {
|
37 | bundle.write({
|
38 | format: 'es',
|
39 | dest: 'bundle.js'
|
40 | });
|
41 | });
|
42 | ```
|
43 |
|
44 | ### Case 2:
|
45 | Output to a standalone css file without minified css file.
|
46 | The output destination is the same dir with `bundle.write()` options.dest
|
47 |
|
48 | ```js
|
49 | import { rollup } from 'rollup';
|
50 | import css from 'rollup-plugin-css-porter';
|
51 |
|
52 | rollup({
|
53 | entry: 'main.js',
|
54 | plugins: [ css({minified: false}) ]
|
55 | }).then(bundle => {
|
56 | bundle.write({
|
57 | format: 'es',
|
58 | dest: 'bundle.js'
|
59 | });
|
60 | });
|
61 | ```
|
62 |
|
63 | ### Case 3:
|
64 | Output to a specific path if config the plugin options.dest
|
65 |
|
66 | ```js
|
67 | import { rollup } from 'rollup';
|
68 | import css from 'rollup-plugin-css-porter';
|
69 |
|
70 | rollup({
|
71 | entry: 'main.js',
|
72 | plugins: [ css({dest: 'path-to-my-dir/bundle.css'}) ]
|
73 | }).then(bundle => {
|
74 | bundle.write({
|
75 | format: 'es',
|
76 | dest: 'bundle.js'
|
77 | });
|
78 | });
|
79 | ```
|
80 |
|
81 | ### Case 4:
|
82 | Output to a standalone css file with only minified css file.
|
83 | The output destination is the same dir with `bundle.write()` options.dest
|
84 |
|
85 | ```js
|
86 | import { rollup } from 'rollup';
|
87 | import css from 'rollup-plugin-css-porter';
|
88 |
|
89 | rollup({
|
90 | entry: 'main.js',
|
91 | plugins: [ css({raw: false}) ]
|
92 | }).then(bundle => {
|
93 | bundle.write({
|
94 | format: 'es',
|
95 | dest: 'bundle.js'
|
96 | });
|
97 | });
|
98 | ```
|
99 |
|
100 | ### Case 5:
|
101 | Custom names:
|
102 |
|
103 | ```js
|
104 | import { rollup } from 'rollup';
|
105 | import css from 'rollup-plugin-css-porter';
|
106 |
|
107 | rollup({
|
108 | entry: 'main.js',
|
109 | plugins: [ css({
|
110 | raw: 'custom.css',
|
111 | minified: 'custom.min.css',
|
112 | }) ]
|
113 | }).then(bundle => {
|
114 | bundle.write({
|
115 | format: 'es',
|
116 | dest: 'bundle.js'
|
117 | });
|
118 | });
|
119 | ```
|
120 |
|
121 | Or:
|
122 |
|
123 | ```js
|
124 | css({
|
125 | raw: 'custom.css',
|
126 | minified: false,
|
127 | })
|
128 | ```
|
129 |
|
130 | Or:
|
131 |
|
132 | ```js
|
133 | css({
|
134 | raw: false,
|
135 | minified: 'custom.min.css',
|
136 | })
|
137 | ```
|
138 |
|
139 | ## Build
|
140 |
|
141 | Use `npm`:
|
142 |
|
143 | ```bash
|
144 | npm run build
|
145 | ```
|
146 |
|
147 | Use `yarn`:
|
148 |
|
149 | ```bash
|
150 | yarn run build
|
151 | ```
|
152 |
|
153 | ## Run test
|
154 |
|
155 | Use `npm`:
|
156 |
|
157 | ```bash
|
158 | npm test
|
159 | ```
|
160 |
|
161 | Use `yarn`:
|
162 |
|
163 | ```bash
|
164 | yarn test
|
165 | ```
|