fix: fix external url reference (#11039) (#11061)

Fix the handling of external url reference in files that go into node_modules.
flow-frontend is copied directly to node_modules making css-loader
try to resolve urls for files that shouldn't be resolved.

Fixes #11015

Co-authored-by: caalador <mikael.grankvist@vaadin.com>

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

@@ -194,7 +194,8 @@ module.exports = {
             options: {
               url: (url, resourcePath) => {
                 // Only translate files from node_modules
-                const resolve = resourcePath.match(/(\\|\/)node_modules\1/);
+                const resolve = resourcePath.match(/(\\|\/)node_modules\1/)
+                  && fs.existsSync(path.resolve(path.dirname(resourcePath), url));
                 const themeResource = resourcePath.match(themePartRegex) && url.match(/^themes\/[\s\S]*?\//);
                 return resolve || themeResource;
               },

flow-tests/test-application-theme/reusable-theme/src/main/java/com/vaadin/reusabletheme/Dependency.java

@@ -1,8 +1,10 @@
 package com.vaadin.reusabletheme;
 
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.dependency.NpmPackage;
 
 @NpmPackage(value = "@fortawesome/fontawesome-free", version = "5.15.1")
+@CssImport(value = "./css/styles.css")
 public class Dependency {
 
 }

flow-tests/test-application-theme/reusable-theme/src/main/resources/META-INF/resources/frontend/css/styles.css

@@ -0,0 +1,6 @@
+.css-icon {
+	/* note that tests use path context fo which reason the image is placed in path/img */
+	background-image: url('img/icon.png');
+	background-size: 26px 26px;
+}
+

flow-tests/test-application-theme/test-theme-live-reload/frontend/themes/app-theme/styles.css

@@ -0,0 +1 @@
+/* Import your application global css files here or add the styles directly to this file */

flow-tests/test-application-theme/test-theme-reusable/src/main/java/com/vaadin/flow/uitest/ui/theme/ReusableThemeView.java

@@ -16,6 +16,7 @@
 
 package com.vaadin.flow.uitest.ui.theme;
 
+import com.vaadin.flow.component.dependency.CssImport;
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.html.Div;
 import com.vaadin.flow.component.html.Image;
@@ -26,6 +27,7 @@
 @Route("com.vaadin.flow.uitest.ui.theme.ReusableThemeView")
 @Theme(themeFolder = "reusable-theme")
 @NpmPackage(value = "@vaadin/vaadin-themable-mixin", version = "1.6.1")
+@CssImport(value = "./css/styles.css")
 public class ReusableThemeView extends Div {
 
     public static final String MY_POLYMER_ID = "field";
@@ -72,5 +74,9 @@ public ReusableThemeView() {
         badge.getElement().setAttribute("theme", "badge");
 
         add(badge);
+        Span cssIcon = new Span();
+        cssIcon.setId("css-icon");
+        cssIcon.setClassName("css-icon");
+        add(cssIcon);
     }
 }

flow-tests/test-application-theme/test-theme-reusable/src/test/java/com/vaadin/flow/uitest/ui/theme/ReusableThemeIT.java

@@ -175,6 +175,17 @@ public void lumoBadgeIsRenderedCorrectly() {
         Assert.assertEquals("rgba(22, 118, 243, 0.1)", badgeBackgroundColor);
     }
 
+    @Test //11015
+    public void importedCssStyle_isUsed() {
+        open();
+        checkLogsForErrors();
+
+        final SpanElement cssIcon = $(SpanElement.class).id("css-icon");
+
+        Assert.assertEquals("url(\"" + getRootURL() + "/path/img/icon.png\")",
+                cssIcon.getCssValue("background-image"));
+    }
+
     @Override
     protected String getTestPath() {
         String path = super.getTestPath();