css-loader should ignore urls beginning with a / - closes #2743

laravel-mix · Jan 6, 2021 · 9f10e00 · 9f10e00
1 parent 4b71219
commit 9f10e00
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 3 deletions.
diff --git a/src/components/CssWebpackConfig.js b/src/components/CssWebpackConfig.js
@@ -108,7 +108,13 @@ class CssWebpackConfig extends AutomaticComponent {
             {
                 loader: 'css-loader',
                 options: {
-                    url: Config.processCssUrls,
+                    url: (url, resourcePath) => {
+                        if (url.startsWith('/')) {
+                            return false;
+                        }
+
+                        return Config.processCssUrls;
+                    },
                     modules: useCssModules
                 }
             },

diff --git a/src/components/Preprocessor.js b/src/components/Preprocessor.js
@@ -57,7 +57,13 @@ class Preprocessor {
             {
                 loader: 'css-loader',
                 options: {
-                    url: processUrls,
+                    url: (url, resourcePath) => {
+                        if (url.startsWith('/')) {
+                            return false;
+                        }
+
+                        return processUrls;
+                    },
                     sourceMap: Mix.isUsing('sourcemaps'),
                     importLoaders: 1
                 }

diff --git a/test/features/preprocessors.js b/test/features/preprocessors.js
@@ -7,6 +7,15 @@ import webpack from '../helpers/webpack';
 
 import '../helpers/mix';
 
+test('it does not process absolute urls', async t => {
+    mix.postCss(`test/fixtures/app/src/css/app.css`, 'css');
+
+    await t.notThrowsAsync(
+        webpack.compile(),
+        'CSS failed to compile due to incorrect URL processing.'
+    );
+});
+
 test('it compiles PostCSS without JS', async t => {
     mix.postCss(`test/fixtures/app/src/css/app.css`, 'css');
 
@@ -201,7 +210,7 @@ test('Compiling multiple CSS assets places CSS in the correct location', async t
 
     assert.fileMatchesCss(
         `test/fixtures/app/dist/css/app.css`,
-        `body{color:red;}.app{color:red;}`,
+        `body{color:red;}.app{color:red;background:url('/absolute/image.jpg');}`,
         t
     );
 });

diff --git a/test/fixtures/app/src/css/app.css b/test/fixtures/app/src/css/app.css
@@ -1,3 +1,4 @@
 .app {
     color: red;
+    background: url('/absolute/image.jpg');
 }