Adds dimensions support to cli.js (#457)

addyosmani · Aug 18, 2020 · f67ca79 · f67ca79
1 parent d07988c
commit f67ca79
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 0 deletions.
diff --git a/cli.js b/cli.js
@@ -27,6 +27,7 @@ Options:
   -e, --extract           Extract inlined styles from referenced stylesheets
 
   --inlineImages          Inline images
+  --dimensioms            Pass dimensions e.g. 1300x900
   --ignore                RegExp, @type or selector to ignore
   --ignore-[OPTION]       Pass options to postcss-discard. See https://goo.gl/HGo5YV
   --include               RegExp, @type or selector to include
@@ -79,6 +80,10 @@ const meowOpts = {
       type: 'string',
       alias: 'ua',
     },
+    dimensions: {
+      type: 'string',
+      isMultiple: true,
+    },
   },
 };
 
@@ -193,6 +198,19 @@ function run(data) {
   // Just take the first html input as we don't support multiple html sources for
   const [input] = inputs.filter((file) => !additionalCss.includes(file)); // eslint-disable-line unicorn/prefer-array-find
 
+  if (Array.isArray(opts.dimensions)) {
+    opts.dimensions = opts.dimensions.reduce(
+      (result, data) => [
+        ...result,
+        ...data.split(',').map((dimension) => {
+          const [width, height] = dimension.split('x');
+          return {width: Number.parseInt(width, 10), height: Number.parseInt(height, 10)};
+        }),
+      ],
+      []
+    );
+  }
+
   if (Array.isArray(css)) {
     opts.css = [...css, ...additionalCss].filter((file) => file);
   } else if (css || additionalCss.length > 0) {

diff --git a/test/cli.test.js b/test/cli.test.js
@@ -168,6 +168,19 @@ describe('CLI', () => {
         expect(error.stderr).toMatch('Usage:');
       }
     });
+
+    test('Generate multi-dimension critical-path CSS using cli', async () => {
+      const {stdout} = await pipe(path.normalize('fixtures/generate-adaptive.html'), [
+        '--base',
+        'fixtures',
+        '--dimensions',
+        '100x70',
+        '--dimensions',
+        '1000x70',
+      ]);
+      const expected = await read('expected/generate-adaptive.css', 'utf8');
+      expect(nn(stdout)).toBe(expected);
+    });
   });
 
   let exit;
@@ -214,6 +227,12 @@ describe('CLI', () => {
         'assetPath1',
         '--assetPaths',
         'assetPath2',
+        '--dimensions',
+        '1300x800',
+        '--dimensions',
+        '640x480',
+        '--dimensions',
+        '1x2,3x4,5x6',
       ]);
 
       expect(args).toMatchObject({
@@ -222,6 +241,13 @@ describe('CLI', () => {
         css: ['css'],
         inline: true,
         extract: true,
+        dimensions: [
+          {width: 1300, height: 800},
+          {width: 640, height: 480},
+          {width: 1, height: 2},
+          {width: 3, height: 4},
+          {width: 5, height: 6},
+        ],
       });
     });