# @jhuix/style-resources-loader

> CSS processor resources loader for webpack, which extends test option.

Latest version **1.3.4** (published 2019-12-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @jhuix/style-resources-loader
pnpm add @jhuix/style-resources-loader
yarn add @jhuix/style-resources-loader
bun add @jhuix/style-resources-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.4 |
| Published | 2019-12-18 |
| First published | 2019-12-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=7.6 |
| Dependencies | 4 |
| Unpacked size | 47.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Jhuix |
| Maintainers | jhuix |
| Keywords | webpack, loader, style, css, sass, scss, less, stylus, inject, resource, variable, mixin |

## Links

- npm: https://www.npmjs.com/package/@jhuix/style-resources-loader
- Repository: https://github.com/jhuix/style-resources-loader
- Issues: https://github.com/jhuix/style-resources-loader/issues
- npm.io page: https://npm.io/package/@jhuix/style-resources-loader

## Dependencies (4)

- [glob](https://npm.io/package/glob.md) ^7.1.6
- [is-promise](https://npm.io/package/is-promise.md) ^2.1.0
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.2.3
- [schema-utils](https://npm.io/package/schema-utils.md) ^2.5.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 1.3.4 (latest) — 2019-12-18
- 1.3.3 — 2019-12-18

## README

[![npm][npm]][npm-url]
[![node][node]][node-url]
[![downloads][downloads]][downloads-url]
[![build][build]][build-url]
[![coverage][coverage]][coverage-url]
[![996.icu][996.icu]][996.icu-url]

<div align="center">
  <a href="https://github.com/webpack/webpack">
    <img
        width="200"
        height="200"
        src="https://webpack.js.org/assets/icon-square-big.svg"
    >
  </a>
  <h1>@jhuix/style-resources-loader</h1>
  <p>CSS processor resources loader for webpack.</p>
</div>

This [@jhuix/style-resources-loader](https://github.com/jhuix/style-resources-loader) is based on [style-resources-loader](https://github.com/yenshih/style-resources-loader), which extends [`test`](#test) option. 

<h2 align="center">Install</h2>

```bash
npm i @jhuix/style-resources-loader -D
```

<h2 align="center">Usage</h2>

This loader is a CSS processor resources loader for webpack, which injects your style resources (e.g. `variables, mixins`) into multiple imported `css, sass, scss, less, stylus` modules.

It's mainly used to
 - share your `variables, mixins, functions` across all style files, so you don't need to `@import` them manually.
 - override `variables` in style files provided by other libraries (e.g. [ant-design](https://github.com/ant-design/ant-design)) and customize your own theme.

### Usage with Vue CLI

See [automatic imports](https://cli.vuejs.org/guide/css.html#automatic-imports) for more details.

<h2 align="center">Examples</h2>

Prepends `variables` and `mixins` to all `scss` files with default resources injector.

**webpack.config.js**
``` js
module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader', {
                loader: '@jhuix/style-resources-loader',
                options: {
                    patterns: [
                        './path/from/context/to/scss/variables/*.scss',
                        './path/from/context/to/scss/mixins/*.scss',
                    ]
                }
            }]
        }]
    },
    // ...
}
```

Appends `variables` to all `less` files and overrides original `less variables`.

**webpack.config.js**
```js
module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader', {
                loader: '@jhuix/style-resources-loader',
                options: {
                    patterns: path.resolve(__dirname, 'path/to/less/variables/*.less'),
                    injector: 'append'
                }
            }]
        }]
    },
    // ...
}
```

Prepends `variables` and `mixins` to all `stylus` files with customized resources injector.

**webpack.config.js**
``` js
module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.styl$/,
            use: ['style-loader', 'css-loader', 'stylus-loader', {
                loader: '@jhuix/style-resources-loader',
                options: {
                    test:/main/
                    patterns: [
                        path.resolve(__dirname, 'path/to/stylus/variables/*.styl'),
                        path.resolve(__dirname, 'path/to/stylus/mixins/*.styl')
                    ],
                    injector: (source, resources) => {
                        const combineAll = type => resources
                            .filter(({ file }) => file.includes(type))
                            .map(({ content }) => content)
                            .join('');

                        return combineAll('variables') + combineAll('mixins') + source;
                    }
                }
            }]
        }]
    },
    // ...
}
```

<h2 align="center">Options</h2>

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**[`test`](#test)**|`{string \| RegExp \| Function}`|`''`|Match and Filter resource file|
|**[`patterns`](#patterns)**|`{string \| string[]}`|`/`|Path to the resources you would like to inject|
|**[`injector`](#injector)**|`{Function \| 'prepend' \| 'append'}`|`'prepend'`|Controls the resources injection precisely|
|**[`globOptions`](#globoptions)**|`{Object}`|`{}`|An options that can be passed to `glob(...)`|
|**[`resolveUrl`](#resolveurl)**|`{boolean}`|`true`|Enable/Disable `@import` url to be resolved|

See [the type definition file](https://github.com/jhuix/style-resources-loader/blob/master/src/types.ts) for more details.

### `test`

An optional function which filter the resources file with the filename. 

It defaults to a empty string, which implements without filter any files.

Furthermore, an `test` type should match the following type signature:

- String:

```ts
"css"
```

- RegExp:

```ts
/\.vue$/
```

- Function:

```ts
(filename: string) => boolean
```

### `patterns`

A string or an array of string, which represents the path to the resources you would like to inject. If the path is relative, it would relative to [webpack context](https://webpack.js.org/configuration/entry-context/).

It supports [globbing](https://github.com/isaacs/node-glob). You could include many files using a file mask.

For example, `'./styles/*/*.less'` would include all `less` files from `variables` and `mixins` directories and ignore `reset.less` in such following structure.

```
./src  <-- webpack context
  /styles
    /variables
      |-- fonts.less
      |-- colors.less
    /mixins
      |-- size.less
    |-- reset.less
```

Only supports `.css` `.sass` `.scss` `.less` `.styl` as resources file extensions.

### `injector`

An optional function which controls the resources injection precisely. It also supports `'prepend'` and `'append'` for convenience, which means the loader will prepend or append all resources to source files, respectively.

It defaults to `'prepend'`, which implements as an injector function internally.

Furthermore, an injector function should match the following type signature:

```ts
(source: string, resources: StyleResource[]) => string | Promise<string>
```

It receives two parameters:

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**`source`**|`{string}`|`/`|Content of the source file|
|**[`resources`](#resources)**|`{StyleResource[]}`|`/`|Resource descriptors|

#### `resources`

An array of resource descriptor, each contains `file` and `content` properties:

|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**`file`**|`{string}`|`/`|Absolute path to the resource|
|**`content`**|`{string}`|`/`|Content of the resource file|

It can be asynchronous. You could use `async / await` syntax in your own injector function or just return a promise.

### `globOptions`

Options that can be passed to `glob(...)`. See [node-glob options](https://github.com/isaacs/node-glob#options) for more details.

### `resolveUrl`

A boolean which defaults to `true`. It represents whether the relative path in `@import` or `@require` statements should be resolved.

If you were to use `@import` or `@require` statements in style resource files, you should make sure that the URL is relative to that resource file, rather than the source file.

You could disable this feature by setting `resolveUrl` to `false`.

<h2 align="center">License</h2>

[MIT](http://www.opensource.org/licenses/mit-license.php)

[npm]: https://img.shields.io/npm/v/@jhuix/style-resources-loader.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/@jhuix/style-resources-loader
[node]: https://img.shields.io/node/v/@jhuix/style-resources-loader.svg
[node-url]: https://nodejs.org
[downloads]: https://img.shields.io/npm/dm/@jhuix/style-resources-loader.svg?style=flat-square
[downloads-url]: https://www.npmjs.com/package/@jhuix/style-resources-loader
[build]: https://img.shields.io/travis/jhuix/style-resources-loader/master.svg?style=flat-square
[build-url]: https://travis-ci.org/jhuix/style-resources-loader
[coverage]: https://img.shields.io/coveralls/jhuix/style-resources-loader/master.svg?style=flat
[coverage-url]: https://coveralls.io/github/jhuix/style-resources-loader?branch=master
[996.icu]: https://img.shields.io/badge/link-996.icu-%23FF4D5B.svg?style=flat-square
[996.icu-url]: https://996.icu/#/en_US

---
_Source: https://npm.io/package/@jhuix/style-resources-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._