Добавил возможность инлайнить мелкие растровые картинки

README.md

@@ -67,6 +67,9 @@
 4. [postcss-inline-svg](https://github.com/TrySound/postcss-inline-svg)
 5. [gulp-cleancss](https://github.com/mgcrea/gulp-cleancss) (только в режиме сборки без карт кода)
 6. [postcss-object-fit-images](https://github.com/ronik-design/postcss-object-fit-images) (в паре с [полифилом](https://github.com/bfred-it/object-fit-images))
+7. [postcss-image-inliner](https://www.npmjs.com/package/postcss-image-inliner)
+
+Для [postcss-image-inliner](https://www.npmjs.com/package/postcss-image-inliner) указано ограничение на размер файла в 10 Кб, файлы ищутся в `src/blocks/**/img_to_bg/`. Чтобы избежать конфликтов имен, добавляйте к именам изображений префикс (имя блока), например: `src/blocks/mega-block/img_to_bg/mega-block__avatar.png`
 
 
 

gulpfile.js

@@ -13,6 +13,7 @@ const atImport = require("postcss-import");
 const cleanss = require('gulp-cleancss');
 const inlineSVG = require('postcss-inline-svg');
 const objectFitImages = require('postcss-object-fit-images');
+const imageInliner = require('postcss-image-inliner');
 
 const plumber = require('gulp-plumber');
 const notify = require('gulp-notify');
@@ -48,7 +49,15 @@ let postCssPlugins = [
   }),
   atImport(),
   inlineSVG(),
-  objectFitImages()
+  objectFitImages(),
+  imageInliner({
+    // Осторожнее с именами файлов! Добавляйте имя блока как префикс к имени картинки.
+    assetPaths: [
+      'src/blocks/**/img_to_bg/',
+    ],
+    // Инлайнятся только картинки менее 10 Кб.
+    maxFileSize: 10240
+  })
 ];
 
 // Очистка папки сборки

package.json

@@ -54,6 +54,7 @@
     "imagemin-pngquant": "^5.0.0",
     "lint-staged": "^3.4.0",
     "merge-stream": "^1.0.1",
+    "postcss-image-inliner": "^1.0.6",
     "postcss-import": "^10.0.0",
     "postcss-inline-svg": "^3.0.0",
     "postcss-object-fit-images": "^1.1.2",