Skip to content

Commit de04870

Browse files
author
harish-sethuraman
committed
docs(readme): add types
1 parent 7fd41e3 commit de04870

File tree

2 files changed

+7885
-38
lines changed

2 files changed

+7885
-38
lines changed

‎README.md

Lines changed: 101 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,16 @@ Compared to the extract-text-webpack-plugin:
3131

3232
To begin, you'll need to install `mini-css-extract-plugin`:
3333

34-
```bash
34+
```console
3535
npm install --save-dev mini-css-extract-plugin
3636
```
3737

38+
or
39+
40+
```console
41+
yarn add -D mini-css-extract-plugin
42+
```
43+
3844
It's recommended to combine `mini-css-extract-plugin` with the [`css-loader`](https://github.com/webpack-contrib/css-loader)
3945

4046
Then add the loader and the plugin to your `webpack` config. For example:
@@ -79,20 +85,25 @@ module.exports = {
7985

8086
### Plugin Options
8187

82-
| Name | Type | Default | Description |
83-
| :---------------------------------------------------------------: | :------------------: | :-----------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------- |
84-
| **[`filename`](#filename)** | `{String\|Function}` | `[name].css` | This option determines the name of each output CSS file |
85-
| **[`chunkFilename`](#chunkFilename)** | `{String\|Function}` | `based on filename` | This option determines the name of non-entry chunk files |
86-
| **[`ignoreOrder`](#ignoreOrder)** | `{Boolean}` | `false` | Remove Order Warnings |
87-
| **[`insert`](#insert)** | `{String\|Function}` | `document.head.appendChild(linkTag);` | Inserts the `link` tag at the given position for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) CSS chunks |
88-
| **[`attributes`](#attributes)** | `{Object}` | `{}` | Adds custom attributes to the `link` tag for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) CSS chunks |
89-
| **[`linkType`](#linkType)** | `{String\|Boolean}` | `text/css` | Allows loading asynchronous chunks with a custom link type |
90-
| **[`runtime`](#runtime)** | `{Boolean}` | `true` | Allows to enable/disable the runtime generation |
91-
| **[`experimentalUseImportModule`](#experimentalUseImportModule)** | `{Boolean}` | `undefined` | Use an experimental webpack API to execute modules instead of child compilers |
88+
- **[`filename`](#filename)**
89+
- **[`chunkFilename`](#chunkFilename)**
90+
- **[`ignoreOrder`](#ignoreOrder)**
91+
- **[`insert`](#insert)**
92+
- **[`attributes`](#attributes)**
93+
- **[`linkType`](#linkType)**
94+
- **[`runtime`](#runtime)**
95+
- **[`experimentalUseImportModule`](#experimentalUseImportModule)**
9296

9397
#### `filename`
9498

95-
Type: `String|Function`
99+
Type:
100+
101+
```ts
102+
type filename =
103+
| string
104+
| ((pathData: PathData, assetInfo?: AssetInfo) => string);
105+
```
106+
96107
Default: `[name].css`
97108

98109
This option determines the name of each output CSS file.
@@ -101,26 +112,43 @@ Works like [`output.filename`](https://webpack.js.org/configuration/output/#outp
101112

102113
#### `chunkFilename`
103114

104-
Type: `String|Function`
115+
Type:
116+
117+
```ts
118+
type chunkFilename =
119+
| string
120+
| ((pathData: PathData, assetInfo?: AssetInfo) => string);
121+
```
122+
105123
Default: `based on filename`
106124

107-
> i Specifying `chunkFilename` as a `function` is only available in webpack@5
125+
> Specifying `chunkFilename` as a `function` is only available in webpack@5
108126
109127
This option determines the name of non-entry chunk files.
110128

111129
Works like [`output.chunkFilename`](https://webpack.js.org/configuration/output/#outputchunkfilename)
112130

113131
#### `ignoreOrder`
114132

115-
Type: `Boolean`
133+
Type:
134+
135+
```ts
136+
type ignoreOrder = boolean;
137+
```
138+
116139
Default: `false`
117140

118141
Remove Order Warnings.
119142
See [examples](#remove-order-warnings) below for details.
120143

121144
#### `insert`
122145

123-
Type: `String|Function`
146+
Type:
147+
148+
```ts
149+
type insert = string | ((linkTag: any) => void);
150+
```
151+
124152
Default: `document.head.appendChild(linkTag);`
125153

126154
> ⚠️ Only for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) chunks.
@@ -133,7 +161,7 @@ In such cases `insert` can be configured to be a function or a custom selector.
133161

134162
If you target an [iframe](https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement) make sure that the parent document has sufficient access rights to reach into the frame document and append elements to it.
135163

136-
##### `String`
164+
##### `string`
137165

138166
Allows to setup custom [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector).
139167
A new `<link>` element will be inserted after the found item.
@@ -148,7 +176,7 @@ new MiniCssExtractPlugin({
148176

149177
A new `<link>` element will be inserted after the element with id `some-element`.
150178

151-
##### `Function`
179+
##### `function`
152180

153181
Allows to override default behavior and insert styles at any position.
154182

@@ -173,7 +201,12 @@ A new `<link>` element will be inserted before the element with id `some-element
173201

174202
#### `attributes`
175203

176-
Type: `Object`
204+
Type:
205+
206+
```ts
207+
type attributes = object;
208+
```
209+
177210
Default: `{}`
178211

179212
> ⚠️ Only for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) chunks.
@@ -209,12 +242,17 @@ Note: It's only applied to dynamically loaded css chunks, if you want to modify
209242

