From 87b88107a179cb5ae1c5cc61fd53dd8f3ded3ae9 Mon Sep 17 00:00:00 2001 From: caalador Date: Thu, 26 Nov 2020 11:35:11 +0200 Subject: [PATCH] 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 --- .../java/com/vaadin/flow/server/frontend/NodeUpdater.java | 5 ++++- .../resources/plugins/application-theme-plugin/package.json | 2 +- .../plugins/application-theme-plugin/theme-generator.js | 3 ++- 3 files changed, 7 insertions(+), 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 index 2fd6bbfa4e2..b3d7b336030 100644 --- 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 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 index 380baea46a4..76f88a870d8 100644 --- 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 index a502b205376..f26356215e9 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 @@ -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