https://github.com/posthtml/posthtml-postcss-merge-longhand
Merge longhand properties from inline CSS into shorthand with PostCSS.
https://github.com/posthtml/posthtml-postcss-merge-longhand
Last synced: 10 months ago
JSON representation
Merge longhand properties from inline CSS into shorthand with PostCSS.
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-postcss-merge-longhand
- Owner: posthtml
- License: mit
- Created: 2020-04-27T10:09:22.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-11T15:28:43.000Z (10 months ago)
- Last Synced: 2025-04-11T20:52:28.972Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.49 MB
- Stars: 3
- Watchers: 4
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
Merge Longhand
Merge longhand inline CSS into shorthand
[![Version][npm-version-shield]][npm]
[![Build][github-ci-shield]][github-ci]
[![License][license-shield]][license]
[![Downloads][npm-stats-shield]][npm-stats]
## About
This plugin uses [postcss-merge-longhand](https://github.com/cssnano/cssnano/tree/master/packages/postcss-merge-longhand) to merge longhand CSS properties in `style=""` attributes to shorthand.
Input:
```html
Test
```
Output:
```html
Test
```
## Install
```
$ npm i posthtml posthtml-postcss-merge-longhand
```
## Usage
```js
import posthtml from 'posthtml'
import mergeInlineLonghand from 'posthtml-postcss-merge-longhand'
const html = '
Test'
posthtml([
mergeInlineLonghand()
])
.process(html)
.then(result => console.log(result.html))
//
Test
```
### CommonJS
Both ESM and CJS exports are provided, you can also `require` the module:
```js
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:
```js
import posthtml from 'posthtml'
import mergeInlineLonghand from 'posthtml-postcss-merge-longhand'
const html = `
Test
Test
`
posthtml([
mergeInlineLonghand({tags: ['div']})
])
.process(html)
.then(result => console.log(result.html))
//
Test
// Test
```
[npm]: https://www.npmjs.com/package/posthtml-postcss-merge-longhand
[npm-version-shield]: https://img.shields.io/npm/v/posthtml-postcss-merge-longhand.svg
[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-postcss-merge-longhand
[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-postcss-merge-longhand.svg
[github-ci]: https://github.com/posthtml/posthtml-postcss-merge-longhand/actions
[github-ci-shield]: https://github.com/posthtml/posthtml-postcss-merge-longhand/actions/workflows/nodejs.yml/badge.svg
[license]: ./LICENSE
[license-shield]: https://img.shields.io/npm/l/posthtml-postcss-merge-longhand.svg