From 253a3173cdd368f93a599dd256780949b9a5dbc3 Mon Sep 17 00:00:00 2001 From: Remy Sharp Date: Sun, 22 May 2016 14:45:52 +0100 Subject: [PATCH] fix: wrap all CSS data urls in quotes This ensures that if SVG is used as a background, it doesn't get corrupted. Fixes #97 Fixes #96 --- lib/css.js | 15 +++++++++------ lib/tasks/styles.js | 2 +- test/fixtures/circle.svg | 11 +++++++++++ test/fixtures/css-ext-import.result.html | 2 +- test/fixtures/css-ext.result.html | 2 +- test/fixtures/css-import.result.html | 2 +- test/fixtures/image-css.result.html | 2 +- test/fixtures/image-style-attr.result.html | 2 +- test/fixtures/image-style-attr.src.html | 2 +- .../inline-skip-absolute-urls.result.html | 2 +- test/fixtures/kitchen-sink.result.html | 2 +- test/fixtures/svg-bg.result.html | 1 + test/fixtures/svg-bg.src.html | 17 +++++++++++++++++ 13 files changed, 47 insertions(+), 15 deletions(-) create mode 100644 test/fixtures/circle.svg create mode 100644 test/fixtures/svg-bg.result.html create mode 100644 test/fixtures/svg-bg.src.html diff --git a/lib/css.js b/lib/css.js index 5550660..1ebc438 100644 --- a/lib/css.js +++ b/lib/css.js @@ -10,12 +10,13 @@ var debug = require('debug')('inliner'); function getImages(root, css) { var inliner = this; - var singleURLMatch = /url\(\s*(?:['"]*)(?!['"]*data:)(.*?)(?:['"]*)\s*\)/; + var singleURLMatch = /url\(\s*(['"]*)(?!['"]*data:)(.*?)(['"]*)\s*\)/; var matches = css.match(match) || []; var images = matches.map(function eachURL(url) { - var source = url.match(singleURLMatch)[1]; + var match = url.match(singleURLMatch); + var source = match[2]; return { - source: source, + source: match.input, resolved: inliner.resolve(root, source), }; }); @@ -26,9 +27,7 @@ function getImages(root, css) { return Promise.all(images.map(function map(url) { return inliner.image(url.resolved).then(function then(dataURL) { inliner.jobs.done.images(); - css = css.replace(new RegExp(url.source, 'g'), function replace() { - return dataURL; - }); + css = replace(css, url.source, 'url("' + dataURL + '")'); return css; }); })).then(function then() { @@ -36,6 +35,10 @@ function getImages(root, css) { }); } +function replace(body, source, target) { + return body.split(source).join(target); +} + function getImports(root, css) { // change to a string in case the CSS is a buffer, which is the case // when we're reading off the local file system diff --git a/lib/tasks/styles.js b/lib/tasks/styles.js index 2bfbd32..8596264 100644 --- a/lib/tasks/styles.js +++ b/lib/tasks/styles.js @@ -12,4 +12,4 @@ function resolve(inliner, todo, $) { $(style).text(css); }); }); -} \ No newline at end of file +} diff --git a/test/fixtures/circle.svg b/test/fixtures/circle.svg new file mode 100644 index 0000000..a7f411f --- /dev/null +++ b/test/fixtures/circle.svg @@ -0,0 +1,11 @@ + + + + circle + + + + + + + diff --git a/test/fixtures/css-ext-import.result.html b/test/fixtures/css-ext-import.result.html index 9004549..7e4c885 100644 --- a/test/fixtures/css-ext-import.result.html +++ b/test/fixtures/css-ext-import.result.html @@ -1 +1 @@ - App body + App body diff --git a/test/fixtures/css-ext.result.html b/test/fixtures/css-ext.result.html index f217f98..0dc8565 100644 --- a/test/fixtures/css-ext.result.html +++ b/test/fixtures/css-ext.result.html @@ -1 +1 @@ - External script + css + External script + css diff --git a/test/fixtures/css-import.result.html b/test/fixtures/css-import.result.html index 3c2b65a..19ea7cb 100644 --- a/test/fixtures/css-import.result.html +++ b/test/fixtures/css-import.result.html @@ -1 +1 @@ - inline style + inline style diff --git a/test/fixtures/image-css.result.html b/test/fixtures/image-css.result.html index 6d71674..0c9ae05 100644 --- a/test/fixtures/image-css.result.html +++ b/test/fixtures/image-css.result.html @@ -1 +1 @@ - css image
+ css image
diff --git a/test/fixtures/image-style-attr.result.html b/test/fixtures/image-style-attr.result.html index 35e0e20..0434141 100644 --- a/test/fixtures/image-style-attr.result.html +++ b/test/fixtures/image-style-attr.result.html @@ -1 +1 @@ - css image in style attr
\ No newline at end of file + css image in style attr
diff --git a/test/fixtures/image-style-attr.src.html b/test/fixtures/image-style-attr.src.html index f1db605..e66f3f5 100644 --- a/test/fixtures/image-style-attr.src.html +++ b/test/fixtures/image-style-attr.src.html @@ -10,4 +10,4 @@
- \ No newline at end of file + diff --git a/test/fixtures/inline-skip-absolute-urls.result.html b/test/fixtures/inline-skip-absolute-urls.result.html index 1bedc8e..4bc249a 100644 --- a/test/fixtures/inline-skip-absolute-urls.result.html +++ b/test/fixtures/inline-skip-absolute-urls.result.html @@ -1 +1 @@ - no remote inline + no remote inline diff --git a/test/fixtures/kitchen-sink.result.html b/test/fixtures/kitchen-sink.result.html index f75aea0..b656feb 100644 --- a/test/fixtures/kitchen-sink.result.html +++ b/test/fixtures/kitchen-sink.result.html @@ -1 +1 @@ - full combo
+ full combo
diff --git a/test/fixtures/svg-bg.result.html b/test/fixtures/svg-bg.result.html new file mode 100644 index 0000000..a36beb6 --- /dev/null +++ b/test/fixtures/svg-bg.result.html @@ -0,0 +1 @@ + circle.svg bg
diff --git a/test/fixtures/svg-bg.src.html b/test/fixtures/svg-bg.src.html new file mode 100644 index 0000000..1a5aa94 --- /dev/null +++ b/test/fixtures/svg-bg.src.html @@ -0,0 +1,17 @@ + + + + + + circle.svg bg + + + +
+ +