Shorthand CSS

Rewrite longhand CSS inside style attributes 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, shorthandCSS is disabled.

Usage

Enable it for all tags:

module.exports = {
  shorthandCSS: true,
}

Enable it only for a selection of tags:

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

Disabling

Set it to false or simply omit it:

module.exports = {
  shorthandCSS: false,
}

API

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

const html = await shorthandCSS('html string')