Skip to content

Commit 3cb8327

Browse files
cossssmincossssmin
committed
⚡ Energize
0 parents  commit 3cb8327

16 files changed

+9115
-0
lines changed

‎.editorconfig

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_size = 2
6+
indent_style = space
7+
trim_trailing_whitespace = true
8+
insert_final_newline = true
9+
10+
[*.md]
11+
trim_trailing_whitespace = false

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules/
2+
.nyc_output
3+
*.log

‎.travis.yml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
language: node_js
2+
node_js:
3+
- stable
4+
- 12
5+
- 10

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) Cosmin Popovici
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in
13+
all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
THE SOFTWARE.

‎README.md

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<div align="center">
2+
<img width="150" height="150" title="PostHTML" src="https://posthtml.github.io/posthtml/logo.svg">
3+
<h1>Merge inline longhand</h1>
4+
<p>Merge longhand inline CSS into shorthand</p>
5+
6+
[![Version][npm-version-shield]][npm]
7+
[![License][license-shield]][license]
8+
[![Build][travis-ci-shield]][travis-ci]
9+
[![Downloads][npm-stats-shield]][npm-stats]
10+
</div>
11+
12+
## About
13+
14+
This plugin uses [postcss-merge-longhand](https://github.com/cssnano/cssnano/tree/master/packages/postcss-merge-longhand) to merge longhand CSS properties found in `style=""` attributes to shorthand.
15+
16+
Input:
17+
18+
```html
19+
<div style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</div>
20+
```
21+
22+
Output:
23+
24+
```html
25+
<div style="margin: 1px 2px 3px 4px;">Test</div>
26+
```
27+
28+
## Install
29+
30+
```
31+
$ npm i posthtml posthtml-postcss-merge-longhand
32+
```
33+
34+
## Usage
35+
36+
```js
37+
const posthtml = require('posthtml')
38+
const mergeInlineLonghand = require('posthtml-postcss-merge-longhand')
39+
40+
const html = '<div style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</div>'
41+
42+
posthtml([
43+
mergeInlineLonghand()
44+
])
45+
.process(html)
46+
.then(result => console.log(result.html))
47+
48+
// <div style="margin: 1px 2px 3px 4px;">Test</div>
49+
```
50+
51+
## Options
52+
53+
### `tags`
54+
55+
Type: `array`\
56+
Default: `[]`
57+
58+
Array of tag names to process. All other tags will be skipped.
59+
60+
Example:
61+
62+
```js
63+
const posthtml = require('posthtml')
64+
const mergeInlineLonghand = require('posthtml-postcss-merge-longhand')
65+
66+
const html = `
67+
<div style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</div>
68+
<p style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</p>
69+
`
70+
71+
posthtml([
72+
mergeInlineLonghand({tags: ['div']})
73+
])
74+
.process(html)
75+
.then(result => console.log(result.html))
76+
77+
// <div style="margin: 1px 2px 3px 4px;">Test</div>
78+
// <p style="margin-top: 1px; margin-right: 2px; margin-bottom: 3px; margin-left: 4px;">Test</p>
79+
```
80+
81+
[npm]: https://www.npmjs.com/package/posthtml-postcss-merge-longhand
82+
[npm-version-shield]: https://img.shields.io/npm/v/posthtml-postcss-merge-longhand.svg
83+
[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-postcss-merge-longhand
84+
[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-postcss-merge-longhand.svg
85+
[travis-ci]: https://travis-ci.org/posthtml/posthtml-postcss-merge-longhand/
86+
[travis-ci-shield]: https://img.shields.io/travis/posthtml/posthtml-postcss-merge-longhand/master.svg
87+
[license]: ./LICENSE
88+
[license-shield]: https://img.shields.io/npm/l/posthtml-postcss-merge-longhand.svg

‎lib/index.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use strict'
2+
3+
const postcss = require('postcss')
4+
const mergeLonghand = require('postcss-merge-longhand')
5+
6+
module.exports = (options = {}) => tree => {
7+
options.tags = options.tags || []
8+
9+
const process = node => {
10+
const tags = new Set(options.tags)
11+
12+
if (tags.size > 0 && !tags.has(node.tag)) {
13+
return node
14+
}
15+
16+
if (node.attrs && node.attrs.style) {
17+
const css = postcss().use(mergeLonghand).process(`div { ${node.attrs.style} }`).css.replace(/div {\s|\s}/g, '')
18+
node.attrs.style = css
19+
}
20+
21+
return node
22+
}
23+
24+
return tree.walk(process)
25+
}

0 commit comments

Comments
 (0)