Merge pull request #6 from posthtml/milestone-1.3.0

Milestone 1.3.0

Author: Scrum

README.md

@@ -7,11 +7,31 @@
 [![Standard Code Style][style]][style-url]
 [![Chat][chat]][chat-badge]
 
-This plugin add webp supporting in your html.
+This plugin add webp supporting in your html. Also supports [`<amp-img>`](https://amp.dev/documentation/components/amp-img/)
+
+## Install
+```bash
+$ npm i posthtml posthtml-webp
+```
+
+## Usage
+
+``` js
+const fs = require('fs');
+const posthtml = require('posthtml');
+const posthtmlWebp = require('posthtml-webp');
+
+posthtml()
+    .use(posthtmlWebp(/* Plugin options */))
+    .process(html/*, options */)
+    .then(result => fs.writeFileSync('./after.html', result.html));
+```
+## Example 
 
 Before:
 ``` html
 <img src="image.jpg">
+<amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png"></amp-img>
 ```
 
 After:
@@ -20,47 +40,19 @@ After:
     <source type="image/webp" srcset="image.jpg.webp">
     <img src="image.jpg">
 </picture>
-```
-
-Also supports [`<amp-img>`](https://amp.dev/documentation/components/amp-img/)
-
-Before:
-```html
-<amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png"></amp-img>
-```
-
-After:
-```html
 <amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png.webp">
     <amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png" fallback=""></amp-img>
 </amp-img>
 ```
 
-## Install
-
-> npm i posthtml posthtml-webp
+## Options
 
-## Plugin options
-`replaceExtension` (boolean)
-
-**Default:** false
-
-Replace the extension of the source image with .webp instead of appending .webp to the original filename
-
-**Example**: image.jpg => image.webp (instead of image.jpg.webp)
-
-## Usage
+#### `replaceExtension`
 
-``` js
-const fs = require('fs');
-const posthtml = require('posthtml');
-const posthtmlWebp = require('posthtml-webp');
-
-posthtml()
-    .use(posthtmlWebp(/* Plugin options */))
-    .process(html/*, options */)
-    .then(result => fs.writeFileSync('./after.html', result.html));
-```
+Type: `boolean`  
+Default: `false`  
+Description: *Replace the extension of the source image with .webp instead of appending .webp to the original filename*  
+Example: `image.jpg => image.webp (instead of image.jpg.webp)`
 
 ### License [MIT](LICENSE)
 

changelog.md

@@ -1,5 +1,15 @@
+## 1.3.0 (2019-09-26)
+
+* feat: multi srcset, close #5 ([b31efc6](https://github.com/posthtml/posthtml-webp/commit/b31efc6)), closes [#5](https://github.com/posthtml/posthtml-webp/issues/5)
+* docs: simple update ([cc7079e](https://github.com/posthtml/posthtml-webp/commit/cc7079e))
+* test: for issue #5 ([9b63e67](https://github.com/posthtml/posthtml-webp/commit/9b63e67)), closes [#5](https://github.com/posthtml/posthtml-webp/issues/5)
+
+
+
 ## 1.2.0 (2019-09-20)
 
+* build: bump to 1.2.0 ([e58bd0e](https://github.com/posthtml/posthtml-webp/commit/e58bd0e))
+* build: update changelog ([eee9697](https://github.com/posthtml/posthtml-webp/commit/eee9697))
 * build: update depDev ([d3543fe](https://github.com/posthtml/posthtml-webp/commit/d3543fe))
 * docs: fix typo cover ([d1c6dce](https://github.com/posthtml/posthtml-webp/commit/d1c6dce))
 * docs: update badges ([5d3901f](https://github.com/posthtml/posthtml-webp/commit/5d3901f))

lib/index.js

@@ -64,10 +64,18 @@ function getPicture (imgNode, options) {
   imgNode.skip = true
 
   var src = imgNode.attrs.src
-  if (options.replaceExtension) {
-    src = removeExtension(src)
-  }
-  src += '.webp'
+  var srcset = (imgNode.attrs.srcset || '')
+    .split(',')
+    .concat(src)
+    .filter(Boolean)
+    .map(value => {
+      value = value.trim().split(/\s/)
+      var path = options.replaceExtension ? removeExtension(value[0]) : value[0]
+      var size = value[1]
+
+      return [path + '.webp', size].filter(Boolean).join(' ')
+    })
+    .join(', ')
 
   return {
     tag: 'picture',
@@ -76,7 +84,7 @@ function getPicture (imgNode, options) {
         tag: 'source',
         attrs: {
           type: 'image/webp',
-          srcset: src
+          srcset
         }
       },
       imgNode

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "posthtml-webp",
   "description": "Add webp supporting in your html",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "author": "seokirill",
   "ava": {
     "verbose": "true"

package.json

@@ -0,0 +1,6 @@
+<!doctype html>
+<html>
+    <body>
+        <picture><source type="image/webp" srcset="photo-lg.webp 1000w, photo-md.webp 500w, photo-sm.webp 250w, photo.webp"><img srcset="photo-lg.jpg 1000w, photo-md.jpg 500w, photo-sm.jpg 250w" src="photo.png"></picture>
+    </body>
+</html>

test/fixtures/multisrcset.expected.html

@@ -0,0 +1,6 @@
+<!doctype html>
+<html>
+    <body>
+        <img srcset="photo-lg.jpg 1000w, photo-md.jpg 500w, photo-sm.jpg 250w" src="photo.png">
+    </body>
+</html>

test/fixtures/multisrcset.html

@@ -27,11 +27,17 @@ test('Default behaviour', (t) => {
   return compare(t, 'no-extension')
 })
 
+test('Multi srcset', (t) => {
+  return compare(t, 'multisrcset', {
+    replaceExtension: true
+  })
+})
+
 function compare (t, name, options) {
   const html = readFileSync(path.join(fixtures, `${name}.html`), 'utf8')
   const expected = readFileSync(path.join(fixtures, `${name}.expected.html`), 'utf8')
 
   return posthtml([plugin(options)])
     .process(html)
-    .then((res) => t.truthy(res.html === expected))
+    .then((res) => t.deepEqual(res.html, expected))
 }