From adda17c1af52e1ee240e4372a4d6184fe0151b98 Mon Sep 17 00:00:00 2001 From: Nicolas Date: Wed, 11 Oct 2017 13:35:01 +0200 Subject: [PATCH] Fix issue incorrect paths for fonts. Add methods to Use relative paths --- css/style_with_fonts.scss | 9 + fixtures/fonts/Roboto.svg | 643 ++++++++++++++++++++++++++++++++++++++ index.js | 12 + lib/WebpackConfig.js | 38 +++ lib/config-generator.js | 4 +- test/functional.js | 45 +++ 6 files changed, 749 insertions(+), 2 deletions(-) create mode 100644 css/style_with_fonts.scss create mode 100644 fixtures/fonts/Roboto.svg diff --git a/css/style_with_fonts.scss b/css/style_with_fonts.scss new file mode 100644 index 00000000..590236ea --- /dev/null +++ b/css/style_with_fonts.scss @@ -0,0 +1,9 @@ +$font-path: '../fonts'; + +@font-face { + font-family: 'Roboto'; + src:url('#{$font-path}/Roboto.woff2') format('woff2'), + url('#{$font-path}/Roboto.svg') format('svg'); + font-weight: normal; + font-style: normal; +} diff --git a/fixtures/fonts/Roboto.svg b/fixtures/fonts/Roboto.svg new file mode 100644 index 00000000..417a2a9e --- /dev/null +++ b/fixtures/fonts/Roboto.svg @@ -0,0 +1,643 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.js b/index.js index 404a0a48..8f1ceda1 100644 --- a/index.js +++ b/index.js @@ -75,6 +75,18 @@ const publicApi = { return this; }, + setFontsPublicPath(publicPath) { + webpackConfig.setFontsPublicPath(publicPath); + + return this; + }, + + setImagesPublicPath(publicPath) { + webpackConfig.setImagesPublicPath(publicPath); + + return this; + }, + /** * Used as a prefix to the *keys* in manifest.json. Not usually needed. * diff --git a/lib/WebpackConfig.js b/lib/WebpackConfig.js index 3e89a013..43e2642f 100644 --- a/lib/WebpackConfig.js +++ b/lib/WebpackConfig.js @@ -41,6 +41,8 @@ class WebpackConfig { // Global settings this.outputPath = null; this.publicPath = null; + this.imagesPublicPath = null; + this.fontsPublicPath = null; this.manifestKeyPrefix = null; this.sharedCommonsEntryName = null; this.providedVariables = {}; @@ -133,6 +135,22 @@ class WebpackConfig { this.publicPath = publicPath; } + setFontsPublicPath(publicPath) { + // guarantee a single trailing slash + publicPath = publicPath.replace(/\/$/,''); + publicPath = publicPath + '/'; + + this.fontsPublicPath = publicPath; + } + + setImagesPublicPath(publicPath) { + // guarantee a single trailing slash + publicPath = publicPath.replace(/\/$/,''); + publicPath = publicPath + '/'; + + this.imagesPublicPath = publicPath; + } + setManifestKeyPrefix(manifestKeyPrefix) { /* * Normally, we make sure that the manifest keys don't start @@ -226,6 +244,26 @@ class WebpackConfig { return this.runtimeConfig.devServerUrl.replace(/\/$/,'') + this.publicPath; } + getFontsPublicPath() { + // if we're using webpack-dev-server, use it & add the publicPath + if (this.useDevServer()) { + // avoid 2 middle slashes + return this.runtimeConfig.devServerUrl.replace(/\/$/,'') + this.publicPath; + } else { + return this.fontsPublicPath; + } + } + + getImagesPublicPath() { + // if we're using webpack-dev-server, use it & add the publicPath + if (this.useDevServer()) { + // avoid 2 middle slashes + return this.runtimeConfig.devServerUrl.replace(/\/$/,'') + this.publicPath; + } else { + return this.imagesPublicPath; + } + } + addEntry(name, src) { if (this.entries.has(name)) { throw new Error(`Duplicate name "${name}" passed to addEntry(): entries must be unique.`); diff --git a/lib/config-generator.js b/lib/config-generator.js index b4d9a135..d1f546f1 100644 --- a/lib/config-generator.js +++ b/lib/config-generator.js @@ -148,7 +148,7 @@ class ConfigGenerator { loader: 'file-loader', options: { name: filename, - publicPath: this.webpackConfig.getRealPublicPath() + publicPath: this.webpackConfig.getImagesPublicPath() } }); } @@ -165,7 +165,7 @@ class ConfigGenerator { loader: 'file-loader', options: { name: filename, - publicPath: this.webpackConfig.getRealPublicPath() + publicPath: this.webpackConfig.getFontsPublicPath() } }); } diff --git a/test/functional.js b/test/functional.js index 0330bffd..f94dc8b6 100644 --- a/test/functional.js +++ b/test/functional.js @@ -486,6 +486,51 @@ describe('Functional tests using webpack', function() { }); }); + it('setFontsPublicPath() generates relativePath for fonts', (done) => { + const config = createWebpackConfig('www/build', 'dev'); + config.setPublicPath('/build'); + config.addStyleEntry('css/style', './css/style_with_fonts.scss'); + config.setFontsPublicPath('../'); + config.enableSassLoader(); + + testSetup.runWebpack(config, (webpackAssert) => { + webpackAssert.assertManifestPath( + 'build/css/style.css', + '/build/css/style.css' + ); + + webpackAssert.assertOutputFileContains( + 'css/style.css', + 'src: url(../fonts/Roboto.woff2) format("woff2"), url(/build/images/Roboto.svg) format("svg");' + ); + + done(); + }); + }); + + it('setImagesPublicPath() generates relativePath for images', (done) => { + const config = createWebpackConfig('www/build', 'dev'); + config.setPublicPath('/build'); + config.addStyleEntry('css/style', './css/style_with_fonts.scss'); + config.setFontsPublicPath('../'); + config.setImagesPublicPath('../'); + config.enableSassLoader(); + + testSetup.runWebpack(config, (webpackAssert) => { + webpackAssert.assertManifestPath( + 'build/css/style.css', + '/build/css/style.css' + ); + + webpackAssert.assertOutputFileContains( + 'css/style.css', + 'src: url(../fonts/Roboto.woff2) format("woff2"), url(../images/Roboto.svg) format("svg");' + ); + + done(); + }); + }); + it('enableSourceMaps() adds to .js, css & scss', (done) => { const config = createWebpackConfig('www/build', 'dev'); config.setPublicPath('/build');