fix: apply CssImport to exported webcomponent #19740

tltv · 2024-08-01T13:47:57Z

CssImport annotation with just a value attribute can be injected automatically to shadow root of all exported web components (embedded applications) using Constructable StyleSheets. WebComponentExporter should have a theme to make automation work properly in theme-generator.js. Theme property "autoInjectGlobalCssImports": true in theme.json enable auto injection. Disabled by default.

Fixes: #19700

github-actions · 2024-08-01T14:03:10Z

Test Results

1 128 files ± 0 1 128 suites ±0 1h 24m 7s ⏱️ + 2m 51s
7 310 tests + 3 7 260 ✅ + 3 50 💤 ±0 0 ❌ ±0
7 667 runs +33 7 607 ✅ +33 60 💤 ±0 0 ❌ ±0

Results for commit 87dd3b5. ± Comparison against base commit f81d6bd.

♻️ This comment has been updated with latest results.

mcollovati · 2024-08-02T11:53:38Z

flow-server/src/main/java/com/vaadin/flow/server/frontend/AbstractUpdateImports.java

@@ -76,6 +78,8 @@ abstract class AbstractUpdateImports implements Runnable {
            + " tpl.innerHTML = block;\n"
            + " document.head.appendChild(tpl.content);\n" + "}";
    private static final String IMPORT_INJECT = "import { injectGlobalCss } from 'Frontend/generated/jar-resources/theme-util.js';\n";
+    private static final String IMPORT_COMPOSE_LOAD_ON_DEMAND = "import { composeLoadOnDemand } from 'Frontend/generated/jar-resources/theme-util.js';\n";


The composeLoadOnDemand function seems not be used anymore. I suppose we can remove both the constant and the function definition in theme-utils

mcollovati · 2024-08-02T11:54:31Z

flow-server/src/main/java/com/vaadin/flow/server/frontend/AbstractUpdateImports.java

@@ -292,7 +314,7 @@ private Map<File, List<String>> process(Map<ChunkInfo, List<CssData>> css,
            start = System.nanoTime();

            chunkLoader.add("");
-            chunkLoader.add("const loadOnDemand = (key) => {");
+            chunkLoader.add("const loadOnDemand = (key, isWebcomponent) => {");


The isWebcomponent parameter seems not required anymore

I leaved it in just in case. But as it's not used after all, I'll remove it.

Default value is false and global CssImport (with just a value) is not injected by default to exported web components.

sonarcloud · 2024-08-05T09:24:39Z

Quality Gate passed

Issues
9 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

CssImport annotation with just a value attribute can be injected automatically to shadow root of all exported web components (embedded applications) using Constructable StyleSheets. WebComponentExporter should have a theme to make automation work properly in theme-generator.js. Theme property "autoInjectGlobalCssImports": true in theme.json enable auto injection. Disabled by default. Fixes: #19700 Co-authored-by: Marco Collovati <marco@vaadin.com>

vaadin-bot · 2024-08-05T11:42:35Z

Hi @tltv and @mshabarov, when i performed cherry-pick to this commit to 23.5, i have encountered the following issue. Can you take a look and pick it manually?
Error Message:
Error: Command failed: git cherry-pick b817168
error: could not apply b817168... fix: apply CssImport to exported webcomponent (#19740)
hint: After resolving the conflicts, mark them with
hint: "git add/rm ", then run
hint: "git cherry-pick --continue".
hint: You can instead skip this commit with "git cherry-pick --skip".
hint: To abort and get back to the state before "git cherry-pick",
hint: run "git cherry-pick --abort".

vaadin-bot · 2024-08-05T11:42:39Z

Hi @tltv and @mshabarov, when i performed cherry-pick to this commit to 24.3, i have encountered the following issue. Can you take a look and pick it manually?
Error Message:
Error: Command failed: git cherry-pick b817168
error: could not apply b817168... fix: apply CssImport to exported webcomponent (#19740)
hint: After resolving the conflicts, mark them with
hint: "git add/rm ", then run
hint: "git cherry-pick --continue".
hint: You can instead skip this commit with "git cherry-pick --skip".
hint: To abort and get back to the state before "git cherry-pick",
hint: run "git cherry-pick --abort".

CssImport annotation with just a value attribute can be injected automatically to shadow root of all exported web components (embedded applications) using Constructable StyleSheets. WebComponentExporter should have a theme to make automation work properly in theme-generator.js. Theme property "autoInjectGlobalCssImports": true in theme.json enable auto injection. Disabled by default. Fixes: #19700 Co-authored-by: Tomi Virtanen <tltv@vaadin.com> Co-authored-by: Marco Collovati <marco@vaadin.com>

CssImport annotation with just a value attribute can be injected automatically to shadow root of all exported web components (embedded applications) using Constructable StyleSheets. WebComponentExporter should have a theme to make automation work properly in theme-generator.js. Theme property "autoInjectGlobalCssImports": true in theme.json enable auto injection. Disabled by default. Fixes: #19700 Co-authored-by: Marco Collovati <marco@vaadin.com>

…9746) CssImport annotation with just a value attribute can be injected automatically to shadow root of all exported web components (embedded applications) using Constructable StyleSheets. WebComponentExporter should have a theme to make automation work properly in theme-generator.js. Theme property "autoInjectGlobalCssImports": true in theme.json enable auto injection. Disabled by default. Fixes: #19700 Co-authored-by: Marco Collovati <marco@vaadin.com>

CssImport annotation with just a value attribute can be injected automatically to shadow root of all exported web components (embedded applications) using Constructable StyleSheets. WebComponentExporter should have a theme to make automation work properly in theme-generator.js. Theme property "autoInjectGlobalCssImports": true in theme.json enable auto injection. Disabled by default. Fixes: #19700 Co-authored-by: Marco Collovati <marco@vaadin.com>

…9752) CssImport annotation with just a value attribute can be injected automatically to shadow root of all exported web components (embedded applications) using Constructable StyleSheets. WebComponentExporter should have a theme to make automation work properly in theme-generator.js. Theme property "autoInjectGlobalCssImports": true in theme.json enable auto injection. Disabled by default. Fixes: #19700

mcollovati and others added 6 commits July 23, 2024 11:47

fix: prevent style leaking with exported webcomponents

79b22e2

fix tests

b62f467

fix import

7cc9901

Merge branch 'main' into issues/embedding_cssimport_leaking_styles

f9920ce

fix: apply CssImport to exported webcomponent

875ea0d

Fixes: #19700

chore: fix comment

68cd69c

vaadin-bot added the +0.0.1 label Aug 1, 2024

mcollovati reviewed Aug 2, 2024

View reviewed changes

tltv added 2 commits August 2, 2024 16:45

chore: removed unused code

896a6f1

chore: add autoInjectGlobalCssImports theme property

87dd3b5

Default value is false and global CssImport (with just a value) is not injected by default to exported web components.

tltv marked this pull request as ready for review August 5, 2024 09:36

mcollovati approved these changes Aug 5, 2024

View reviewed changes

mshabarov added target/24.3 target/24.4 target/23.5 labels Aug 5, 2024

mshabarov merged commit b817168 into main Aug 5, 2024
41 of 42 checks passed

mshabarov deleted the fix/19700-cssimport-to-embedded branch August 5, 2024 11:39

vaadin-bot added cherry-picked-24.4 need to pick manually 23.5 labels Aug 5, 2024

vaadin-bot added the need to pick manually 24.3 label Aug 5, 2024

tltv added cherry-picked-24.3 and removed need to pick manually 24.3 labels Aug 6, 2024

tltv added cherry-picked-23.5 and removed need to pick manually 23.5 labels Aug 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: apply CssImport to exported webcomponent #19740

fix: apply CssImport to exported webcomponent #19740

tltv commented Aug 1, 2024 •

edited

Loading

github-actions bot commented Aug 1, 2024 •

edited

Loading

mcollovati Aug 2, 2024

mcollovati Aug 2, 2024

tltv Aug 2, 2024

sonarcloud bot commented Aug 5, 2024

vaadin-bot commented Aug 5, 2024

vaadin-bot commented Aug 5, 2024

fix: apply CssImport to exported webcomponent #19740

fix: apply CssImport to exported webcomponent #19740

Conversation

tltv commented Aug 1, 2024 • edited Loading

github-actions bot commented Aug 1, 2024 • edited Loading

Test Results

mcollovati Aug 2, 2024

Choose a reason for hiding this comment

mcollovati Aug 2, 2024

Choose a reason for hiding this comment

tltv Aug 2, 2024

Choose a reason for hiding this comment

sonarcloud bot commented Aug 5, 2024

Quality Gate passed

vaadin-bot commented Aug 5, 2024

vaadin-bot commented Aug 5, 2024

tltv commented Aug 1, 2024 •

edited

Loading

github-actions bot commented Aug 1, 2024 •

edited

Loading