An open API service indexing awesome lists of open source software.

https://github.com/posthtml/posthtml-mixins

📮 Mixins allow you to create reusable blocks of code.
https://github.com/posthtml/posthtml-mixins

mixins posthtml posthtml-mixins

Last synced: 7 months ago
JSON representation

📮 Mixins allow you to create reusable blocks of code.

Awesome Lists containing this project

README

          

# posthtml-mixins

> A [PostHTML](https://github.com/posthtml/posthtml) plugin adds support for Mixins. Mixins allow you to create reusable blocks of code.

[![Travis Status](https://travis-ci.org/mrmlnc/posthtml-mixins.svg?branch=master)](https://travis-ci.org/mrmlnc/posthtml-mixins)

## Install

```
$ npm i -D posthtml-mixins
```

## Usage

```js
const { readFileSync } = require('fs');

const posthtml = require('posthtml');
const mixins = require('posthtml-mixins');

const html = readFileSync('index.html');
posthtml([ mixins() ])
.process(html)
.then((result) => console.log(result.html))
```

## Options

#### delimiters

* Type: `String[]`
* Default: `['{{', '}}']`

Array containing beginning and ending delimiters for locals.

For example:

* `['{', '}']` - `{ key }`
* `['${', '}']` - `${ key }`
* `['%', '%']` - `%key%`
* `['%', '']` - `%key`

## Features

### Parameters

We support parameters for Mixins inside tags and in attributes.

```html

Hello from {{ from }}!




```

```html


Hello from me!



```

### Default values

We support default values for parameters (order is unimportant).

```html

Hello from {{ from }}!




```

```html


Hello from me!



```

### Mixin reloading

We support Mixin reloading when the Mixin may have the same name but a different number of parameters.

```html

Hello from {{ from }}!

Hello!






```

```html


Hello!



Hello from mixin!



```

## Changelog

See the [Releases section of our GitHub project](https://github.com/mrmlnc/posthtml-mixins/releases) for changelogs for each release version.

## License

This software is released under the terms of the MIT license.