{"action":"created","issue":{"url":"https://api.github.com/repos/vaadin/flow/issues/4602","repository_url":"https://api.github.com/repos/vaadin/flow","labels_url":"https://api.github.com/repos/vaadin/flow/issues/4602/labels{/name}","comments_url":"https://api.github.com/repos/vaadin/flow/issues/4602/comments","events_url":"https://api.github.com/repos/vaadin/flow/issues/4602/events","html_url":"https://github.com/vaadin/flow/issues/4602","id":359863485,"node_id":"MDU6SXNzdWUzNTk4NjM0ODU=","number":4602,"title":"Inconstant loading order of theme files causes css override issues","user":{"login":"rolfsmeds","id":4611559,"node_id":"MDQ6VXNlcjQ2MTE1NTk=","avatar_url":"https://avatars2.githubusercontent.com/u/4611559?v=4","gravatar_id":"","url":"https://api.github.com/users/rolfsmeds","html_url":"https://github.com/rolfsmeds","followers_url":"https://api.github.com/users/rolfsmeds/followers","following_url":"https://api.github.com/users/rolfsmeds/following{/other_user}","gists_url":"https://api.github.com/users/rolfsmeds/gists{/gist_id}","starred_url":"https://api.github.com/users/rolfsmeds/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rolfsmeds/subscriptions","organizations_url":"https://api.github.com/users/rolfsmeds/orgs","repos_url":"https://api.github.com/users/rolfsmeds/repos","events_url":"https://api.github.com/users/rolfsmeds/events{/privacy}","received_events_url":"https://api.github.com/users/rolfsmeds/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-09-13T11:56:15Z","updated_at":"2018-09-14T07:05:38Z","closed_at":null,"author_association":"NONE","body":"This issue has two distinct aspects, both stemming from the fact that the order in which theme files and the application's custom styles are loaded is not constant but varies in unpredictable ways.\r\n\r\n**Case 1: Using Lumo as the theme, and applying tweaks to components with custom theme modules**\r\n- Any custom theme modules are loaded up-front when the application loads.\r\n- If the initial view of the application loaded into the browser does not contain e.g. `vaadin-button`, the Lumo theme modules for `vaadin-button` are not loaded.\r\n- When a` vaadin-button` is loaded into the UI for the first time, its Lumo theme modules are loaded.\r\n- Since the Lumo theme modules have been loaded _after_ the application's custom theme modules, their css will override any css with selectors of the same weight.\r\n- The only workaround seems to be to artificially inflate the specificity of styles in the custom theme modules, either by adding `!important` after every property, or e.g. by prefixing each selector with `:host(vaadin-button)`.\r\n- This issue can be easily missed by developers since it only occurs if the component in question is not present in the view initially loaded into the browser.\r\n\r\n**Case 2: Using a custom theme with Lumo as basis**\r\n- To clarify, this means creating a custom theme class and theme module files for each component, which import their Lumo equivalents.\r\n- Since developers will rarely want to create a new theme from scratch, basing the custom theme on Lumo, by importing its component theme modules into the theme's custom theme modules, is the most reasonable option.\r\n- This is also a workaround for Case 1, since the custom theme modules are now loaded simultaneously with the Lumo modules.\r\n- The problem is instead that Lumo's default variable values sometimes (randomly?) override any values specified in the custom theme.\r\n- This seems to be caused by the fact that Lumo theme modules for components import the Lumo base files containing the default values, and that these are sometimes (randomly?) loaded into the browser _after_ the custom theme's global stylesheet.\r\n- This issue can also be easily missed because it only happens sometimes. In Chrome I've been able to reproduce it fairly consistently by soft-reloading (Cmd-R) the page, but I suspect that it depends on purely stochastic factors such as file size.\r\n- I have not been able to find a reliable workaround.\r\n\r\n@jouni knows more about the issue.\r\n"},"comment":{"url":"https://api.github.com/repos/vaadin/flow/issues/comments/421252396","html_url":"https://github.com/vaadin/flow/issues/4602#issuecomment-421252396","issue_url":"https://api.github.com/repos/vaadin/flow/issues/4602","id":421252396,"node_id":"MDEyOklzc3VlQ29tbWVudDQyMTI1MjM5Ng==","user":{"login":"jouni","id":66382,"node_id":"MDQ6VXNlcjY2Mzgy","avatar_url":"https://avatars3.githubusercontent.com/u/66382?v=4","gravatar_id":"","url":"https://api.github.com/users/jouni","html_url":"https://github.com/jouni","followers_url":"https://api.github.com/users/jouni/followers","following_url":"https://api.github.com/users/jouni/following{/other_user}","gists_url":"https://api.github.com/users/jouni/gists{/gist_id}","starred_url":"https://api.github.com/users/jouni/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jouni/subscriptions","organizations_url":"https://api.github.com/users/jouni/orgs","repos_url":"https://api.github.com/users/jouni/repos","events_url":"https://api.github.com/users/jouni/events{/privacy}","received_events_url":"https://api.github.com/users/jouni/received_events","type":"User","site_admin":false},"created_at":"2018-09-14T07:05:38Z","updated_at":"2018-09-14T07:05:38Z","author_association":"MEMBER","body":"> Is there anything here that is inherent to Flow, or would the same problems also occur in a similar Polymer application?\r\n\r\nFlow handles to component imports, so the developer can’t clearly control the import priority of those."}}
{"actor":{"display_login":"jouni"}}