A PostHTML plugin adds support for Mixins. Mixins allow you to create reusable blocks of code.
$ npm i -D posthtml-mixins
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))
- Type:
String[]
- Default:
['{{', '}}']
Array containing beginning and ending delimiters for locals.
For example:
-
['{', '}']
-{ key }
-
['${', '}']
-${ key }
-
['%', '%']
-%key%
-
['%', '']
-%key
We support parameters for Mixins inside tags and in attributes.
<mixin name="say" class from>
<p class="{{ class }}">Hello from {{ from }}!</p>
</mixin>
<div>
<mixin name="say" class="hello" from="me"></mixin>
</div>
<div>
<p class="hello">Hello from me!</p>
</div>
We support default values for parameters (order is unimportant).
<mixin name="say" class from="me">
<p class="{{ class }}">Hello from {{ from }}!</p>
</mixin>
<div>
<mixin name="say" class="hello"></mixin>
</div>
<div>
<p class="hello">Hello from me!</p>
</div>
We support Mixin reloading when the Mixin may have the same name but a different number of parameters.
<mixin name="say" from>
<p>Hello from {{ from }}!</p>
</mixin>
<mixin name="say">
<p>Hello!</p>
</mixin>
<div>
<mixin name="say"></mixin>
</div>
<div>
<mixin name="say" from="mixin"></mixin>
</div>
<div>
<p>Hello!</p>
</div>
<div>
<p>Hello from mixin!</p>
</div>
See the Releases section of our GitHub project for changelogs for each release version.
This software is released under the terms of the MIT license.