# css-customs-loader

> Exposes custom properties, custom media queries and custom selectors to JavaScript

Latest version **0.4.0** (published 2020-01-29) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install css-customs-loader
pnpm add css-customs-loader
yarn add css-customs-loader
bun add css-customs-loader
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2020-01-29 |
| First published | 2018-11-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 8.12.0 |
| Dependencies | 5 |
| Unpacked size | 21 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Matija Marohnić |
| Maintainers | silvenon |
| Keywords | webpack, webpack-plugin, css, postcss, postcss-custom-properties, postcss-custom-media, postcss-custom-selectors, postcss-preset-env |

## Links

- npm: https://www.npmjs.com/package/css-customs-loader
- Repository: https://github.com/silvenon/css-customs
- Homepage: https://github.com/silvenon/css-customs#readme
- Issues: https://github.com/silvenon/css-customs/issues
- npm.io page: https://npm.io/package/css-customs-loader

## Dependencies (5)

- [postcss](https://npm.io/package/postcss.md) ^7.0.5
- [raw-loader](https://npm.io/package/raw-loader.md) ^4.0.0
- [loader-utils](https://npm.io/package/loader-utils.md) ^1.1.0
- [postcss-load-config](https://npm.io/package/postcss-load-config.md) ^2.0.0
- [require-from-string](https://npm.io/package/require-from-string.md) ^2.0.2

## 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

- 0.4.0 (latest) — 2020-01-29
- 0.3.0 — 2019-03-23
- 0.2.3 — 2019-01-06
- 0.2.2 — 2018-11-29
- 0.2.1 — 2018-11-29
- 0.2.0 — 2018-11-29
- 0.1.3 — 2018-11-19
- 0.1.2 — 2018-11-19
- 0.1.1 — 2018-11-18
- 0.1.0 — 2018-11-18

## README

# css-customs-loader

A webpack loader that exposes [CSS customs][customs] to JavaScript.

## Configuration

```
yarn add css-customs-loader postcss-loader postcss-preset-env
```

You need to add css-customs-loader **before** css-loader:

```js
// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-customs-loader'
            // defaults
            options: {
              onlyLocals: false,
            },
          },
          'css-loader?importLoaders=1',
          'postcss-loader',
        ],
      },
    ],
  },
}
```

css-customs-loader detects [any valid PostCSS configuration][postcss-config] (including options passed to postcss-loader!), so let's create one. `importFrom` will point to a `global.css` file containing our customs and, for the sake of this example, we'll enable all features related to CSS customs:

```js
// postcss.config.js
module.exports = {
  plugins: {
    'postcss-preset-env': {
      importFrom: 'src/global.css',
      features: {
        'custom-properties': true, // already enabled by default
        'custom-media-queries': true,
        'custom-selectors': true,
      },
    },
  },
}
```

### Options

#### `onlyLocals`

This option should be enabled in situations like pre-rendering. You should combine it with [`onlyLocals`][onlyLocals] option in css-loader v2 or [`css-loader/locals`][css-loader-locals] loader in css-loader v1. (Don't use style-loader when pre-rendering.)

## Usage

See usage instructions in the [main readme][basic-usage].

[customs]: https://github.com/silvenon/css-customs/blob/master/readme.md#css-customs
[onlyLocals]: https://github.com/webpack-contrib/css-loader#onlyLocals
[css-loader-locals]: https://github.com/webpack-contrib/css-loader/blob/v1.0.1/locals.js
[postcss-config]: https://github.com/michael-ciniawsky/postcss-load-config
[basic-usage]: https://github.com/silvenon/css-customs/blob/master/readme.md#basic-usage

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