Installations

npm install posthtml-postcss-merge-longhand

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Min. Node Version

>=18

Node Version

20.10.0

NPM Version

10.2.4 Score

91.9

Supply Chain

98.8

Quality

77.8

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

230

Closed

46

Merged

184

Issues

Open

0

Total

0

Closed

0

Releases

13

v3.1.3

Updated on Dec 16, 2024

v3.1.2

Updated on Jul 10, 2024

v3.1.1

Updated on Jun 19, 2024

v3.1.0

Updated on Apr 19, 2024

v3.0.0

Updated on Feb 26, 2024

v2.1.0

Updated on Feb 24, 2024

View All 13 releases

Languages

3

JavaScript

HTML

TypeScript

JavaScript (66.63%)

HTML (26.72%)

TypeScript (6.65%)

Developer

posthtml

Download Statistics

Total Downloads

1,522,434

Last Day

3,416

Last Week

34,065

Last Month

141,729

Last Year

618,207

GitHub Statistics

MIT License

3 Stars

340 Commits

1 Forks

4 Watchers

2 Branches

10 Contributors

Updated on May 06, 2025

Bundle Size

208.05 kB

Minified

55.13 kB

Minified + Gzipped

Bundlephobia

Maintainers

1

View All 10 Contributors

Package Meta Information

Latest Version

3.1.3

Package Id

posthtml-postcss-merge-longhand@3.1.3

Unpacked Size

7.61 kB

Size

2.77 kB

File Count

6

NPM Version

10.2.4

Node Version

20.10.0

Published on

Dec 16, 2024

Total Downloads

Cumulative downloads

Total Downloads

1,522,434

Last Day

57.3%

3,416

Compared to previous day

Last Week

8.6%

34,065

Compared to previous week

Last Month

113.4%

141,729

Compared to previous month

Last Year

57.9%

618,207

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

4

postcss postcss-merge-longhand postcss-safe-parser posthtml

Dev Dependencies

4

@biomejs/biome @vitest/coverage-v8 unbuild vitest

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:

1<div style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</div>

Output:

1<div style="margin: 1px 2px 3px 4px;">Test</div>

Install

$ npm i posthtml posthtml-postcss-merge-longhand

Usage

1import posthtml from 'posthtml'
2import mergeInlineLonghand from 'posthtml-postcss-merge-longhand'
3
4const html = '<div style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</div>'
5
6posthtml([    mergeInlineLonghand()  ])
7  .process(html)
8  .then(result => console.log(result.html))
9
10  // <div style="margin: 1px 2px 3px 4px;">Test</div>

CommonJS

Both ESM and CJS exports are provided, you can also require the module:

1const posthtml = require('posthtml')
2const mergeInlineLonghand = require('posthtml-postcss-merge-longhand')
3
4// ...

Options

`tags`

Type: array
Default: []

Array of tag names to process. All other tags will be skipped.

Example:

1import posthtml from 'posthtml'
2import mergeInlineLonghand from 'posthtml-postcss-merge-longhand'
3
4const html = `
5  <div style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</div>
6  <p style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</p>
7`
8
9posthtml([    mergeInlineLonghand({tags: ['div']})
10  ])
11  .process(html)
12  .then(result => console.log(result.html))
13
14  // <div style="margin: 1px 2px 3px 4px;">Test</div>
15  // <p style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</p>

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

Score

4.2

/10

Last Scanned on 2025-05-05

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More