210243
#### `linkType`
211244

212-
Type: `String|Boolean`
245+
Type:
246+
247+
```ts
248+
type linkType = string | boolean;
249+
```
250+
213251
Default: `text/css`
214252

215253
This option allows loading asynchronous chunks with a custom link type, such as `<link type="text/css" ...>`.
216254

217-
##### `String`
255+
##### `string`
218256

219257
Possible values: `text/css`
220258

@@ -240,7 +278,7 @@ module.exports = {
240278
};
241279
```
242280

243-
##### `Boolean`
281+
##### `boolean`
244282

245283
`false` disables the link `type` attribute
246284

@@ -268,12 +306,17 @@ module.exports = {
268306

269307
#### `runtime`
270308

271-
Type: `Boolean`
309+
Type:
310+
311+
```ts
312+
type runtime = boolean;
313+
```
314+
272315
Default: `true`
273316

274317
Allows to enable/disable the runtime generation.
275318
CSS will be still extracted and can be used for a custom loading methods.
276-
For example, you can use [assets-webpack-plugin](https://github.com/ztoben/assets-webpack-plugin) to retreive them then use your own runtime code to download assets when needed.
319+
For example, you can use [assets-webpack-plugin](https://github.com/ztoben/assets-webpack-plugin) to retrieve them then use your own runtime code to download assets when needed.
277320

278321
`true` to skip.
279322

@@ -301,7 +344,12 @@ module.exports = {
301344

302345
#### `experimentalUseImportModule`
303346

304-
Type: `Boolean`
347+
Type:
348+
349+
```ts
350+
type experimentalUseImportModule = boolean;
351+
```
352+
305353
Default: `undefined`
306354

307355
Enabled by default if not explicitly enabled (i.e. `true` and `false` allow you to explicitly control this option) and new API is available (at least webpack `5.52.0` is required).
@@ -322,7 +370,7 @@ module.exports = {
322370
new MiniCssExtractPlugin({
323371
// You don't need this for `>= 5.52.0` due to the fact that this is enabled by default
324372
// Required only for `>= 5.33.2 & <= 5.52.0`
325-
// Not avaliable/unsafe for `<= 5.33.2`
373+
// Not available/unsafe for `<= 5.33.2`
326374
experimentalUseImportModule: true,
327375
}),
328376
],
@@ -339,21 +387,26 @@ module.exports = {
339387

340388
### Loader Options
341389

342-
| Name | Type | Default | Description |
343-
| :-----------------------------: | :------------------: | :--------------------------------: | :-------------------------------------------------------------------------------- |
344-
| **[`publicPath`](#publicPath)** | `{String\|Function}` | `webpackOptions.output.publicPath` | Specifies a custom public path for the external resources like images, files, etc |
345-
| **[`emit`](#emit)** | `{Boolean}` | `true` | If false, the plugin will extract the CSS but **will not** emit the file |
346-
| **[`esModule`](#esModule)** | `{Boolean}` | `true` | Use ES modules syntax |
390+
- **[`publicPath`](#publicPath)**
391+
- **[`emit`](#emit)**
392+
- **[`esModule`](#esModule)**
347393

348394
#### `publicPath`
349395

350-
Type: `String|Function`
396+
Type:
397+
398+
```ts
399+
type publicPath =
400+
| string
401+
| ((resourcePath: string, rootContext: string) => string);
402+
```
403+
351404
Default: the `publicPath` in `webpackOptions.output`
352405

353406
Specifies a custom public path for the external resources like images, files, etc inside `CSS`.
354407
Works like [`output.publicPath`](https://webpack.js.org/configuration/output/#outputpublicpath)
355408

356-
##### `String`
409+
##### `string`
357410

358411
**webpack.config.js**
359412

@@ -388,7 +441,7 @@ module.exports = {
388441
};
389442
```
390443

391-
##### `Function`
444+
##### `function`
392445

393446
**webpack.config.js**
394447

@@ -427,15 +480,25 @@ module.exports = {
427480

428481
#### `emit`
429482

430-
Type: `Boolean`
483+
Type:
484+
485+
```ts
486+
type emit = boolean;
487+
```
488+
431489
Default: `true`
432490

433491
If true, emits a file (writes a file to the filesystem). If false, the plugin will extract the CSS but **will not** emit the file.
434492
It is often useful to disable this option for server-side packages.
435493

436494
#### `esModule`
437495

438-
Type: `Boolean`
496+
Type:
497+
498+
```ts
499+
type esModule = boolean;
500+
```
501+
439502
Default: `true`
440503

441504
By default, `mini-css-extract-plugin` generates JS modules that use the ES modules syntax.
@@ -471,13 +534,13 @@ module.exports = {
471534

472535
## Examples
473536

474-
### Recommend
537+
### Recommended
475538

476539
For `production` builds it's recommended to extract the CSS from your bundle being able to use parallel loading of CSS/JS resources later on.
477540
This can be achieved by using the `mini-css-extract-plugin`, because it creates separate css files.
478541
For `development` mode (including `webpack-dev-server`) you can use [style-loader](https://github.com/webpack-contrib/style-loader), because it injects CSS into the DOM using multiple <style></style> and works faster.
479542

480-
> i Do not use together `style-loader` and `mini-css-extract-plugin`.
543+
> Do not use `style-loader` and `mini-css-extract-plugin` together.
481544
482545
**webpack.config.js**
483546

0 commit comments

Comments
 (0)