Merge pull request #184 from assetgraph/feature/backToCanvas

Switch back to the canvas module, support node 11

Author: papandreou

.travis.yml

@@ -1,18 +1,19 @@
 language: node_js
 node_js:
   - '8'
-  - '9'
+  - '10'
+  - 'node'
 cache:
   directories:
     - node_modules
 
-script: "npm run-script travis"
-after_success: "<coverage/lcov.info ./node_modules/coveralls/bin/coveralls.js"
+script: 'npm run-script travis'
+after_success: '<coverage/lcov.info ./node_modules/coveralls/bin/coveralls.js'
 
 notifications:
   webhooks:
     urls:
       - https://webhooks.gitter.im/e/8480136ea087dfae1908
-    on_success: change  # options: [always|never|change] default: always
-    on_failure: always  # options: [always|never|change] default: always
-    on_start: false     # default: false
+    on_success: change # options: [always|never|change] default: always
+    on_failure: always # options: [always|never|change] default: always
+    on_start: false # default: false

lib/spriteBackgroundImages.js

@@ -1,7 +1,7 @@
 const queryString = require('querystring');
 const { promisify } = require('util');
 const packers = require('./packers');
-const { Canvas, Image } = require('canvas-prebuilt');
+const { Canvas, Image } = require('canvas');
 
 // Helper for extracting all nodes defining a specific property from a postcss rule
 function getProperties(container, propertyName) {
@@ -11,14 +11,7 @@ function getProperties(container, propertyName) {
 async function getCanvasImageFromImageAsset(imageAsset) {
   const canvasImage = new Image();
   await new Promise((resolve, reject) => {
-    canvasImage.onerror = err => {
-      if (err.message.includes('node-canvas was built without SVG support')) {
-        err.message = 'Adding SVG images to a sprite is not possible';
-      }
-
-      err.message += ` (${imageAsset.urlOrDescription})`;
-      reject(err);
-    };
+    canvasImage.onerror = err => reject(err);
     canvasImage.onload = resolve;
     canvasImage.src = imageAsset.rawSrc;
   });
@@ -27,7 +20,19 @@ async function getCanvasImageFromImageAsset(imageAsset) {
 
 async function getImageAssetFromCanvas(canvas, assetType, assetGraph) {
   if (assetType === 'Png') {
-    const rawSrc = await promisify(cb => canvas.toBuffer(cb))();
+    let rawSrc;
+    try {
+      rawSrc = await promisify(cb => canvas.toBuffer(cb))();
+    } catch (err) {
+      if (
+        err.message.includes(
+          'the surface type is not appropriate for the operation'
+        )
+      ) {
+        err.message += ' (are you trying to add an SVG to a sprite?)';
+      }
+      throw err;
+    }
     return {
       type: 'Png',
       rawSrc

package.json

@@ -41,7 +41,7 @@
   },
   "main": "lib/spriteBackgroundImages.js",
   "dependencies": {
-    "canvas-prebuilt": "2.0.0-alpha.14"
+    "canvas": "^2.3.1"
   },
   "nyc": {
     "include": [

test/spriteBackgroundImages.js

@@ -530,7 +530,7 @@ describe('spriteBackgroundImages', () => {
     await expect(
       assetGraph.queue(spriteBackgroundImages()),
       'to be rejected with',
-      /Adding SVG images to a sprite is not possible/
+      /are you trying to add an SVG to a sprite/
     );
   });
 });