COM-2479:

- refactoring backgroundCss, add tests
- add tests getCompressionRatio
- add getOriginalExtensionSrcSet, add test
- refactoring dev mode
- originalPixelRatio typing refactoring

Author: vkosinov

src/utils/__tests__/backgroundCss.ts

@@ -397,3 +397,34 @@ test('backgroundCss multiple breakpoints, png and webp', () => {
   }
 }`);
 });
+
+test('backgroundCss all breakpoints, png and webp, one pixel ratio', () => {
+  expect(
+    backgroundCss('.my-selector', [
+      {
+        breakpointMedia: null,
+        srcSets: [
+          {
+            extension: 'png',
+            srcSet: {
+              '1x': '/mobile.all.1x.png',
+            },
+          },
+          {
+            extension: 'webp',
+            srcSet: {
+              '1x': '/mobile.all.1x.webp',
+            },
+          },
+        ],
+      },
+    ]),
+  ).toBeSameCss(`
+  .my-selector {
+    background-image: url(/mobile.all.1x.png);
+  }
+  html.webp .my-selector {
+    background-image: url(/mobile.all.1x.webp);
+  }
+`);
+});

src/utils/__tests__/getCompressionRatio.ts

@@ -0,0 +1,20 @@
+import { getCompressionRatio } from '../index';
+
+
+test('Pixel ratios 1x', () => {
+  expect(
+    getCompressionRatio(['1x']),
+  ).toStrictEqual({"1x": 0});
+});
+
+test('Pixel ratios 1x, 2x', () => {
+  expect(
+    getCompressionRatio(['1x','2x']),
+  ).toStrictEqual({"1x": 0.5, "2x": 0});
+});
+
+test('Pixel ratios 1x, 2x, 3x', () => {
+  expect(
+    getCompressionRatio(['1x','2x', '3x']),
+  ).toStrictEqual({"1x": 0.3333333333333333, "2x": 0.6666666666666666, "3x": 0});
+});

src/utils/__tests__/getOriginalExtensionSrcSet.ts

@@ -0,0 +1,20 @@
+import { getOriginalExtensionSrcSet } from '../index';
+
+
+test('Pixel ratios 1x, path "/images/mayImages.png"', () => {
+  expect(
+    getOriginalExtensionSrcSet(['1x'],'/images/mayImages.png'),
+  ).toStrictEqual({"1x": '/images/mayImages.png'});
+});
+
+test('Pixel ratios 1x, 2x, path "/images/mayImages.png"', () => {
+  expect(
+    getOriginalExtensionSrcSet(['1x','2x'],'/images/mayImages.png'),
+  ).toStrictEqual({"1x": '/images/mayImages.png', "2x": '/images/mayImages.png'});
+});
+
+test('Pixel ratios 1x, 2x, 3x, path "/images/mayImages.png"', () => {
+  expect(
+    getOriginalExtensionSrcSet(['1x','2x','3x'],'/images/mayImages.png'),
+  ).toStrictEqual({"1x": '/images/mayImages.png', "2x": '/images/mayImages.png', "3x": '/images/mayImages.png'});
+});

src/utils/backgroundCss.ts

@@ -17,17 +17,17 @@ const srcSetCss = (selector: string, sources: ExtensionSrcSet[]): string => {
     (acc, source) => {
       const finalSelector = getSelector(selector, source.extension);
       acc['1x'].push(`${finalSelector} { background-image: url(${source.srcSet['1x']}); }`);
-      acc['2x'].push(`${finalSelector} { background-image: url(${source.srcSet['2x']}); }`);
-      acc['3x'].push(`${finalSelector} { background-image: url(${source.srcSet['3x']}); }`);
+      source.srcSet['2x'] && acc['2x'].push(`${finalSelector} { background-image: url(${source.srcSet['2x']}); }`);
+      source.srcSet['3x'] && acc['3x'].push(`${finalSelector} { background-image: url(${source.srcSet['3x']}); }`);
       return acc;
     },
     { '1x': [], '2x': [], '3x': [] },
   );
 
   return `
