From c39b51e865802eaccff9bf739b27f9e63e79ab8a Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 28 Sep 2018 15:24:18 -0400 Subject: [PATCH 1/4] Correctly lookup assets when using a relative build directory --- packages/react-scripts/config/webpack.config.prod.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 0defc5f44ab..bc8c445c5b5 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -28,6 +28,9 @@ const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier'); // Webpack uses `publicPath` to determine where the app is being served from. // It requires a trailing slash, or the file assets will get an incorrect path. const publicPath = paths.servedPath; +// Some apps do not use client-side routing with pushState. +// For these, "homepage" can be set to "." to enable relative asset paths. +var shouldUseRelativeAssetPaths = publicPath === './'; // Source maps are resource heavy and can cause out of memory issue for large source files. const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; // `publicUrl` is just like `publicPath`, but we will provide it to our app @@ -52,7 +55,13 @@ const sassModuleRegex = /\.module\.(scss|sass)$/; // common function to get style loaders const getStyleLoaders = (cssOptions, preProcessor) => { const loaders = [ - MiniCssExtractPlugin.loader, + { + loader: MiniCssExtractPlugin.loader, + options: Object.assign( + {}, + shouldUseRelativeAssetPaths ? { publicPath: '../../' } : undefined + ), + }, { loader: require.resolve('css-loader'), options: cssOptions, From 06a1338f30b9b291c5313658cffb3dfe4555db1d Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 28 Sep 2018 15:26:43 -0400 Subject: [PATCH 2/4] Hah, var ... --- packages/react-scripts/config/webpack.config.prod.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index bc8c445c5b5..2c830fd86c8 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -30,7 +30,7 @@ const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier'); const publicPath = paths.servedPath; // Some apps do not use client-side routing with pushState. // For these, "homepage" can be set to "." to enable relative asset paths. -var shouldUseRelativeAssetPaths = publicPath === './'; +const shouldUseRelativeAssetPaths = publicPath === './'; // Source maps are resource heavy and can cause out of memory issue for large source files. const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; // `publicUrl` is just like `publicPath`, but we will provide it to our app From 136096fc464757af9525590e495039e9fd58426d Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 28 Sep 2018 22:53:19 -0400 Subject: [PATCH 3/4] Add e2e test for relative paths --- fixtures/smoke/relative-paths/index.test.js | 37 +++++++++++++++++++ fixtures/smoke/relative-paths/package.json | 6 +++ .../smoke/relative-paths/public/index.html | 9 +++++ fixtures/smoke/relative-paths/src/index.css | 8 ++++ fixtures/smoke/relative-paths/src/index.js | 1 + fixtures/smoke/relative-paths/src/logo.svg | 7 ++++ package.json | 1 + 7 files changed, 69 insertions(+) create mode 100644 fixtures/smoke/relative-paths/index.test.js create mode 100644 fixtures/smoke/relative-paths/package.json create mode 100644 fixtures/smoke/relative-paths/public/index.html create mode 100644 fixtures/smoke/relative-paths/src/index.css create mode 100644 fixtures/smoke/relative-paths/src/index.js create mode 100644 fixtures/smoke/relative-paths/src/logo.svg diff --git a/fixtures/smoke/relative-paths/index.test.js b/fixtures/smoke/relative-paths/index.test.js new file mode 100644 index 00000000000..1f367f64350 --- /dev/null +++ b/fixtures/smoke/relative-paths/index.test.js @@ -0,0 +1,37 @@ +const fs = require('fs-extra'); +const globby = require('globby'); +const path = require('path'); +const { + bootstrap, + isSuccessfulDevelopment, + isSuccessfulProduction, +} = require('../../utils'); +beforeEach(async () => { + await bootstrap({ directory: global.testDirectory, template: __dirname }); +}); + +describe('relative paths', () => { + // TODO: enable when development relative paths are supported + xit('builds in development', async () => { + await isSuccessfulDevelopment({ directory: global.testDirectory }); + }); + it('builds in production', async () => { + await isSuccessfulProduction({ directory: global.testDirectory }); + + const buildDir = path.join(global.testDirectory, 'build'); + const cssFile = path.join( + buildDir, + globby.sync('**/*.css', { cwd: buildDir }).pop() + ); + const svgFile = path.join( + buildDir, + globby.sync('**/*.svg', { cwd: buildDir }).pop() + ); + const desiredPath = /url\((.+?)\)/ + .exec(fs.readFileSync(cssFile, 'utf8')) + .pop(); + expect(path.resolve(path.join(path.dirname(cssFile), desiredPath))).toBe( + path.resolve(svgFile) + ); + }); +}); diff --git a/fixtures/smoke/relative-paths/package.json b/fixtures/smoke/relative-paths/package.json new file mode 100644 index 00000000000..3ed0e3e4eea --- /dev/null +++ b/fixtures/smoke/relative-paths/package.json @@ -0,0 +1,6 @@ +{ + "dependencies": { + "react-scripts": "latest" + }, + "homepage": "." +} diff --git a/fixtures/smoke/relative-paths/public/index.html b/fixtures/smoke/relative-paths/public/index.html new file mode 100644 index 00000000000..86010b24067 --- /dev/null +++ b/fixtures/smoke/relative-paths/public/index.html @@ -0,0 +1,9 @@ + + + + React App + + +
+ + diff --git a/fixtures/smoke/relative-paths/src/index.css b/fixtures/smoke/relative-paths/src/index.css new file mode 100644 index 00000000000..244889b10aa --- /dev/null +++ b/fixtures/smoke/relative-paths/src/index.css @@ -0,0 +1,8 @@ +.RootSvg:before { + display: block; + content: ' '; + background-image: url(./logo.svg); + background-size: 28px 28px; + height: 28px; + width: 28px; +} diff --git a/fixtures/smoke/relative-paths/src/index.js b/fixtures/smoke/relative-paths/src/index.js new file mode 100644 index 00000000000..6a9a4b13285 --- /dev/null +++ b/fixtures/smoke/relative-paths/src/index.js @@ -0,0 +1 @@ +import './index.css'; diff --git a/fixtures/smoke/relative-paths/src/logo.svg b/fixtures/smoke/relative-paths/src/logo.svg new file mode 100644 index 00000000000..6b60c1042f5 --- /dev/null +++ b/fixtures/smoke/relative-paths/src/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/package.json b/package.json index 5acfc3a2563..96d63b4f224 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "execa": "1.0.0", "fs-extra": "^7.0.0", "get-port": "^4.0.0", + "globby": "^8.0.1", "husky": "1.0.0-rc.15", "jest": "^23.6.0", "lerna": "2.9.1", From 7973c81b912145350e8da68a3b91a17075b8b4fd Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 28 Sep 2018 22:53:27 -0400 Subject: [PATCH 4/4] Format svg --- fixtures/smoke/relative-paths/src/logo.svg | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/fixtures/smoke/relative-paths/src/logo.svg b/fixtures/smoke/relative-paths/src/logo.svg index 6b60c1042f5..5e53156653f 100644 --- a/fixtures/smoke/relative-paths/src/logo.svg +++ b/fixtures/smoke/relative-paths/src/logo.svg @@ -1,7 +1,8 @@ - - - - - - + + + + + +