From c068201a99b228ba2a553f520c43689bd2d680b9 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Sun, 16 Jan 2022 18:46:43 -0500 Subject: [PATCH 01/11] Preserve quotes in url dependencies to avoid escaping issues --- packages/core/integration-tests/test/css.js | 21 +++++++++++-------- .../core/integration-tests/test/javascript.js | 6 +++--- .../core/integration-tests/test/postcss.js | 2 +- packages/core/integration-tests/test/sass.js | 6 +++--- packages/core/integration-tests/test/svg.js | 4 ++-- .../transformers/css/src/CSSTransformer.js | 5 +++-- 6 files changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/core/integration-tests/test/css.js b/packages/core/integration-tests/test/css.js index 2b4d1d2fad2..cbc257b67d6 100644 --- a/packages/core/integration-tests/test/css.js +++ b/packages/core/integration-tests/test/css.js @@ -163,17 +163,20 @@ describe('css', () => { path.join(distDir, 'index.css'), 'utf8', ); - assert(/url\(test\.[0-9a-f]+\.woff2\)/.test(css)); - assert(css.includes('url(http://google.com)')); + assert(/url\("test\.[0-9a-f]+\.woff2"\)/.test(css)); + assert(css.includes('url("http://google.com")')); assert(css.includes('.index')); - assert(css.includes('url(data:image/gif;base64,quotes)')); + assert(css.includes('url("data:image/gif;base64,quotes")')); assert(css.includes('.quotes')); - assert(css.includes('url(data:image/gif;base64,no-quote)')); + assert(css.includes('url("data:image/gif;base64,no-quote")')); assert(css.includes('.no-quote')); assert( await outputFS.exists( - path.join(distDir, css.match(/url\((test\.[0-9a-f]+\.woff2)\)/)[1]), + path.join( + distDir, + css.match(/url\("(test\.[0-9a-f]+\.woff2)"\)/)[1], + ), ), ); }); @@ -217,9 +220,9 @@ describe('css', () => { ); assert(css.includes('url(http://google.com)'), 'url() found'); assert(css.includes('.index'), '.index found'); - assert(css.includes('url(data:image/gif;base64,quotes)')); + assert(/url\("?data:image\/gif;base64,quotes"?\)/.test(css)); assert(css.includes('.quotes')); - assert(css.includes('url(data:image/gif;base64,no-quote)')); + assert(/url\("?data:image\/gif;base64,no-quote"?\)/.test(css)); assert(css.includes('.no-quote')); assert( @@ -362,7 +365,7 @@ describe('css', () => { assert.equal( css.trim(), `.svg-img { - background-image: url(data:image/svg+xml,%3Csvg%20width%3D%22120%22%20height%3D%22120%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cfilter%20id%3D%22blur-_.%21~%2a%22%3E%0A%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%225%22%3E%3C%2FfeGaussianBlur%3E%0A%20%20%3C%2Ffilter%3E%0A%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2250%22%20fill%3D%22green%22%20filter%3D%22url%28%27%23blur-_.%21~%2a%27%29%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A); + background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22120%22%20height%3D%22120%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cfilter%20id%3D%22blur-_.%21~%2a%22%3E%0A%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%225%22%3E%3C%2FfeGaussianBlur%3E%0A%20%20%3C%2Ffilter%3E%0A%20%20%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2250%22%20fill%3D%22green%22%20filter%3D%22url%28%27%23blur-_.%21~%2a%27%29%22%3E%3C%2Fcircle%3E%0A%3C%2Fsvg%3E%0A"); }`, ); }); @@ -375,7 +378,7 @@ describe('css', () => { ); assert( css.startsWith(`.webp-img { - background-image: url(data:image/webp;base64,UklGR`), + background-image: url("data:image/webp;base64,UklGR`), ); }); diff --git a/packages/core/integration-tests/test/javascript.js b/packages/core/integration-tests/test/javascript.js index af5963efeb5..dda211e5016 100644 --- a/packages/core/integration-tests/test/javascript.js +++ b/packages/core/integration-tests/test/javascript.js @@ -4108,7 +4108,7 @@ describe('javascript', function () { } .svg-img { - background-image: url(data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A); + background-image: url("data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A"); }`, ), ); @@ -4150,7 +4150,7 @@ describe('javascript', function () { } .svg-img { - background-image: url(data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A); + background-image: url("data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A"); }`, ), ); @@ -4238,7 +4238,7 @@ describe('javascript', function () { } .svg-img { - background-image: url(data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A); + background-image: url("data:image/svg+xml,%3Csvg%3E%0A%0A%3C%2Fsvg%3E%0A"); }`, ), ); diff --git a/packages/core/integration-tests/test/postcss.js b/packages/core/integration-tests/test/postcss.js index 6067eaac8aa..877f64be089 100644 --- a/packages/core/integration-tests/test/postcss.js +++ b/packages/core/integration-tests/test/postcss.js @@ -66,7 +66,7 @@ describe('postcss', () => { let css = await outputFS.readFile(path.join(distDir, 'index.css'), 'utf8'); - assert(css.includes('url(data:image/gif;base64,quotes)')); + assert(css.includes('url("data:image/gif;base64,quotes")')); }); it('should automatically install postcss plugins if needed', async () => { diff --git a/packages/core/integration-tests/test/sass.js b/packages/core/integration-tests/test/sass.js index 136dab9c3d9..6d6b0426207 100644 --- a/packages/core/integration-tests/test/sass.js +++ b/packages/core/integration-tests/test/sass.js @@ -132,13 +132,13 @@ describe('sass', function () { assert.equal(output(), 2); let css = await outputFS.readFile(path.join(distDir, 'index.css'), 'utf8'); - assert(/url\(test\.[0-9a-f]+\.woff2\)/.test(css)); - assert(css.includes('url(http://google.com)')); + assert(/url\("test\.[0-9a-f]+\.woff2"\)/.test(css)); + assert(css.includes('url("http://google.com")')); assert(css.includes('.index')); assert( await outputFS.exists( - path.join(distDir, css.match(/url\((test\.[0-9a-f]+\.woff2)\)/)[1]), + path.join(distDir, css.match(/url\("(test\.[0-9a-f]+\.woff2)"\)/)[1]), ), ); }); diff --git a/packages/core/integration-tests/test/svg.js b/packages/core/integration-tests/test/svg.js index a609b08311a..dd44e8dd6ec 100644 --- a/packages/core/integration-tests/test/svg.js +++ b/packages/core/integration-tests/test/svg.js @@ -189,9 +189,9 @@ describe('svg', function () { assert(svg.includes(':root {\n fill: red;\n}')); assert( svg.includes( - `"fill: url(${path.basename( + `"fill: url("${path.basename( b.getBundles().find(b => b.name.startsWith('gradient')).filePath, - )}#myGradient)"`, + )}#myGradient")`, ), ); assert(svg.includes('