From f89213cb5752f64a70563698e673b874af6613e1 Mon Sep 17 00:00:00 2001
From: Marco Collovati <marco@vaadin.com>
Date: Thu, 30 Jun 2022 17:18:18 +0200
Subject: [PATCH] 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.
---
 .../theme-generator.js                        |  2 +-
 .../frontend/themes/vite-basics/styles.css    |  2 ++
 .../test-frontend/vite-basics/package.json    | 14 ++++++-------
 .../test/java/com/vaadin/viteapp/ThemeIT.java | 21 +++++++++++++++++++
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/flow-server/src/main/resources/plugins/application-theme-plugin/theme-generator.js b/flow-server/src/main/resources/plugins/application-theme-plugin/theme-generator.js
index c66f6c7905f..5d129495ea2 100644
--- a/flow-server/src/main/resources/plugins/application-theme-plugin/theme-generator.js
+++ b/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;
diff --git a/flow-tests/test-frontend/vite-basics/frontend/themes/vite-basics/styles.css b/flow-tests/test-frontend/vite-basics/frontend/themes/vite-basics/styles.css
index 499f9e76447..c3d59ffba5e 100644
--- a/flow-tests/test-frontend/vite-basics/frontend/themes/vite-basics/styles.css
+++ b/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;
 }
diff --git a/flow-tests/test-frontend/vite-basics/package.json b/flow-tests/test-frontend/vite-basics/package.json
index 70b6950e8f5..3906cb59702 100644
--- a/flow-tests/test-frontend/vite-basics/package.json
+++ b/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",
diff --git a/flow-tests/test-frontend/vite-basics/src/test/java/com/vaadin/viteapp/ThemeIT.java b/flow-tests/test-frontend/vite-basics/src/test/java/com/vaadin/viteapp/ThemeIT.java
index b1723cac803..54099524ee8 100644
--- a/flow-tests/test-frontend/vite-basics/src/test/java/com/vaadin/viteapp/ThemeIT.java
+++ b/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"));
+    }
+
 }