feat(viewports): Add support for custom pixel densities (#25)

Author: brianokeefe

README.md

@@ -110,6 +110,14 @@ $ html-sketchapp --viewports.Desktop 1024x768 --viewports.Mobile 320x568 --file
 
 If multiple screen sizes are provided, the viewport name will be being appended to all symbol and text style names. For example, `Button/Primary` will be exported as `Button/Primary/Desktop` and `Button/Primary/Mobile`.
 
+Optionally, you can set the pixel density for a given viewport by adding an `@` followed by the desired scaling factor to the end of the viewport's resolution. For example, you can simulate a 1.5x and 2x display like so:
+
+```bash
+$ html-sketchapp --viewports.HigherDensity [email protected] --viewports.Retina 1024x768@2 --file sketch.html --out-dir dist
+```
+
+If no scaling factor is provided, a default of `1` will be used.
+
 ### Puppeteer args
 
 If you need to provide command line arguments to the browser instance via [Puppeteer](https://github.com/GoogleChrome/puppeteer), you can provide the `puppeteer-args` option.

bin/cli.js

@@ -96,8 +96,10 @@ require('yargs')
           for (const viewportName in viewports) {
             if (viewports.hasOwnProperty(viewportName)) {
               const viewport = viewports[viewportName];
-              const [ width, height ] = viewport.split('x').map(x => parseInt(x, 10));
-              await page.setViewport({ width, height });
+              const [ size, scale ] = viewport.split('@');
+              const [ width, height ] = size.split('x').map(x => parseInt(x, 10));
+              const deviceScaleFactor = typeof scale === 'undefined' ? 1 : parseFloat(scale);
+              await page.setViewport({ width, height, deviceScaleFactor });
               await page.evaluate(`generateAlmostSketch.snapshotTextStyles({ suffix: "${hasViewports ? `/${viewportName}` : ''}" })`);
               await page.evaluate(`generateAlmostSketch.snapshotSymbols({ suffix: "${hasViewports ? `/${viewportName}` : ''}" })`);
             }