Webpack: Use resolve-url-loader to handle absolute paths in css url() (…

…#8980)

Using
[resolve-url-loader](https://github.com/bholloway/resolve-url-loader) to
set `root` for absolute imports. This makes it possible to use the same
absolute-path style imports in css for both webpack and Vite RW
projects.
So CSS like this should work for both Webpack and Vite now 

```css
@layer base {
  @font-face {
    font-family: 'My font';
    src: url('/fonts/abeezee-v22-latin-regular.woff2') format('woff2');
    font-weight: 300;
    ascent-override: 97%;
  }

  * {
    font-family: 'My font';
  }
}
```

Notice `url('/fonts/...')`. The initial `/` is what's important.

---------

Co-authored-by: Dominic Saadi <dominiceliassaadi@gmail.com>

packages/core/config/webpack.common.js

@@ -23,6 +23,8 @@ const { getConfig, getPaths } = require('@redwoodjs/project-config')
 const redwoodConfig = getConfig()
 const redwoodPaths = getPaths()
 
+const isUsingVite = redwoodConfig.web.bundler !== 'webpack'
+
 /** @returns {{[key: string]: string}} Env vars */
 const getEnvVars = () => {
   const redwoodEnvPrefix = 'REDWOOD_ENV_'
@@ -68,6 +70,13 @@ const getStyleLoaders = (isEnvProduction) => {
     return loaderConfig
   }
 
+  const resolveUrlLoader = {
+    loader: require.resolve('resolve-url-loader'),
+    options: {
+      root: path.join(redwoodPaths.web.base, '/public'),
+    },
+  }
+
   const paths = getPaths()
   const hasPostCssConfig = fs.existsSync(paths.web.postcss)
 
@@ -80,19 +89,28 @@ const getStyleLoaders = (isEnvProduction) => {
           postcssOptions: {
             config: paths.web.postcss,
           },
+          sourceMap: true, // required for resolve-url-loader
         },
       }
     : null
 
   const numImportLoadersForCSS = hasPostCssConfig ? 1 : 0
   const numImportLoadersForSCSS = hasPostCssConfig ? 2 : 1
 
+  const sassLoader = {
+    loader: 'sass-loader',
+    options: {
+      sourceMap: true, // required for resolve-url-loader
+    },
+  }
+
   return [
     {
       test: /\.module\.css$/,
       use: [
         styleOrExtractLoader,
         cssLoader(true, numImportLoadersForCSS),
+        isUsingVite && resolveUrlLoader,
         postCssLoader,
       ].filter(Boolean),
     },
@@ -101,6 +119,7 @@ const getStyleLoaders = (isEnvProduction) => {
       use: [
         styleOrExtractLoader,
         cssLoader(false, numImportLoadersForCSS),
+        isUsingVite && resolveUrlLoader,
         postCssLoader,
       ].filter(Boolean),
       sideEffects: true,
@@ -110,17 +129,19 @@ const getStyleLoaders = (isEnvProduction) => {
       use: [
         styleOrExtractLoader,
         cssLoader(true, numImportLoadersForSCSS),
+        isUsingVite && resolveUrlLoader,
         postCssLoader,
-        'sass-loader',
+        sassLoader,
       ].filter(Boolean),
     },
     {
       test: /\.scss$/,
       use: [
         styleOrExtractLoader,
         cssLoader(false, numImportLoadersForSCSS),
+        isUsingVite && resolveUrlLoader,
         postCssLoader,
-        'sass-loader',
+        sassLoader,
       ].filter(Boolean),
       sideEffects: true,
     },

packages/core/package.json

@@ -70,6 +70,7 @@
     "nodemon": "2.0.22",
     "null-loader": "4.0.1",
     "react-refresh": "0.14.0",
+    "resolve-url-loader": "5.0.0",
     "rimraf": "5.0.1",
     "style-loader": "3.3.3",
     "typescript": "5.1.6",

yarn.lock

@@ -7419,6 +7419,7 @@ __metadata:
     nodemon: 2.0.22
     null-loader: 4.0.1
     react-refresh: 0.14.0
+    resolve-url-loader: 5.0.0
     rimraf: 5.0.1
     style-loader: 3.3.3
     typescript: 5.1.6
@@ -11503,6 +11504,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"adjust-sourcemap-loader@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "adjust-sourcemap-loader@npm:4.0.0"
+  dependencies:
+    loader-utils: ^2.0.0
+    regex-parser: ^2.2.11
+  checksum: 6a6e5bb8b670e4e1238c708f6163e92aa2ad0308fe5913de73c89e4cbf41738ee0bcc5552b94d0b7bf8be435ee49b78c6de8a6db7badd80762051e843c8aa14f
+  languageName: node
+  linkType: hard
+
 "agent-base@npm:5":
   version: 5.1.1
   resolution: "agent-base@npm:5.1.1"
@@ -25984,14 +25995,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.4.21, postcss@npm:^8.4.24, postcss@npm:^8.4.26":
-  version: 8.4.26
-  resolution: "postcss@npm:8.4.26"
+"postcss@npm:^8.2.14, postcss@npm:^8.4.21, postcss@npm:^8.4.24, postcss@npm:^8.4.26":
+  version: 8.4.27
+  resolution: "postcss@npm:8.4.27"
   dependencies:
     nanoid: ^3.3.6
     picocolors: ^1.0.0
     source-map-js: ^1.0.2
-  checksum: 29c603d6b30b2f94bf971bc430600f271da76fa3ae38d4c6b255e957213051b8eeb02829e128ec4e9fa2a7bb710ba7992ebaf1997e3a9ace48caf49b48a10f6b
+  checksum: 41a0476e05cb97514ff8d75e4ff9fdcf778f22b2e0d25b7028f219cd408e01d3c4f50459d4a1cd9a430d8ef08202c881374a4fa4ea6009f4a135a07315d606e5
   languageName: node
   linkType: hard
 
@@ -27121,6 +27132,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regex-parser@npm:^2.2.11":
+  version: 2.2.11
+  resolution: "regex-parser@npm:2.2.11"
+  checksum: 6572acbd46b5444215a73cf164f3c6fdbd73b8a2cde6a31a97307e514d20f5cbb8609f9e4994a7744207f2d1bf9e6fca4bbc0c9854f2b3da77ae0063efdc3f98
+  languageName: node
+  linkType: hard
+
 "regexp-to-ast@npm:0.5.0":
   version: 0.5.0
   resolution: "regexp-to-ast@npm:0.5.0"
@@ -27378,6 +27396,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"resolve-url-loader@npm:5.0.0":
+  version: 5.0.0
+  resolution: "resolve-url-loader@npm:5.0.0"
+  dependencies:
+    adjust-sourcemap-loader: ^4.0.0
+    convert-source-map: ^1.7.0
+    loader-utils: ^2.0.0
+    postcss: ^8.2.14
+    source-map: 0.6.1
+  checksum: 53eef3620332f2fc35a4deffaa4395064b2ffd1bc28be380faa3f1e99c2fb7bbf0f705700b4539387d5b6c39586df54a92cd5d031606f19de4bf9e0ff1b6a522
+  languageName: node
+  linkType: hard
+
 "resolve-url@npm:^0.2.1":
   version: 0.2.1
   resolution: "resolve-url@npm:0.2.1"
@@ -28531,20 +28562,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map@npm:0.6.1, source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
+  version: 0.6.1
+  resolution: "source-map@npm:0.6.1"
+  checksum: ab55398007c5e5532957cb0beee2368529618ac0ab372d789806f5718123cc4367d57de3904b4e6a4170eb5a0b0f41373066d02ca0735a0c4d75c7d328d3e011
+  languageName: node
+  linkType: hard
+
 "source-map@npm:^0.5.6":
   version: 0.5.7
   resolution: "source-map@npm:0.5.7"
   checksum: 904e767bb9c494929be013017380cbba013637da1b28e5943b566031e29df04fba57edf3f093e0914be094648b577372bd8ad247fa98cfba9c600794cd16b599
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
-  version: 0.6.1
-  resolution: "source-map@npm:0.6.1"
-  checksum: ab55398007c5e5532957cb0beee2368529618ac0ab372d789806f5718123cc4367d57de3904b4e6a4170eb5a0b0f41373066d02ca0735a0c4d75c7d328d3e011
-  languageName: node
-  linkType: hard
-
 "source-map@npm:^0.7.3":
   version: 0.7.4
   resolution: "source-map@npm:0.7.4"