Skip to content

Commit 6650691

Browse files
author
Strek
authored
fix: types (#903)
1 parent 7fd41e3 commit 6650691

File tree

3 files changed

+118
-47
lines changed

3 files changed

+118
-47
lines changed

‎README.md

+109-38
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,22 @@ 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+
44+
or
45+
46+
```console
47+
pnpm add -D mini-css-extract-plugin
48+
```
49+
3850
It's recommended to combine `mini-css-extract-plugin` with the [`css-loader`](https://github.com/webpack-contrib/css-loader)
3951

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

8092
### Plugin Options
8193

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 |
94+
- **[`filename`](#filename)**
95+
- **[`chunkFilename`](#chunkFilename)**
96+
- **[`ignoreOrder`](#ignoreOrder)**
97+
- **[`insert`](#insert)**
98+
- **[`attributes`](#attributes)**
99+
- **[`linkType`](#linkType)**
100+
- **[`runtime`](#runtime)**
101+
- **[`experimentalUseImportModule`](#experimentalUseImportModule)**
92102

93103
#### `filename`
94104

95-
Type: `String|Function`
105+
Type:
106+
107+
```ts
108+
type filename =
109+
| string
110+
| ((pathData: PathData, assetInfo?: AssetInfo) => string);
111+
```
112+
96113
Default: `[name].css`
97114

98115
This option determines the name of each output CSS file.
@@ -101,28 +118,47 @@ Works like [`output.filename`](https://webpack.js.org/configuration/output/#outp
101118

102119
#### `chunkFilename`
103120

104-
Type: `String|Function`
121+
Type:
122+
123+
```ts
124+
type chunkFilename =
125+
| string
126+
| ((pathData: PathData, assetInfo?: AssetInfo) => string);
127+
```
128+
105129
Default: `based on filename`
106130

107-
> i Specifying `chunkFilename` as a `function` is only available in webpack@5
131+
> Specifying `chunkFilename` as a `function` is only available in webpack@5
108132
109133
This option determines the name of non-entry chunk files.
110134

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

113137
#### `ignoreOrder`
114138

115-
Type: `Boolean`
139+
Type:
140+
141+
```ts
142+
type ignoreOrder = boolean;
143+
```
144+
116145
Default: `false`
117146

118147
Remove Order Warnings.
119148
See [examples](#remove-order-warnings) below for details.
120149

121150
#### `insert`
122151

123-
Type: `String|Function`
152+
Type:
153+
154+
```ts
155+
type insert = string | ((linkTag: HTMLLinkElement) => void);
156+
```
157+
124158
Default: `document.head.appendChild(linkTag);`
125159

160+
Inserts the `link` tag at the given position for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) CSS chunks
161+
126162
> ⚠️ Only for [non-initial (async)](https://webpack.js.org/concepts/under-the-hood/#chunks) chunks.
127163
128164
By default, the `mini-css-extract-plugin` appends styles (`<link>` elements) to `document.head` of the current `window`.
@@ -133,7 +169,7 @@ In such cases `insert` can be configured to be a function or a custom selector.
133169

134170
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.
135171

136-
##### `String`
172+
##### `string`
137173

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

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

151-
##### `Function`
187+
##### `function`
152188

153189
Allows to override default behavior and insert styles at any position.
154190

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

174210
#### `attributes`
175211

176-
Type: `Object`
212+
Type:
213+
214+
```ts
215+
type attributes = Record<string, string>};
216+
```
217+
177218
Default: `{}`
178219

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

210251
#### `linkType`
211252

212-
Type: `String|Boolean`
253+
Type:
254+
255+
```ts
256+
type linkType = string | boolean;
257+
```
258+
213259
Default: `text/css`
214260

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

217-
##### `String`
263+
##### `string`
218264

219265
Possible values: `text/css`
220266

@@ -240,7 +286,7 @@ module.exports = {
240286
};
241287
```
242288

243-
##### `Boolean`
289+
##### `boolean`
244290

245291
`false` disables the link `type` attribute
246292

@@ -268,12 +314,17 @@ module.exports = {
268314

269315
#### `runtime`
270316

271-
Type: `Boolean`
317+
Type:
318+
319+
```ts
320+
type runtime = boolean;
321+
```
322+
272323
Default: `true`
273324

274325
Allows to enable/disable the runtime generation.
275326
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.
327+
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.
277328

278329
`true` to skip.
279330

@@ -301,7 +352,12 @@ module.exports = {
301352

302353
#### `experimentalUseImportModule`
303354

304-
Type: `Boolean`
355+
Type:
356+
357+
```ts
358+
type experimentalUseImportModule = boolean;
359+
```
360+
305361
Default: `undefined`
306362

307363
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 +378,7 @@ module.exports = {
322378
new MiniCssExtractPlugin({
323379
// You don't need this for `>= 5.52.0` due to the fact that this is enabled by default
324380
// Required only for `>= 5.33.2 & <= 5.52.0`
325-
// Not avaliable/unsafe for `<= 5.33.2`
381+
// Not available/unsafe for `<= 5.33.2`
326382
experimentalUseImportModule: true,
327383
}),
328384
],
@@ -339,21 +395,26 @@ module.exports = {
339395

340396
### Loader Options
341397

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 |
398+
- **[`publicPath`](#publicPath)**
399+
- **[`emit`](#emit)**
400+
- **[`esModule`](#esModule)**
347401

348402
#### `publicPath`
349403

350-
Type: `String|Function`
404+
Type:
405+
406+
```ts
407+
type publicPath =
408+
| string
409+
| ((resourcePath: string, rootContext: string) => string);
410+
```
411+
351412
Default: the `publicPath` in `webpackOptions.output`
352413

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

356-
##### `String`
417+
##### `string`
357418

358419
**webpack.config.js**
359420

@@ -388,7 +449,7 @@ module.exports = {
388449
};
389450
```
390451

391-
##### `Function`
452+
##### `function`
392453

393454
**webpack.config.js**
394455

@@ -427,15 +488,25 @@ module.exports = {
427488

428489
#### `emit`
429490

430-
Type: `Boolean`
491+
Type:
492+
493+
```ts
494+
type emit = boolean;
495+
```
496+
431497
Default: `true`
432498

433499
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.
434500
It is often useful to disable this option for server-side packages.
435501

436502
#### `esModule`
437503

438-
Type: `Boolean`
504+
Type:
505+
506+
```ts
507+
type esModule = boolean;
508+
```
509+
439510
Default: `true`
440511

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

472543
## Examples
473544

474-
### Recommend
545+
### Recommended
475546

476547
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.
477548
This can be achieved by using the `mini-css-extract-plugin`, because it creates separate css files.
478549
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.
479550

480-
> i Do not use together `style-loader` and `mini-css-extract-plugin`.
551+
> Do not use `style-loader` and `mini-css-extract-plugin` together.
481552
482553
**webpack.config.js**
483554

‎src/index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const {
4242
* @property {Required<Configuration>['output']['filename']} [filename]
4343
* @property {Required<Configuration>['output']['chunkFilename']} [chunkFilename]
4444
* @property {boolean} [ignoreOrder]
45-
* @property {string | ((linkTag: any) => void)} [insert]
45+
* @property {string | ((linkTag: HTMLLinkElement) => void)} [insert]
4646
* @property {Record<string, string>} [attributes]
4747
* @property {string | false | 'text/css'} [linkType]
4848
* @property {boolean} [runtime]
@@ -54,7 +54,7 @@ const {
5454
* @property {Required<Configuration>['output']['filename']} filename
5555
* @property {Required<Configuration>['output']['chunkFilename']} [chunkFilename]
5656
* @property {boolean} ignoreOrder
57-
* @property {string | ((linkTag: any) => void)} [insert]
57+
* @property {string | ((linkTag: HTMLLinkElement) => void)} [insert]
5858
* @property {Record<string, string>} [attributes]
5959
* @property {string | false | 'text/css'} [linkType]
6060
* @property {boolean} runtime
@@ -63,7 +63,7 @@ const {
6363

6464
/**
6565
* @typedef {Object} RuntimeOptions
66-
* @property {string | ((linkTag: any) => void) | undefined} insert
66+
* @property {string | ((linkTag: HTMLLinkElement) => void) | undefined} insert
6767
* @property {string | false | 'text/css'} linkType
6868
* @property {Record<string, string> | undefined} attributes
6969
*/

‎types/index.d.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ type PluginOptions = {
107107
filename?: Required<Configuration>["output"]["filename"];
108108
chunkFilename?: Required<Configuration>["output"]["chunkFilename"];
109109
ignoreOrder?: boolean | undefined;
110-
insert?: string | ((linkTag: any) => void) | undefined;
110+
insert?: string | ((linkTag: HTMLLinkElement) => void) | undefined;
111111
attributes?: Record<string, string> | undefined;
112112
linkType?: string | false | undefined;
113113
runtime?: boolean | undefined;
@@ -138,7 +138,7 @@ type PluginOptions = {
138138
* @property {Required<Configuration>['output']['filename']} [filename]
139139
* @property {Required<Configuration>['output']['chunkFilename']} [chunkFilename]
140140
* @property {boolean} [ignoreOrder]
141-
* @property {string | ((linkTag: any) => void)} [insert]
141+
* @property {string | ((linkTag: HTMLLinkElement) => void)} [insert]
142142
* @property {Record<string, string>} [attributes]
143143
* @property {string | false | 'text/css'} [linkType]
144144
* @property {boolean} [runtime]
@@ -149,15 +149,15 @@ type PluginOptions = {
149149
* @property {Required<Configuration>['output']['filename']} filename
150150
* @property {Required<Configuration>['output']['chunkFilename']} [chunkFilename]
151151
* @property {boolean} ignoreOrder
152-
* @property {string | ((linkTag: any) => void)} [insert]
152+
* @property {string | ((linkTag: HTMLLinkElement) => void)} [insert]
153153
* @property {Record<string, string>} [attributes]
154154
* @property {string | false | 'text/css'} [linkType]
155155
* @property {boolean} runtime
156156
* @property {boolean} [experimentalUseImportModule]
157157
*/
158158
/**
159159
* @typedef {Object} RuntimeOptions
160-
* @property {string | ((linkTag: any) => void) | undefined} insert
160+
* @property {string | ((linkTag: HTMLLinkElement) => void) | undefined} insert
161161
* @property {string | false | 'text/css'} linkType
162162
* @property {Record<string, string> | undefined} attributes
163163
*/
@@ -190,14 +190,14 @@ type NormalizedPluginOptions = {
190190
filename: Required<Configuration>["output"]["filename"];
191191
chunkFilename?: Required<Configuration>["output"]["chunkFilename"];
192192
ignoreOrder: boolean;
193-
insert?: string | ((linkTag: any) => void) | undefined;
193+
insert?: string | ((linkTag: HTMLLinkElement) => void) | undefined;
194194
attributes?: Record<string, string> | undefined;
195195
linkType?: string | false | undefined;
196196
runtime: boolean;
197197
experimentalUseImportModule?: boolean | undefined;
198198
};
199199
type RuntimeOptions = {
200-
insert: string | ((linkTag: any) => void) | undefined;
200+
insert: string | ((linkTag: HTMLLinkElement) => void) | undefined;
201201
linkType: string | false | "text/css";
202202
attributes: Record<string, string> | undefined;
203203
};

0 commit comments

Comments
 (0)