From 60e8426aae0ae9e718b1e8bdf1f2ffaca1d4394d Mon Sep 17 00:00:00 2001 From: web-padawan Date: Mon, 8 Aug 2022 17:55:17 +0300 Subject: [PATCH 1/3] fix: use rollup-plugin-postcss-lit with Vite --- .../java/com/vaadin/flow/server/frontend/NodeUpdater.java | 1 + flow-server/src/main/resources/vite.generated.ts | 5 +++++ .../test/java/com/vaadin/flow/uitest/ui/theme/ThemeIT.java | 2 -- .../test/java/com/vaadin/flow/uitest/ui/theme/ThemeIT.java | 2 -- 4 files changed, 6 insertions(+), 4 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 58eed56fb6b..aea7822da46 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 @@ -438,6 +438,7 @@ Map getDefaultDevDependencies() { defaults.put("vite", "v3.0.2"); defaults.put("@rollup/plugin-replace", "3.1.0"); defaults.put("rollup-plugin-brotli", "3.1.0"); + defaults.put("rollup-plugin-postcss-lit", "2.0.0"); defaults.put("vite-plugin-checker", "0.4.9"); defaults.put("mkdirp", "1.0.4"); // for application-theme-plugin defaults.put("workbox-build", WORKBOX_VERSION); diff --git a/flow-server/src/main/resources/vite.generated.ts b/flow-server/src/main/resources/vite.generated.ts index dfae1436b71..d3bde204a62 100644 --- a/flow-server/src/main/resources/vite.generated.ts +++ b/flow-server/src/main/resources/vite.generated.ts @@ -18,6 +18,7 @@ import * as rollup from 'rollup'; import brotli from 'rollup-plugin-brotli'; import replace from '@rollup/plugin-replace'; import checker from 'vite-plugin-checker'; +import postcssLit from 'rollup-plugin-postcss-lit'; const appShellUrl = '.'; @@ -485,6 +486,10 @@ export const vaadinConfig: UserConfigFn = (env) => { settings.offlineEnabled && injectManifestToSWPlugin(), !devMode && statsExtracterPlugin(), themePlugin({devMode}), + postcssLit({ + include: ['**/*.css', '**/*.css\?*'], + exclude: [`${themeFolder}/**/*.css`, `${themeFolder}/**/*.css\?*`] + }), { name: 'vaadin:force-remove-spa-middleware', transformIndexHtml: { diff --git a/flow-tests/test-custom-frontend-directory/test-themes-custom-frontend-directory/src/test/java/com/vaadin/flow/uitest/ui/theme/ThemeIT.java b/flow-tests/test-custom-frontend-directory/test-themes-custom-frontend-directory/src/test/java/com/vaadin/flow/uitest/ui/theme/ThemeIT.java index 4ceeedc7727..88c5b4ff596 100644 --- a/flow-tests/test-custom-frontend-directory/test-themes-custom-frontend-directory/src/test/java/com/vaadin/flow/uitest/ui/theme/ThemeIT.java +++ b/flow-tests/test-custom-frontend-directory/test-themes-custom-frontend-directory/src/test/java/com/vaadin/flow/uitest/ui/theme/ThemeIT.java @@ -22,7 +22,6 @@ import java.util.stream.Collectors; import org.junit.Assert; -import org.junit.Ignore; import org.junit.Test; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; @@ -45,7 +44,6 @@ public class ThemeIT extends ChromeBrowserTest { - @Ignore("Vite issue with web components styles https://github.com/vaadin/flow/issues/14142") @Test public void typeScriptCssImport_stylesAreApplied() { getDriver().get(getRootURL() + "/path/hello"); diff --git a/flow-tests/test-themes/src/test/java/com/vaadin/flow/uitest/ui/theme/ThemeIT.java b/flow-tests/test-themes/src/test/java/com/vaadin/flow/uitest/ui/theme/ThemeIT.java index f9f8405b694..e749bc00e5b 100644 --- a/flow-tests/test-themes/src/test/java/com/vaadin/flow/uitest/ui/theme/ThemeIT.java +++ b/flow-tests/test-themes/src/test/java/com/vaadin/flow/uitest/ui/theme/ThemeIT.java @@ -26,7 +26,6 @@ import java.util.stream.Collectors; import org.junit.Assert; -import org.junit.Ignore; import org.junit.Test; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; @@ -48,7 +47,6 @@ public class ThemeIT extends ChromeBrowserTest { - @Ignore("Vite issue with web components styles https://github.com/vaadin/flow/issues/14142") @Test public void typeScriptCssImport_stylesAreApplied() { getDriver().get(getRootURL() + "/path/hello"); From 0efd54f97f03a53d97c280e9a2e0578720adc56a Mon Sep 17 00:00:00 2001 From: web-padawan Date: Mon, 8 Aug 2022 18:44:32 +0300 Subject: [PATCH 2/3] fix: exclude CSS inlined into index.html --- flow-server/src/main/resources/vite.generated.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/flow-server/src/main/resources/vite.generated.ts b/flow-server/src/main/resources/vite.generated.ts index d3bde204a62..9a5e4c4a261 100644 --- a/flow-server/src/main/resources/vite.generated.ts +++ b/flow-server/src/main/resources/vite.generated.ts @@ -488,7 +488,7 @@ export const vaadinConfig: UserConfigFn = (env) => { themePlugin({devMode}), postcssLit({ include: ['**/*.css', '**/*.css\?*'], - exclude: [`${themeFolder}/**/*.css`, `${themeFolder}/**/*.css\?*`] + exclude: [`${themeFolder}/**/*.css`, `${themeFolder}/**/*.css\?*`, '**/*\?html-proxy*'] }), { name: 'vaadin:force-remove-spa-middleware', From b7be221e1b610d9306d4cd02345042939c9df0bf Mon Sep 17 00:00:00 2001 From: web-padawan Date: Tue, 9 Aug 2022 14:59:12 +0300 Subject: [PATCH 3/3] fix: also include theme resource folder --- flow-server/src/main/resources/vite.generated.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/flow-server/src/main/resources/vite.generated.ts b/flow-server/src/main/resources/vite.generated.ts index 9a5e4c4a261..2728194dd6b 100644 --- a/flow-server/src/main/resources/vite.generated.ts +++ b/flow-server/src/main/resources/vite.generated.ts @@ -488,7 +488,13 @@ export const vaadinConfig: UserConfigFn = (env) => { themePlugin({devMode}), postcssLit({ include: ['**/*.css', '**/*.css\?*'], - exclude: [`${themeFolder}/**/*.css`, `${themeFolder}/**/*.css\?*`, '**/*\?html-proxy*'] + exclude: [ + `${themeFolder}/**/*.css`, + `${themeFolder}/**/*.css\?*`, + `${themeResourceFolder}/**/*.css`, + `${themeResourceFolder}/**/*.css\?*`, + '**/*\?html-proxy*' + ] }), { name: 'vaadin:force-remove-spa-middleware',