Skip to content

Commit 5e04605

Browse files
author
rymka1989
committed
Option extension added
1 parent 8b02ab6 commit 5e04605

File tree

2 files changed

+134
-123
lines changed

2 files changed

+134
-123
lines changed

‎README.md‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ posthtml()
2626
.process(html/*, options */)
2727
.then(result => fs.writeFileSync('./after.html', result.html));
2828
```
29-
## Example
29+
## Example
3030

3131
Before:
3232
``` html
@@ -47,39 +47,46 @@ After:
4747

4848
## Options
4949

50+
#### `extension`
51+
52+
Type: `string`
53+
Default: `.webp`
54+
Description: *Add custom extension or even prefix*
55+
Example: `image.jpg => image.jpg?as=webp (instead of image.jpg.webp)`
56+
5057
#### `replaceExtension`
5158

52-
Type: `Boolean`
53-
Default: `false`
54-
Description: *Replace the extension of the source image with .webp instead of appending .webp to the original filename*
59+
Type: `Boolean`
60+
Default: `false`
61+
Description: *Replace the extension of the source image with .webp instead of appending .webp to the original filename*
5562
Example: `image.jpg => image.webp (instead of image.jpg.webp)`
5663

5764
#### `classIgnore`
5865

59-
Type: `Array<string>`
60-
Default: `[]`
61-
Description: *list of classes for which the transformation will be ignored*
62-
Example: `classIgnore: ['ignore-webp']` will ignore transformation for images with the class `ignore-web`
66+
Type: `Array<string>`
67+
Default: `[]`
68+
Description: *list of classes for which the transformation will be ignored*
69+
Example: `classIgnore: ['ignore-webp']` will ignore transformation for images with the class `ignore-web`
6370

6471
#### `extensionIgnore`
6572

66-
Type: `Array<string>`
67-
Default: `[]`
68-
Description: *list of extension for which the transformation will be ignored*
73+
Type: `Array<string>`
74+
Default: `[]`
75+
Description: *list of extension for which the transformation will be ignored*
6976
Example: `extensionIgnore: ['svg']` will ignore transformation for images with the `svg` extension
7077

7178
#### `lazySrcset`
7279

73-
Type: `String`
74-
Default: `data-srcset`
75-
Description: *The attribute used for lazy webp loading. Use it if you have lazy attribute for `srcset` on your images. It will be set on created `<source>` to later be processed by external lazy loading library.*
80+
Type: `String`
81+
Default: `data-srcset`
82+
Description: *The attribute used for lazy webp loading. Use it if you have lazy attribute for `srcset` on your images. It will be set on created `<source>` to later be processed by external lazy loading library.*
7683
Example: `lazySrcset: 'my-srcset'` will set `my-srcset` attribute on `<source>`
7784

7885
#### `lazySrc`
7986

80-
Type: `String`
81-
Default: `data-src`
82-
Description: *The attribute used for lazy webp loading. The original `<img>` may not contain `src` at all, but instead some custom lazy-loading attribute. Or it may contain just a placeholder image inside `src` which shouldn't be used for webp conversion. `lazySrc` will define a custom attribute name to look at when processing your lazy loaded images. Note that `lazySrcset` is still needed even if `<img>` has only `lazySrc` defined, because `srcset` is the mechanism for defining a source file for the `<source>`. See `lazySrcset` option description.*
87+
Type: `String`
88+
Default: `data-src`
89+
Description: *The attribute used for lazy webp loading. The original `<img>` may not contain `src` at all, but instead some custom lazy-loading attribute. Or it may contain just a placeholder image inside `src` which shouldn't be used for webp conversion. `lazySrc` will define a custom attribute name to look at when processing your lazy loaded images. Note that `lazySrcset` is still needed even if `<img>` has only `lazySrc` defined, because `srcset` is the mechanism for defining a source file for the `<source>`. See `lazySrcset` option description.*
8390
Example: `lazySrc: 'my-src'` will convert an image inside `my-src` attribute, instead of regular `src`.
8491

