fix: ignore quotes in CSS url directive (#14103) (#14109)

CSS url directive allows the url to be enclosed in single or double quotes.
Currently, webpack processors removes quotes before the theme-generator is used,
but this does not happen with Vite, so URLs are set on the link elements by
createLinkReferences function with quotes and this leads to an HTTP 404 error
because the browser adds the base url to the contents of the directive.
This change modifies the regular expression that matches urls, so that
the quotes are not part of the capturing group used to get the url.

flow-server/src/main/resources/plugins/application-theme-plugin/theme-generator.js

@@ -40,7 +40,7 @@ const createLinkReferences = (css, target) => {
   // [0] is the full match
   // [1] matches the media query
   // [2] matches the url
-  const importMatcher = /(?:@media\\s(.+?))?(?:\\s{)?\\@import\\surl\\((.+?)\\);(?:})?/g;
+  const importMatcher = /(?:@media\\s(.+?))?(?:\\s{)?\\@import\\surl\\(\\s*['"]?(.+?)['"]?\\s*\\);(?:})?/g;
   
   var match;
   var styleCss = css;

flow-tests/test-frontend/vite-basics/frontend/themes/vite-basics/styles.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Itim');
+
 h2 {
     color: blue;
 }

flow-tests/test-frontend/vite-basics/package.json

@@ -16,7 +16,7 @@
     "@vaadin/vaadin-text-field": "23.1.0-alpha2",
     "construct-style-sheets-polyfill": "3.1.0",
     "copy-to-clipboard": "^3.3.1",
-    "lit": "2.2.1",
+    "lit": "2.2.3",
     "package-outside-npm": "file:package-outside-npm",
     "package2-outside-npm": "./package2-outside-npm"
   },
@@ -27,8 +27,8 @@
     "mkdirp": "1.0.4",
     "rollup-plugin-brotli": "3.1.0",
     "typescript": "4.5.3",
-    "vite": "v2.9.1",
-    "vite-plugin-checker": "0.3.4",
+    "vite": "v2.9.13",
+    "vite-plugin-checker": "0.4.6",
     "workbox-build": "6.5.0",
     "workbox-core": "6.5.0",
     "workbox-precaching": "6.5.0"
@@ -41,7 +41,7 @@
       "@vaadin/vaadin-lumo-styles": "23.1.0-alpha2",
       "@vaadin/vaadin-text-field": "23.1.0-alpha2",
       "construct-style-sheets-polyfill": "3.1.0",
-      "lit": "2.2.1"
+      "lit": "2.2.3"
     },
     "devDependencies": {
       "@rollup/plugin-replace": "3.1.0",
@@ -50,13 +50,13 @@
       "mkdirp": "1.0.4",
       "rollup-plugin-brotli": "3.1.0",
       "typescript": "4.5.3",
-      "vite": "v2.9.1",
-      "vite-plugin-checker": "0.3.4",
+      "vite": "v2.9.13",
+      "vite-plugin-checker": "0.4.6",
       "workbox-build": "6.5.0",
       "workbox-core": "6.5.0",
       "workbox-precaching": "6.5.0"
     },
-    "hash": "44f86e6049ac654c8a85a7d04f95147e2f087973a41b2d8f806009b624948c02"
+    "hash": "9eb486b6d0417075a70f01d17b333c3005e17f2d9aa859ff61765db0e9fe417e"
   },
   "overrides": {
     "@polymer/polymer": "$@polymer/polymer",

flow-tests/test-frontend/vite-basics/src/test/java/com/vaadin/viteapp/ThemeIT.java

@@ -1,9 +1,12 @@
 package com.vaadin.viteapp;
 
 import java.util.List;
+import java.util.stream.Collectors;
 
 import org.junit.Assert;
 import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
 
 public class ThemeIT extends ViteDevModeIT {
 
@@ -38,4 +41,22 @@ public void cssImportAnnotationForComponent() {
                 "return getComputedStyle(document.querySelector('#themedfield')).backgroundColor");
         Assert.assertEquals("rgb(173, 216, 230)", fieldBackground);
     }
+
+    @Test
+    public void documentCssImport_externalAddedToHeadAsLink() {
+        checkLogsForErrors();
+
+        final WebElement documentHead = getDriver()
+                .findElement(By.tagName("head"));
+        final List<WebElement> links = documentHead
+                .findElements(By.tagName("link"));
+
+        List<String> linkUrls = links.stream()
+                .map(link -> link.getAttribute("href"))
+                .collect(Collectors.toList());
+
+        Assert.assertTrue("Missing link for external url", linkUrls
+                .contains("https://fonts.googleapis.com/css?family=Itim"));
+    }
+
 }