test: back per-component theme CSS tests with faux themable elements - #25103
Draft
Artur- wants to merge 1 commit into
Draft
test: back per-component theme CSS tests with faux themable elements#25103Artur- wants to merge 1 commit into
Artur- wants to merge 1 commit into
Conversation
Contributor
Test Results 1 373 files - 76 1 374 suites - 76 1h 43m 55s ⏱️ + 12m 30s For more details on these failures and errors, see this check. Results for commit 79c6a50. ± Comparison against base commit dcfc70e. ♻️ This comment has been updated with latest results. |
Flow's per-component theme CSS (theme/components/<tag>.css) generates an import of @vaadin/vaadin-themable-mixin/register-styles, and registerStyles only reaches a shadow DOM when the target element uses ThemableMixin. The theme ITs relied on real @vaadin/text-field and @vaadin/horizontal-layout web components purely to exercise this machinery. Replace those with faux ThemableMixin(LitElement) elements registered under the same tags, so no real Vaadin components are pulled in: - themable-input.js stands in for vaadin-text-field, reproducing the .vaadin-field-container > [part=input-field] shadow path the ITs walk. - faux-horizontal-layout.js stands in for vaadin-horizontal-layout with a <slot> so the ::slotted(:nth-child) per-component CSS applies. Keeping the real tag names means the existing theme/components CSS, @CssImport(themeFor=...) and ITs keep matching unchanged. @vaadin/vaadin-themable-mixin is still required to resolve the generated register-styles import. Declare it centrally on flow-test-lumo, the shared dependency of every theme-test module, so those modules build without any real component. Drop the now-unused @vaadin/text-field from vite-basics.
Artur-
force-pushed
the
remove-real-component-theme-tests
branch
from
August 5, 2026 16:31
496f6f4 to
79c6a50
Compare
totally-not-ai
Bot
changed the title
|
Artur-
marked this pull request as draft
August 6, 2026 05:10
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Flow's per-component theme CSS feature (
theme/components/<tag>.css) generates an import of@vaadin/vaadin-themable-mixin/register-styles, andregisterStylesonly reaches a component's shadow DOM when the target element usesThemableMixin. The theme ITs pulled in real@vaadin/text-fieldand@vaadin/horizontal-layoutweb components purely to exercise this machinery.Replace those with faux
ThemableMixin(LitElement)elements registered under the same tag names, so no real Vaadin components are needed and the existing theme CSS,@CssImport(themeFor=...)and ITs keep matching unchanged:themable-input.jsstands in forvaadin-text-field, reproducing the.vaadin-field-container > [part=input-field]shadow path the live-reload and vite ITs walk.faux-horizontal-layout.jsstands in forvaadin-horizontal-layoutwith a<slot>so the::slotted(:nth-child)per-component CSS applies.A plain custom element (as in #24440) never receives the registered styles, which is why that approach failed; mixing in
ThemableMixinis what makes it work.@vaadin/vaadin-themable-mixinis still required to resolve the generatedregister-stylesimport. It is declared centrally onflow-test-lumo— the shared dependency of every theme-test module — so those modules build without any real component. The now-unused real@vaadin/text-fieldis dropped from thevite-basics,vite-context-pathandvite-productionpackage.jsonfiles.Supersedes #24440.