From 627c5bc48006834d69db3a228283b979350a418d Mon Sep 17 00:00:00 2001 From: Tobbe Lundberg Date: Thu, 27 Jul 2023 23:10:47 +0200 Subject: [PATCH] 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 --- packages/core/config/webpack.common.js | 25 +++++++++++- packages/core/package.json | 1 + yarn.lock | 53 ++++++++++++++++++++------ 3 files changed, 66 insertions(+), 13 deletions(-) diff --git a/packages/core/config/webpack.common.js b/packages/core/config/webpack.common.js index 2e7db6025063..5e51e3d7b707 100644 --- a/packages/core/config/webpack.common.js +++ b/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,6 +89,7 @@ const getStyleLoaders = (isEnvProduction) => { postcssOptions: { config: paths.web.postcss, }, + sourceMap: true, // required for resolve-url-loader }, } : null @@ -87,12 +97,20 @@ const getStyleLoaders = (isEnvProduction) => { 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,8 +129,9 @@ const getStyleLoaders = (isEnvProduction) => { use: [ styleOrExtractLoader, cssLoader(true, numImportLoadersForSCSS), + isUsingVite && resolveUrlLoader, postCssLoader, - 'sass-loader', + sassLoader, ].filter(Boolean), }, { @@ -119,8 +139,9 @@ const getStyleLoaders = (isEnvProduction) => { use: [ styleOrExtractLoader, cssLoader(false, numImportLoadersForSCSS), + isUsingVite && resolveUrlLoader, postCssLoader, - 'sass-loader', + sassLoader, ].filter(Boolean), sideEffects: true, }, diff --git a/packages/core/package.json b/packages/core/package.json index 88bf0d75dca7..735fc856a9a4 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -75,6 +75,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", diff --git a/yarn.lock b/yarn.lock index a7758dd36184..17530f2e4aaf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7507,6 +7507,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 @@ -11766,6 +11767,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" @@ -26234,14 +26245,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 @@ -27407,6 +27418,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" @@ -27664,6 +27682,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" @@ -28817,6 +28848,13 @@ __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" @@ -28824,13 +28862,6 @@ __metadata: 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"