fix: Add polyfill for constructable stylesheets (#9489)

Add the constructable stylesheets polyfill so app theme also works with non chrome based browsers. Fixes #9488 # Conflicts: # flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java
vaadin · Mar 2, 2021 · e2fdc6e · e2fdc6e
1 parent 0d520d1
commit e2fdc6e
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 3 deletions.
diff --git a/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java b/flow-server/src/main/java/com/vaadin/flow/server/frontend/NodeUpdater.java
@@ -263,7 +263,10 @@ static Map<String, String> getDefaultDevDependencies() {
 
         defaults.put("typescript", "4.0.3");
         defaults.put("ts-loader", "8.0.12");
-
+        // Constructable style sheets is only implemented for chrome,
+        // polyfill needed for FireFox et.al. at the moment
+        defaults.put("construct-style-sheets-polyfill", "2.4.2");
+
         // Forcing chokidar version for now until new babel version is available
         // check out https://github.com/babel/babel/issues/11488
         defaults.put("chokidar", "^3.5.0");

diff --git a/flow-server/src/main/resources/plugins/application-theme-plugin/package.json b/flow-server/src/main/resources/plugins/application-theme-plugin/package.json
@@ -6,7 +6,7 @@
   ],
   "repository": "vaadin/flow",
   "name": "@vaadin/application-theme-plugin",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "main": "application-theme-plugin.js",
   "author": "Vaadin Ltd",
   "license": "Apache-2.0",

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
@@ -27,7 +27,8 @@ const themeComponentsFolder = 'components';
 // the document. E.g. @font-face must be in this
 const themeFileAlwaysAddToDocument = 'document.css';
 
-const headerImport = ``;
+const headerImport = `import 'construct-style-sheets-polyfill';
+`;
 
 const injectGlobalCssMethod = `
 // target: Document | ShadowRoot