About
This plugin uses postcss-merge-longhand to merge longhand CSS properties in style="" attributes to shorthand.
Input:
<div style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</div>
Output:
<div style="margin: 1px 2px 3px 4px;">Test</div>
Install
$ npm i posthtml posthtml-postcss-merge-longhand
Usage
import posthtml from 'posthtml'
import mergeInlineLonghand from 'posthtml-postcss-merge-longhand'
const html = '<div style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</div>'
posthtml([ mergeInlineLonghand() ])
.process(html)
.then(result => console.log(result.html))
// <div style="margin: 1px 2px 3px 4px;">Test</div>
CommonJS
Both ESM and CJS exports are provided, you can also require the module:
const posthtml = require('posthtml')
const mergeInlineLonghand = require('posthtml-postcss-merge-longhand')
// ...
Options
tags
Type: array
Default: []
Array of tag names to process. All other tags will be skipped.
Example:
import posthtml from 'posthtml'
import mergeInlineLonghand from 'posthtml-postcss-merge-longhand'
const html = `
<div style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</div>
<p style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</p>
`
posthtml([ mergeInlineLonghand({tags: ['div']})
])
.process(html)
.then(result => console.log(result.html))
// <div style="margin: 1px 2px 3px 4px;">Test</div>
// <p style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</p>
