[FEATURE] add image dimensions module to css pipeline

core/tasks/css.js

@@ -13,6 +13,7 @@ const scss = require('postcss-scss');
 const postcssSass = require('@csstools/postcss-sass');
 const browserSync = require('browser-sync');
 const InlineSvg = require('@sgalinski/inline-svg');
+const ImageDimensions = require('@sgalinski/image-dimensions');
 
 /**
  * The CSS task takes care of compiling Sass and running the CSS QA tasks
@@ -108,9 +109,11 @@ module.exports = class Css extends Task {
 			precision: 8
 		});
 
+		let cssString = this._imageDimensions(compiledSass.css.toString());
+
 		let postProcessedCss = await postcss([
 			autoprefixer
-		]).process(compiledSass.css, {
+		]).process(cssString, {
 			from: _input,
 			to: _output,
 			map: {
@@ -169,4 +172,15 @@ module.exports = class Css extends Task {
 		return this._writeFile(partialFilePath, svgPartial);
 	}
 
+	/**
+	 * Runs the whole CSS through the image dimensions module
+	 * 
+	 * @param {String} _source The CSS as a string
+	 */
+	_imageDimensions(_source) {
+		let newSource = new ImageDimensions(_source, {
+			imageBasePath: this._getFullPath(this._config.directories.images)
+		}).process();
+		return newSource;
+	}
 }

package-lock.json

@@ -1683,6 +1683,14 @@
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.1.tgz",
       "integrity": "sha512-KU/VDjC5RwtDUZiz3d+DHXJF2lp5hB9dn552TXIyptj8SH1vXmR40mG0JgGq03IlYsOgGfcv8xrLpSQ0YUMQdA=="
     },
+    "@sgalinski/image-dimensions": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@sgalinski/image-dimensions/-/image-dimensions-1.0.0.tgz",
+      "integrity": "sha512-FILK5GVgvKhNl1s4cMjkRZFXE4kbAC5RGUnf3KgJUxSJRkBeebPrcGpuXJNr2oni2oEc2Dln6GPyUGM/bmeQng==",
+      "requires": {
+        "image-size": "^0.6.3"
+      }
+    },
     "@sgalinski/inline-svg": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@sgalinski/inline-svg/-/inline-svg-1.0.2.tgz",
@@ -6648,6 +6656,11 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-3.3.10.tgz",
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug=="
     },
+    "image-size": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.3.tgz",
+      "integrity": "sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA=="
+    },
     "imagemin": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/imagemin/-/imagemin-6.0.0.tgz",

package.json

@@ -19,6 +19,7 @@
     "@babel/polyfill": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@csstools/postcss-sass": "^2.0.0",
+    "@sgalinski/image-dimensions": "^1.0.0",
     "@sgalinski/inline-svg": "^1.0.2",
     "autoprefixer": "^9.1.3",
     "babelify": "^9.0.0",