Skip to content

Commit 10ddc88

Browse files
author
Strek
authored
docs(readme): added types (#454)
1 parent 059e896 commit 10ddc88

1 file changed

Lines changed: 54 additions & 24 deletions

File tree

README.md

Lines changed: 54 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@ or
3030
yarn add -D less less-loader
3131
```
3232

33+
or
34+
35+
```console
36+
pnpm add -D less less-loader
37+
```
38+
3339
Then add the loader to your `webpack` config. For example:
3440

3541
**webpack.config.js**
@@ -56,22 +62,25 @@ And run `webpack` via your preferred method.
5662

5763
## Options
5864

59-
| Name | Type | Default | Description |
60-
| :---------------------------------------: | :------------------: | :----------------------: | :----------------------------------------------------- |
61-
| **[`lessOptions`](#lessoptions)** | `{Object\|Function}` | `{ relativeUrls: true }` | Options for Less. |
62-
| **[`additionalData`](#additionalData)** | `{String\|Function}` | `undefined` | Prepends/Appends `Less` code to the actual entry file. |
63-
| **[`sourceMap`](#sourcemap)** | `{Boolean}` | `compiler.devtool` | Enables/Disables generation of source maps. |
64-
| **[`webpackImporter`](#webpackimporter)** | `{Boolean}` | `true` | Enables/Disables the default Webpack importer. |
65-
| **[`implementation`](#implementation)** | `{Object\|String}` | `less` | Setup Less implementation to use. |
65+
- **[`lessOptions`](#lessoptions)**
66+
- **[`additionalData`](#additionalData)**
67+
- **[`sourceMap`](#sourcemap)**
68+
- **[`webpackImporter`](#webpackimporter)**
69+
- **[`implementation`](#implementation)**
6670

6771
### `lessOptions`
6872

69-
Type: `Object|Function`
73+
Type:
74+
75+
```ts
76+
type lessOptions = import('less').options | ((loaderContext: LoaderContext) => import('less').options})
77+
```
78+
7079
Default: `{ relativeUrls: true }`
7180
7281
You can pass any Less specific options to the `less-loader` through the `lessOptions` property in the [loader options](https://webpack.js.org/configuration/module/#rule-options-rule-query). See the [Less documentation](http://lesscss.org/usage/#command-line-usage-options) for all available options in dash-case. Since we're passing these options to Less programmatically, you need to pass them in camelCase here:
7382
74-
#### `Object`
83+
#### `object`
7584
7685
Use an object to pass options through to Less.
7786
@@ -105,7 +114,7 @@ module.exports = {
105114
};
106115
```
107116

108-
#### `Function`
117+
#### `function`
109118

110119
Allows setting the options passed through to Less based off of the loader context.
111120

@@ -147,17 +156,24 @@ module.exports = {
147156

148157
### `additionalData`
149158

150-
Type: `String|Function`
159+
Type:
160+
161+
```ts
162+
type additionalData =
163+
| string
164+
| ((content: string, loaderContext: LoaderContext) => string);
165+
```
166+
151167
Default: `undefined`
152168

153-
Prepends `Less` code before the actual entry file.
169+
Prepends/Appends `Less` code to the actual entry file.
154170
In this case, the `less-loader` will not override the source but just **prepend** the entry's content.
155171

156172
This is especially useful when some of your Less variables depend on the environment:
157173

158-
> Since you're injecting code, this will break the source mappings in your entry file. Often there's a simpler solution than this, like multiple Less entry files.
174+
> Since you're injecting code, this will break the source mappings in your entry file. Often there's a simpler solution than this, like multiple Less entry files.
159175
160-
#### `String`
176+
#### `string`
161177

162178
```js
163179
module.exports = {
@@ -181,9 +197,9 @@ module.exports = {
181197
};
182198
```
183199

184-
#### `Function`
200+
#### `function`
185201

186-
##### Sync
202+
##### `Sync`
187203

188204
```js
189205
module.exports = {
@@ -217,7 +233,7 @@ module.exports = {
217233
};
218234
```
219235

220-
##### Async
236+
##### `Async`
221237

222238
```js
223239
module.exports = {
@@ -253,7 +269,12 @@ module.exports = {
253269

254270
### `sourceMap`
255271

256-
Type: `Boolean`
272+
Type:
273+
274+
```ts
275+
type sourceMap = boolean;
276+
```
277+
257278
Default: depends on the `compiler.devtool` value
258279

259280
By default generation of source maps depends on the [`devtool`](https://webpack.js.org/configuration/devtool/) option. All values enable source map generation except `eval` and `false` value.
@@ -289,7 +310,12 @@ module.exports = {
289310

290311
### `webpackImporter`
291312

292-
Type: `Boolean`
313+
Type:
314+
315+
```ts
316+
type webpackImporter = boolean;
317+
```
318+
293319
Default: `true`
294320

295321
Enables/Disables the default `webpack` importer.
@@ -322,15 +348,19 @@ module.exports = {
322348

323349
### `implementation`
324350

325-
Type: `Object | String`
351+
Type:
352+
353+
```ts
354+
type implementation = object | string;
355+
```
326356

327-
> less-loader compatible with Less 3 and 4 versions
357+
> less-loader compatible with Less 3 and 4 versions
328358
329359
The special `implementation` option determines which implementation of Less to use. Overrides the locally installed `peerDependency` version of `less`.
330360

331361
**This option is only really useful for downstream tooling authors to ease the Less 3-to-4 transition.**
332362

333-
#### `Object`
363+
#### `object`
334364

335365
**webpack.config.js**
336366

@@ -356,7 +386,7 @@ module.exports = {
356386
};
357387
```
358388

359-
#### `String`
389+
#### `string`
360390

361391
**webpack.config.js**
362392

@@ -585,7 +615,7 @@ Bundling CSS with webpack has some nice advantages like referencing images and f
585615
There are two possibilities to extract a style sheet from the bundle:
586616

587617
- [`extract-loader`](https://github.com/peerigon/extract-loader) (simpler, but specialized on the css-loader's output)
588-
- [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin) (more complex, but works in all use-cases)
618+
- [`MiniCssExtractPlugin`](https://github.com/webpack-contrib/mini-css-extract-plugin) (more complex, but works in all use-cases)
589619

590620
### CSS modules gotcha
591621

0 commit comments

Comments
 (0)