posthtml / posthtml-postcss-merge-longhand

Merge longhand properties from inline CSS into shorthand with PostCSS.

Merge Longhand

Merge longhand inline CSS into shorthand

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>

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>