8592
### License [MIT](LICENSE)

‎lib/index.js‎

Lines changed: 110 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -1,117 +1,121 @@
11
'use strict'
22

33
module.exports = function (options) {
4-
if (!options) {
5-
options = {}
6-
}
7-
8-
if (options.classIgnore === undefined) {
9-
options.classIgnore = []
10-
}
11-
12-
if (options.extensionIgnore === undefined) {
13-
options.extensionIgnore = []
14-
}
15-
16-
if (options.replaceExtension === undefined) {
17-
options.replaceExtension = false
18-
}
19-
20-
if (options.lazySrc === undefined) {
21-
options.lazySrc = 'data-src'
22-
}
23-
24-
if (options.lazySrcset === undefined) {
25-
options.lazySrcset = 'data-srcset'
26-
}
27-
28-
return function posthtmlWebp (tree) {
29-
tree.match([{ tag: 'img' }, { tag: 'amp-img' }], function (imgNode) {
30-
if (imgNode.skip) return imgNode
31-
var classes = (imgNode.attrs && imgNode.attrs.class && imgNode.attrs.class.split(' ')) || []
32-
// Extract extension from lazy loading attribute, because it always contains the right image. (`src` can contain "preview")
33-
// Use `src` if there are no lazy loading attributes.
34-
var extension = (imgNode.attrs[options.lazySrc] || imgNode.attrs[options.lazySrcset] || imgNode.attrs.src || imgNode.attrs.srcset).split('.').pop().split(/\s+/)[0]
35-
var isIgnoredByClass = options.classIgnore.filter(className => classes.includes(className)).length > 0
36-
var isIgnoredByExtension = options.extensionIgnore.filter(fileExtension => fileExtension === extension).length > 0
37-
var isIgnore = isIgnoredByClass || isIgnoredByExtension
38-
if (isIgnore) return imgNode
39-
switch (imgNode.tag) {
40-
case 'amp-img':
41-
return getAmpPicture(imgNode, options)
42-
default:
43-
return getPicture(imgNode, options)
44-
}
45-
})
46-
47-
return tree
48-
}
4+
if (!options) {
5+
options = {}
6+
}
7+
8+
if (options.classIgnore === undefined) {
9+
options.classIgnore = []
10+
}
11+
12+
if (options.extensionIgnore === undefined) {
13+
options.extensionIgnore = []
14+
}
15+
16+
if (options.replaceExtension === undefined) {
17+
options.replaceExtension = false
18+
}
19+
20+
if (options.lazySrc === undefined) {
21+
options.lazySrc = 'data-src'
22+
}
23+
24+
if (options.lazySrcset === undefined) {
25+
options.lazySrcset = 'data-srcset'
26+
}
27+
28+
if (options.extension === undefined) {
29+
options.extension = '.webp'
30+
}
31+
32+
return function posthtmlWebp(tree) {
33+
tree.match([{ tag: 'img' }, { tag: 'amp-img' }], function (imgNode) {
34+
if (imgNode.skip) return imgNode
35+
var classes = (imgNode.attrs && imgNode.attrs.class && imgNode.attrs.class.split(' ')) || []
36+
// Extract extension from lazy loading attribute, because it always contains the right image. (`src` can contain "preview")
37+
// Use `src` if there are no lazy loading attributes.
38+
var extension = (imgNode.attrs[options.lazySrc] || imgNode.attrs[options.lazySrcset] || imgNode.attrs.src || imgNode.attrs.srcset).split('.').pop().split(/\s+/)[0]
39+
var isIgnoredByClass = options.classIgnore.filter(className => classes.includes(className)).length > 0
40+
var isIgnoredByExtension = options.extensionIgnore.filter(fileExtension => fileExtension === extension).length > 0
41+
var isIgnore = isIgnoredByClass || isIgnoredByExtension
42+
if (isIgnore) return imgNode
43+
switch (imgNode.tag) {
44+
case 'amp-img':
45+
return getAmpPicture(imgNode, options)
46+
default:
47+
return getPicture(imgNode, options)
48+
}
49+
})
50+
51+
return tree
52+
}
4953
}
5054

