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:

config.js
module.exports = {
  shorthandInlineCSS: true
}

Enable it only for a selection of tags:

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

Disabling

Set it to false or simply omit it:

config.js
module.exports = {
  shorthandInlineCSS: false
}

API

app.js
const {preventWidows} = require('@maizzle/framework')

const html = await Maizzle.shorthandInlineCSS('html string')

Copyright © 2022 Maizzle Edit this page on GitHub