Add image-size functions. Fixes #1378

Author: lukeapage

lib/less-node/image-size.js

@@ -0,0 +1,34 @@
+var Dimension = require("../less/tree/dimension"),
+	Expression = require("../less/tree/expression"),
+	functionRegistry = require("./../less/functions/function-registry"),
+	path = require("path");
+
+function imageSize(filePathNode) {
+	var filePath = filePathNode.value;
+	var currentDirectory = filePathNode.currentFileInfo.relativeUrls ?
+		filePathNode.currentFileInfo.currentDirectory : filePathNode.currentFileInfo.entryPath;
+
+	var sizeOf = require('image-size');
+	filePath = path.join(currentDirectory, filePath);
+	return sizeOf(filePath);
+}
+
+var imageFunctions = {
+	"image-size": function(filePathNode) {
+		var size = imageSize(filePathNode);
+		return new Expression([
+			new Dimension(size.width, "px"),
+			new Dimension(size.height, "px")
+		]);
+	},
+	"image-width": function(filePathNode) {
+		var size = imageSize(filePathNode);
+		return new Dimension(size.width, "px");
+	},
+	"image-height": function(filePathNode) {
+		var size = imageSize(filePathNode);
+		return new Dimension(size.height, "px");
+	}
+};
+
+functionRegistry.addMultiple(imageFunctions);

lib/less-node/index.js

@@ -68,4 +68,7 @@ less.writeError = function (ctx, options) {
     console.error(less.formatError(ctx, options));
 };
 
+// provide image-size functionality
+require('./image-size');
+
 module.exports = less;

package.json

@@ -45,7 +45,8 @@
     "request": "^2.48.0",
     "mkdirp": "^0.5.0",
     "source-map": "^0.1.x",
-    "promise": "^6.0.1"
+    "promise": "^6.0.1",
+    "image-size": "~0.3.5"
   },
   "devDependencies": {
     "diff": "^1.0",

test/css/urls.css

@@ -66,9 +66,12 @@
   uri-1: url("data:text/html,%3Ch1%3EThis%20page%20is%20100%25%20Awesome.%3C%2Fh1%3E%0A");
   uri-2: url("data:text/html,%3Ch1%3EThis%20page%20is%20100%25%20Awesome.%3C%2Fh1%3E%0A");
 }
-#data-uri-toobig {
+#file-functions {
   uri: url('../data/data-uri-fail.png');
   svg-not-base-64: url("data:image/svg+xml,%3Csvg%20height%3D%22100%22%20width%3D%22100%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E");
+  size: 640px 430px;
+  width: 640px;
+  height: 430px;
 }
 #svg-functions {
   background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3ClinearGradient%20id%3D%22gradient%22%20gradientUnits%3D%22userSpaceOnUse%22%20x1%3D%220%25%22%20y1%3D%220%25%22%20x2%3D%220%25%22%20y2%3D%22100%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23000000%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23ffffff%22%2F%3E%3C%2FlinearGradient%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221%22%20height%3D%221%22%20fill%3D%22url(%23gradient)%22%20%2F%3E%3C%2Fsvg%3E');

test/less/urls.less

@@ -57,9 +57,12 @@
   uri-2: data-uri('../data/page.html');
 }
 
-#data-uri-toobig {
+#file-functions {
   uri: data-uri('../data/data-uri-fail.png');
   svg-not-base-64: data-uri('../data/image.svg');
+  size: image-size('../data/data-uri-fail.png');
+  width: image-width('../data/data-uri-fail.png');
+  height: image-height('../data/data-uri-fail.png');
 }
 .add_an_import(@file_to_import) {
 @import "@{file_to_import}";