Shorthand inline CSS

Rewrite longhand CSS with shorthand syntax. Only works with margin, padding and border, and only when all sides are specified.

Something like this:

<p class="mx-2 my-4">Example</p>

... instead of becoming this:

<p style="margin-left: 2px; margin-right: 2px; margin-top: 4px; margin-bottom: 4px;">Example</p>

... is rewritten to this:

<p style="margin: 4px 2px;">Example</p>

By default, shorthandInlineCSS is disabled.

Usage

Enable it for all tags:

module.exports = {
  shorthandInlineCSS: true
}

Enable it only for a selection of tags:

module.exports = {
  shorthandInlineCSS: ['td', 'div']
}

Disabling

Set it to false or simply omit it:

module.exports = {
  shorthandInlineCSS: false
}

API

const {shorthandInlineCSS} = require('@maizzle/framework')

const html = await shorthandInlineCSS('html string')