From b3bf42d64bf4e8e6a32dce54004e5553e98ac8a1 Mon Sep 17 00:00:00 2001 From: atlanteh Date: Sun, 7 Jun 2020 15:08:03 +0300 Subject: [PATCH] Add support for absolute paths when using url() in CSS (#7937) * Support scss absolute path resolution for url() Adding resolve-url-loader broke all apps using scss with centralized assets folder and all url(./assets/*.png) broke (#7023). This change allows apps to use url(/assets/*.png) and it would map to src/assets/*.png * test: Add global scss assets test --- packages/react-scripts/config/webpack.config.js | 1 + .../global-scss-asset-resolution/.disable-pnp | 0 .../global-scss-asset-resolution/index.test.js | 16 ++++++++++++++++ .../global-scss-asset-resolution/package.json | 7 +++++++ .../src/images/logo.svg | 7 +++++++ .../global-scss-asset-resolution/src/index.js | 5 +++++ .../global-scss-asset-resolution/src/index.scss | 5 +++++ 7 files changed, 41 insertions(+) create mode 100644 test/fixtures/global-scss-asset-resolution/.disable-pnp create mode 100644 test/fixtures/global-scss-asset-resolution/index.test.js create mode 100644 test/fixtures/global-scss-asset-resolution/package.json create mode 100644 test/fixtures/global-scss-asset-resolution/src/images/logo.svg create mode 100644 test/fixtures/global-scss-asset-resolution/src/index.js create mode 100644 test/fixtures/global-scss-asset-resolution/src/index.scss diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js index 4455dc719bb..2c32b66ac9a 100644 --- a/packages/react-scripts/config/webpack.config.js +++ b/packages/react-scripts/config/webpack.config.js @@ -133,6 +133,7 @@ module.exports = function (webpackEnv) { loader: require.resolve('resolve-url-loader'), options: { sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment, + root: paths.appSrc, }, }, { diff --git a/test/fixtures/global-scss-asset-resolution/.disable-pnp b/test/fixtures/global-scss-asset-resolution/.disable-pnp new file mode 100644 index 00000000000..e69de29bb2d diff --git a/test/fixtures/global-scss-asset-resolution/index.test.js b/test/fixtures/global-scss-asset-resolution/index.test.js new file mode 100644 index 00000000000..4be53d03460 --- /dev/null +++ b/test/fixtures/global-scss-asset-resolution/index.test.js @@ -0,0 +1,16 @@ +const testSetup = require('../__shared__/test-setup'); + +if (testSetup.isLocal) { + // TODO: make this work locally + test('skipped locally', () => {}); +} else { + test('builds in development', async () => { + const { fulfilled } = await testSetup.scripts.start({ smoke: true }); + expect(fulfilled).toBe(true); + }); + + test('builds in production', async () => { + const { fulfilled } = await testSetup.scripts.build(); + expect(fulfilled).toBe(true); + }); +} diff --git a/test/fixtures/global-scss-asset-resolution/package.json b/test/fixtures/global-scss-asset-resolution/package.json new file mode 100644 index 00000000000..aadc890ec0a --- /dev/null +++ b/test/fixtures/global-scss-asset-resolution/package.json @@ -0,0 +1,7 @@ +{ + "dependencies": { + "node-sass": "4.x", + "react": "latest", + "react-dom": "latest" + } +} diff --git a/test/fixtures/global-scss-asset-resolution/src/images/logo.svg b/test/fixtures/global-scss-asset-resolution/src/images/logo.svg new file mode 100644 index 00000000000..6b60c1042f5 --- /dev/null +++ b/test/fixtures/global-scss-asset-resolution/src/images/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/test/fixtures/global-scss-asset-resolution/src/index.js b/test/fixtures/global-scss-asset-resolution/src/index.js new file mode 100644 index 00000000000..9fc16c21ff9 --- /dev/null +++ b/test/fixtures/global-scss-asset-resolution/src/index.js @@ -0,0 +1,5 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.scss'; + +ReactDOM.render(
, document.getElementById('root')); diff --git a/test/fixtures/global-scss-asset-resolution/src/index.scss b/test/fixtures/global-scss-asset-resolution/src/index.scss new file mode 100644 index 00000000000..151c0b4a6cd --- /dev/null +++ b/test/fixtures/global-scss-asset-resolution/src/index.scss @@ -0,0 +1,5 @@ +#root { + width: 300px; + height: 300px; + background: url(/images/logo.svg) center/cover no-repeat; +}