@com.vaadin.flow.component.dependency.JsModule("./styles/shared-styles.js")
public class MainLayout extends de.tricept.vaadin.ui.components.FlexBoxLayout {
// Code
}
All files referenced by @JsModule for any component used in an application are included in a single JavaScript bundle file. When the application is bootstrapped, the whole bundle is loaded in the browser. If that bundle would contain two different variants of shared-styles.js then both would be put into effect which is most likely not what you want to achieve.
The most straightforward solution is to create separate production build bundles for client 1 and client 2 and then deploy them separately from each other. You can use a multi-module Maven project setup to achieve this.
A slightly more flexible approach is to include multiple variants in the same bundle, but wrap the contents so that they are not all activated. In practice, this means that the contents of e.g. shared-styles.js would be wrapped in a JavaScript function so that it isn’t activated just by loading the bundle, e.g.
window.activateClient1Styles = function() {
// ... original contents here
}
You can then activate the appropriate styles from your MainLayout by using something like UI.getCurrent().get().getPage().executeJs("window.activateClient1Styles()");.
Another alternative is to define the values of the customer specific custom property values in your shared styles using css selector targeting theme attribute value: