# modular-css-aliases

> Custom file resolver supporting directory aliases for modular-css

Latest version **15.0.0** (published 2018-08-28) · MIT license · 0 weekly downloads

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

## Install

```sh
npm install modular-css-aliases
pnpm add modular-css-aliases
yarn add modular-css-aliases
bun add modular-css-aliases
```

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 15.0.0 |
| Published | 2018-08-28 |
| First published | 2017-05-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 291 |
| Author | Pat Cavit |
| Maintainers | tivac |
| Keywords | css, css-modules, modular-css, paths, aliases |

## Links

- npm: https://www.npmjs.com/package/modular-css-aliases
- Repository: https://github.com/tivac/modular-css
- Homepage: https://github.com/tivac/modular-css#readme
- Issues: https://github.com/tivac/modular-css/issues
- npm.io page: https://npm.io/package/modular-css-aliases

## Dependencies (1)

- [resolve-from](https://npm.io/package/resolve-from.md) ^4.0.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

- 15.0.0 (latest) — 2018-08-28
- 14.4.0 — 2018-08-10
- 14.3.0 — 2018-08-09
- 14.2.1 — 2018-08-01
- 14.2.0 — 2018-07-25
- 14.1.0 — 2018-07-18
- 14.0.1 — 2018-07-16
- 14.0.0 — 2018-07-13
- 13.0.0 — 2018-07-13
- 12.1.3 — 2018-07-05
- 12.1.2 — 2018-07-05
- 12.1.0 — 2018-06-26
- 12.0.2 — 2018-06-22
- 12.0.1 — 2018-06-13
- 12.0.0 — 2018-06-08
- … 16 more at https://npm.io/package/modular-css-aliases/versions

## README

modular-css-aliases [![NPM Version](https://img.shields.io/npm/v/modular-css-aliases.svg)](https://www.npmjs.com/package/modular-css-aliases) [![NPM License](https://img.shields.io/npm/l/modular-css-aliases.svg)](https://www.npmjs.com/package/modular-css-aliases) [![NPM Downloads](https://img.shields.io/npm/dm/modular-css-aliases.svg)](https://www.npmjs.com/package/modular-css-aliases)
===========

<p align="center">
    <a href="https://gitter.im/modular-css/modular-css"><img src="https://img.shields.io/gitter/room/modular-css/modular-css.svg" alt="Gitter" /></a>
</p>

A resolver for [`modular-css`](https://github.com/tivac/modular-css) that will let you resolve file references against named aliases. Useful to avoid code like

```
@value foo from "../../../../../../../../some/other/directory/file.css";
```

which is annoying to write, annoying to read, and also super-brittle.

## Install

`$ npm i modular-css-aliases`

## Usage

Pass as part of the `resolvers` array in the `modular-css` options (via JS API/Rollup/Browserify/WebPack/etc). When `modular-css` is trying to resolve `@value` or `composes` file references it'll replace the alias keys with their path value for file lookups.

```js
var Processor = require("modular-css-core"),
    aliases   = require("modular-css-aliases")

    processor = new Processor({
        resolvers : [
            aliases({
                aliases : {
                    one  : "./path/one",
                    path : "../../some/other/path"
                }
            })
        ]
    });
```

which allows you to write CSS like this.

```css
@value one from "one/one.css";

.a {
    composes: path from "path/path.css";
}
```

### Options

#### `aliases`

A `object` consisting of key/value pairs of alias names to file paths. Paths can be relative to the `cwd` of the `Processor` instance or absolute paths.

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