@CssImport is not working on interface

I need to add @CssImport into interface for some common functionality but it is not working when i used @CssImport to the interface.
17889416.png

Could you please clarify what do you mean by “it does not work” ?

Do you mean that the CSS is not used on the page in the resulting application ?

How do you run the application ? In dev mode/production mode ?
Which platform/Flow version do you use ?

Denis Anisimov:
Could you please clarify what do you mean by “it does not work” ?

Do you mean that the CSS is not used on the page in the resulting application ?

How do you run the application ? In dev mode/production mode ?
Which platform/Flow version do you use ?

Actually I have common component across the application so i created the common interface across the application and I put @CssImport annotation to interface so i don’t need to do to all components. so when i put @CssImport into interface than my style is not applying but when i put into the class than it applies.

// Interface

public interface BaseLayout extends HasElement, ComponentPreparator, AttachNotifier, DetachNotifier {

	default void dynamicallyChangedTheme(String primaryColor, String secondaryColor) {
		VaadinSession.getCurrent().setAttribute(ThemeConstants.THEME_FIRST_COLOR, primaryColor);
		VaadinSession.getCurrent().setAttribute(ThemeConstants.THEME_SECOND_COLOR, secondaryColor);
		
		getElement().getStyle().set("--lumo-primary-color", primaryColor);
		getElement().getStyle().set("--lumo-primary-text-color", primaryColor);
		getElement().getStyle().set("--theme-color-first", primaryColor);
		getElement().getStyle().set("--theme-color-second", secondaryColor);
	}

}

// Class

@CssImport("frontend://styles/components/applayout/app-layout.css")
@CssImport("frontend://styles/components/button.css")
@CssImport("frontend://styles/components/label.css")
@CssImport("frontend://styles/style.css")
@CssImport("frontend://styles/misc/box-shadow-borders.css")
@CssImport("frontend://styles/misc/h2.css")
@StyleSheet("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap")
@CssImport(value = "frontend://styles/components/text-area.css", themeFor = "vaadin-text-area")
@CssImport(value = "frontend://styles/components/text-field.css", themeFor = "vaadin-text-field")
@CssImport(value = "frontend://styles/components/combo-box-item.css", themeFor = "vaadin-combo-box-item")
@CssImport(value = "frontend://styles/components/combobox.css", themeFor = "vaadin-combo-box")
@CssImport(value = "frontend://styles/components/checkbox.css", themeFor = "vaadin-checkbox")
@CssImport(value = "frontend://styles/components/grid.css", themeFor = "vaadin-grid")
@CssImport(value = "frontend://styles/components/radio-button.css", themeFor = "vaadin-radio-button")
@CssImport(value = "frontend://styles/components/dialog-overlay.css", themeFor = "vaadin-dialog-overlay")
public abstract class AbstractBaseLayout extends AppLayoutRouterLayout<LeftLayouts.LeftResponsiveHybrid> implements RouterLayout, BaseLayout {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	
	@Value("${primary.color}")
	String primaryColor;
	
	@Value("${secondary.color}")
	String secondaryColor;
	
	@PostConstruct
    private void postConstruct() {
		dynamicallyChangedTheme(primaryColor, secondaryColor);
		prepare();
    }

}

How do you run the application ? In dev mode/production mode ? Which platform/Flow version do you use ?

You don’t need to put the same @CssImport to any component in your app.
It’s enough to use them only for one component by the way.

Denis Anisimov:
How do you run the application ? In dev mode/production mode ? Which platform/Flow version do you use ?

It is in dev mode and i am using vaadin version 14.0.8

There were some changes how it works.
Please try the latest 14.0.9.
If it still doesn’t work then this is a bug, please create a ticket.