feat: Enable importing CSS from node_modules

flow-server/src/main/resources/webpack.generated.js

@@ -181,14 +181,10 @@ module.exports = {
             loader: 'css-loader',
             options: {
               url: (url, resourcePath) => {
-                // Skip translating external URLs
-                const extUrlPattern = /(http|https):\/\//;
-                if (extUrlPattern.test(url)) {
-                  return false;
-                }
-                // Only translate files from node_modules or frontend/theme
-                return resourcePath.includes('/node_modules/')
-                    || resourcePath.includes('/frontend/theme/');
+                // Only translate files from node_modules
+                const resolve = resourcePath.match(/(\\|\/)node_modules\1/);
+                const themeResource = resourcePath.match(themePartRegex) && url.match(/^theme\/[\s\S]*?\//);
+                return resolve || themeResource;
               },
               // use theme-loader to also handle any imports in css files
               importLoaders: 1
@@ -205,13 +201,19 @@ module.exports = {
         ],
       },
       {
-        // File-loader only copies files used as imports in .js files
-        test: /\.(png|gif|jpg|svg|eot|woff|woff2|ttf)$/,
+        // File-loader only copies files used as imports in .js files or handled by css-loader
+        test: /\.(png|gif|jpg|jpeg|svg|eot|woff|woff2|ttf)$/,
         use: [{
           loader: 'file-loader',
           options: {
             outputPath: 'static/',
-            name: '[name].[ext]'
+            name(resourcePath, resourceQuery) {
+              const urlResource = resourcePath.substring(frontendFolder.length);
+              if(urlResource.match(themePartRegex)){
+                return /^(\\|\/)theme\1[\s\S]*?\1(.*)/.exec(urlResource)[2];
+              }
+              return '[path][name].[ext]';
+            }
           }
         }],
       },

flow-tests/test-themes/frontend/theme/app-theme/global.css

@@ -12,7 +12,7 @@ body {
 
 #butterfly {
     /* This shouldn't be translated */
-    background-image: url("./test/path/monarch-butterfly.jpg");
+    background-image: url("/path/test/path/monarch-butterfly.jpg");
     width: 300px;
     height: 274px;
     display: block;