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:

config.js
module.exports = {
shorthandCSS: true,
}

Enable it only for a selection of tags:

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

Disabling

Set it to false or simply omit it:

config.js
module.exports = {
shorthandCSS: false,
}

API

app.js
const {shorthandCSS} = require('@maizzle/framework')
const html = await shorthandCSS('html string')
Copyright © 2024 Maizzle SRLBrand policy
Edit this page on GitHub