# postcss-javascript-mixins

> Write CSS mixins in Javascript.

Latest version **0.1.1** (published 2018-01-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-javascript-mixins
pnpm add postcss-javascript-mixins
yarn add postcss-javascript-mixins
bun add postcss-javascript-mixins
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2018-01-07 |
| First published | 2018-01-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | johnwatkins0 |
| Keywords | postcss, css, mixins |

## Links

- npm: https://www.npmjs.com/package/postcss-javascript-mixins
- npm.io page: https://npm.io/package/postcss-javascript-mixins

## Dependencies (2)

- [postcss](https://npm.io/package/postcss.md) ^6.0.16
- [stylelint](https://npm.io/package/stylelint.md) ^8.4.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

- 0.1.1 (latest) — 2018-01-07
- 0.1.0 — 2018-01-06

## README

# postcss-javascript-mixins [![Build Status](https://travis-ci.org/johnwatkins0/postcss-js-mixins.svg?branch=master)](https://travis-ci.org/johnwatkins0/postcss-js-mixins)

Write CSS mixins in Javascript.

## Install

```
npm install --save-dev postcss-javascript-mixins
```

OR

```
yarn add --dev postcss-javascript-mixins
```

## Usage

In your CSS, include an at rule with the `js-mixin` keyword followed by the path to the JS file generating CSS. Optionally, you may give the at rule a set of key-value declarations that will be passed as an object to the JS function.

The file path resolves from the project root (i.e. the location of postcss.config.js and/or package.json). This can be overriden with the `rootDir` option passed via the PostCSS configuration (see below).

Each mixin should be a separate JS module exporting a single function in a dialect of Javascript your version of Node understands. The function must return a string (the CSS).

### Example

#### CSS

```CSS
/* src/style.css */

body {
  @js-mixin tests/makeTheme {
    themeName: 'dark';
  }
}

@js-mixin mixins/makeColumns {
  columnCount: 4;
}

main {
  overflow: auto;
}
```

#### Javascript

```Javascript
// ./mixins/makeColumns.js

module.exports = ({ columnCount }) => {
    let output = '';
    for (let i = 1; i <= columnCount; i += 1) {
        output += `
.col-${i} {
  width: ${100 / columnCount * i}%;
}
`;
    }

    return output;
};
```

```Javascript
// ./mixins/makeTheme.js

module.exports = ({ themeName }) => {
    if (themeName === 'dark') {
        return `
  color: white;
  background-color: black;
`;
    }

    return '';
};
```

#### Result

```CSS
/* dist/style.css */

body {
  color: white;
  background-color: black
}

.col-1 {
  width: 25%;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 75%;
}

.col-4 {
  width: 100%;
}

main {
  overflow: auto;
}
```

### Options

#### rootDir

A path to prepend to the Javascript files when imported. The full path should be used. Defaults to the project root.

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