-${result['1x'].join(' ')}
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ${result['2x'].join(' ')} }
-@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { ${result['3x'].join(' ')} }
+  ${result['1x'].join(' ')}
+  ${result['2x'].length ? `@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { ${result['2x'].join(' ')} }`:''}
+  ${result['3x'].length ? ` @media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { ${result['3x'].join(' ')} }`:''}
 `;
 };
 

src/utils/getCompressionRatio.ts

@@ -1,7 +1,5 @@
 import { Dpr, CompressionRatio } from '../types';
 
-// [1x, 2x] -> {1x: 0.5, 2x: 0}
-
 export const getCompressionRatio = (pixelRatios: Dpr[]): CompressionRatio => {
   const length = pixelRatios.length;
 

src/utils/getOriginalExtensionSrcSet.ts

@@ -0,0 +1,8 @@
+import { SrcSet, Dpr } from '../types';
+
+export const getOriginalExtensionSrcSet = (pixelRatios: Dpr[], outputImagePath:string):SrcSet => {
+  return pixelRatios.reduce((acc, item ) => {
+   acc[item] = outputImagePath;
+    return acc;
+  }, {} as SrcSet);
+}

src/utils/getPixelRations.ts

@@ -8,7 +8,5 @@ export const getPixelRations = (originalPixelRatio: Dpr): Dpr[] => {
       return ['1x', '2x'];
     case '3x':
       return ['1x', '2x', '3x'];
-    default:
-      return ['1x'];
   }
 };

src/utils/index.ts

@@ -5,3 +5,4 @@ export { getSources } from './getSources';
 export { getOriginal } from './getOriginal';
 export { getPixelRations } from './getPixelRations';
 export { getCompressionRatio } from './getCompressionRatio';
+export { getOriginalExtensionSrcSet } from './getOriginalExtensionSrcSet';

src/webpack/loader.ts

@@ -6,7 +6,7 @@ import { getImgproxyUrlBuilder } from './imgproxyUrlBuilder';
 import { Breakpoint, OrderedBreakpointSource, SrcSet, Dpr } from '../types';
 import { imageUrls } from './plugin';
 import { schema } from './loaderOptionsSchema';
-import { getBreakpointMedia, getPixelRations } from '../utils';
+import { getBreakpointMedia, getPixelRations, getOriginalExtensionSrcSet } from '../utils';
 
 // Такое имя используется, если нужна одна картинка для всех разрешений
 // В таком случаем не будут сгенерированы медиа выражения для разных breakpoint'ов
@@ -30,7 +30,7 @@ export const loader = function (this: webpack.loader.LoaderContext, source: stri
 
   validateOptions(schema, options, { name: 'Imgproxy responsive loader', baseDataPath: 'options' });
 
-  const pixelRations: Dpr[] = getPixelRations(options.originalPixelRatio);
+  const pixelRatios: Dpr[] = getPixelRations(options.originalPixelRatio);
   const breakpoints: Breakpoint[] = options.breakpoints;
   // Такой результат приходит от file-loader 'module.exports = "/build/myImage/mobile.all-4b767a7b.png";'
   // Получаем оригинальное имя файла изображения (originalImageFileName = mobile.all.png)
@@ -70,28 +70,21 @@ export const loader = function (this: webpack.loader.LoaderContext, source: stri
   let webpSrcSet: SrcSet, originalExtensionSrcSet: SrcSet, data: OrderedBreakpointSource;
   // Отключает процессинг картинок, генерируется srcSet только для оригинального типа изображения
   if (options.imgproxy.disable) {
-    // TODO пока не смотрим disable
-
-    originalExtensionSrcSet = {
-      '1x': outputImagePath,
-      '2x': outputImagePath,
-      '3x': outputImagePath,
-    };
     data = {
       order,
       breakpointMedia,
       srcSets: [
         {
           extension: originalExtension,
-          srcSet: originalExtensionSrcSet,
+          srcSet: getOriginalExtensionSrcSet(pixelRatios,outputImagePath),
         },
       ],
     };
   } else {
     const buildUrlsForPixelRatios = getImgproxyUrlBuilder(options.imgproxy);
-    webpSrcSet = buildUrlsForPixelRatios(pixelRations, outputImagePath, 'webp');
+    webpSrcSet = buildUrlsForPixelRatios(pixelRatios, outputImagePath, 'webp');
     originalExtensionSrcSet = buildUrlsForPixelRatios(
-      pixelRations,
+      pixelRatios,
       outputImagePath,
       originalExtension,
     );

src/webpack/loaderOptionsSchema.ts

@@ -50,8 +50,9 @@ export const schema: JSONSchema7 = {
     },
     originalPixelRatio: {
       type: 'string',
+      pattern: "^(1x|2x|3x)$",
     },
   },
-  required: ['breakpoints', 'imgproxy'],
+  required: ['breakpoints', 'imgproxy','originalPixelRatio'],
   additionalProperties: false,
 };