lint

Author: Yankovsky

example/react-entry.tsx

@@ -32,10 +32,7 @@ ReactDOM.render(
     <PictureSmart requireImages={differentBreakpoints} alt="Image with different breakpoints" />
 
     <h3>Image without resize</h3>
-    <PictureSmart
-      requireImages={imageWithoutResize}
-      alt="Image without resize"
-    />
+    <PictureSmart requireImages={imageWithoutResize} alt="Image without resize" />
 
     <h2>As background css</h2>
 

src/utils/__tests__/getCompressionRatio.ts

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

src/utils/__tests__/getOriginalExtensionSrcSet.ts

@@ -1,20 +1,22 @@
 import { getOriginalExtensionSrcSet } from '../index';
 
-
 test('Pixel ratios 1x, path "/images/mayImages.png"', () => {
-  expect(
-    getOriginalExtensionSrcSet(['1x'],'/images/mayImages.png'),
-  ).toStrictEqual({"1x": '/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'});
+  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'});
+  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,31 @@ 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']}); }`);
-      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']}); }`);
+      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(' ')}
-  ${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(' ')} }`:''}
+  ${
+    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/getOriginal.ts

@@ -1,6 +1,6 @@
 import { BreakpointSource } from '../types';
 
-export const getOriginal = (source: BreakpointSource) => {
+export const getOriginal = (source: BreakpointSource): string => {
   const srcSet = source.srcSets[source.srcSets.length - 1].srcSet;
 
   return srcSet['3x'] || srcSet['2x'] || srcSet['1x'];

src/utils/getOriginalExtensionSrcSet.ts

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

src/webpack/loader.ts

@@ -76,7 +76,7 @@ export const loader = function (this: webpack.loader.LoaderContext, source: stri
       srcSets: [
         {
           extension: originalExtension,
-          srcSet: getOriginalExtensionSrcSet(pixelRatios,outputImagePath),
+          srcSet: getOriginalExtensionSrcSet(pixelRatios, outputImagePath),
         },
       ],
     };

src/webpack/loaderOptionsSchema.ts

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