51-
function removeExtension (filename) {
52-
var extIndex = filename.lastIndexOf('.')
53-
if (extIndex === -1) {
54-
// Filename has no extension
55-
return filename
56-
} else {
57-
return filename.substring(0, extIndex)
58-
}
55+
function removeExtension(filename) {
56+
var extIndex = filename.lastIndexOf('.')
57+
if (extIndex === -1) {
58+
// Filename has no extension
59+
return filename
60+
} else {
61+
return filename.substring(0, extIndex)
62+
}
5963
}
6064

61-
function getAmpPicture (imgNode, options) {
62-
imgNode.skip = true
63-
64-
var src = imgNode.attrs.src
65-
if (options.replaceExtension) {
66-
src = removeExtension(src)
67-
}
68-
src += '.webp'
69-
return {
70-
tag: 'amp-img',
71-
attrs: {
72-
...imgNode.attrs,
73-
src
74-
},
75-
content: [
76-
{
77-
...imgNode,
65+
function getAmpPicture(imgNode, options) {
66+
imgNode.skip = true
67+
68+
var src = imgNode.attrs.src
69+
if (options.replaceExtension) {
70+
src = removeExtension(src)
71+
}
72+
src += options.extension
73+
return {
74+
tag: 'amp-img',
7875
attrs: {
79-
...imgNode.attrs,
80-
fallback: ''
81-
}
82-
}
83-
]
84-
}
76+
...imgNode.attrs,
77+
src
78+
},
79+
content: [
80+
{
81+
...imgNode,
82+
attrs: {
83+
...imgNode.attrs,
84+
fallback: ''
85+
}
86+
}
87+
]
88+
}
8589
}
8690

87-
function getPicture (imgNode, options) {
88-
imgNode.skip = true
89-
var srcset = (imgNode.attrs.srcset || imgNode.attrs[options.lazySrcset] || imgNode.attrs[options.lazySrc] || imgNode.attrs.src)
90-
.split(',')
91-
.filter(Boolean)
92-
.map(value => {
93-
value = value.trim().split(/\s/)
94-
var path = options.replaceExtension ? removeExtension(value[0]) : value[0]
95-
var size = value[1]
96-
97-
return [path + '.webp', size].filter(Boolean).join(' ')
98-
})
99-
.join(', ')
100-
101-
var sourceAttrs = {
102-
type: 'image/webp'
103-
}
104-
105-
sourceAttrs[imgNode.attrs[options.lazySrcset] || imgNode.attrs[options.lazySrc] ? options.lazySrcset : 'srcset'] = srcset
106-
107-
return {
108-
tag: 'picture',
109-
content: [
110-
{
111-
tag: 'source',
112-
attrs: sourceAttrs
113-
},
114-
imgNode
115-
]
116-
}
91+
function getPicture(imgNode, options) {
92+
imgNode.skip = true
93+
var srcset = (imgNode.attrs.srcset || imgNode.attrs[options.lazySrcset] || imgNode.attrs[options.lazySrc] || imgNode.attrs.src)
94+
.split(',')
95+
.filter(Boolean)
96+
.map(value => {
97+
value = value.trim().split(/\s/)
98+
var path = options.replaceExtension ? removeExtension(value[0]) : value[0]
99+
var size = value[1]
100+
101+
return [path + options.extension, size].filter(Boolean).join(' ')
102+
})
103+
.join(', ')
104+
105+
var sourceAttrs = {
106+
type: 'image/webp'
107+
}
108+
109+
sourceAttrs[imgNode.attrs[options.lazySrcset] || imgNode.attrs[options.lazySrc] ? options.lazySrcset : 'srcset'] = srcset
110+
111+
return {
112+
tag: 'picture',
113+
content: [
114+
{
115+
tag: 'source',
116+
attrs: sourceAttrs
117+
},
118+
imgNode
119+
]
120+
}
117121
}

0 commit comments

Comments
 (0)