posthtml-postcss-merge-longhand

    1.0.4 • Public • Published

    Merge inline longhand

    Merge longhand inline CSS into shorthand

    Version License Build Downloads

    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

    const posthtml = require('posthtml')
    const mergeInlineLonghand = require('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:

    const posthtml = require('posthtml')
    const mergeInlineLonghand = require('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>

    Install

    npm i posthtml-postcss-merge-longhand

    DownloadsWeekly Downloads

    924

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    9.97 kB

    Total Files

    15

    Last publish

    Collaborators

    • avatar