Package com.vaadin.flow.component.dependency

Annotation Type CssImport

  • @Retention(RUNTIME)
@Target(TYPE)
@Inherited
@Documented
@Repeatable(Container.class)
public @interface CssImport
    Imports a CSS file into the application bundle.

    The CSS files should be located in the place as JS module files:

    • inside frontend directory in your root project folder in case of WAR project
    • inside META-INF/resources/frontend directory (inside a project resources folder) in case of JAR project (if you are using Maven this is src/main/resources/META-INF/resources/frontend directory).

    The annotation doesn't have any effect in the compatibility mode: use it only for Polymer 3 templates.

    Depending on the attributes provided, the CSS content will be appended in different ways:

    • When specifying only the 'value', it will be appended to the 'document.head' as a `style` element: 
        <style>
    CSS-CONTENT
  </style>
    • When specifying 'value' and 'include', the 'include' value is used for including a defined module. Multiple modules are allowed by passing a space separated list. 
        <style include="INCLUDE-VALUE">
    CSS-CONTENT
  </style>
    • When 'value' and 'id' are given, a new 'dom-module' with the provided 'id' is registered using the registerStyles function from vaadin-themable-mixin. The 'include' parameter is allowed and is added to the <style> element inside the module template.
    • When 'value' and 'themeFor' are given, a new 'dom-module' for customizing a themable element is registered using the registerStyles function from vaadin-themable-mixin. The 'include' parameter is allowed and is added to the <style> element inside the module template.*

    It is guaranteed that dependencies will be loaded only once. The files loaded will be in the same order as the annotations were on the class. However, loading order is only guaranteed on a class level; Annotations from different classes may appear in different order, grouped by the annotated class. Also, files identified by @CssImport will be loaded after JsModule and JavaScript.

    NOTE: Currently all frontend resources are bundled together into one big bundle. This means, that CSS files loaded by one class will be present on a view constructed by another class. For example, if there are two classes RootRoute annotated with @Route(""), and another class RouteA annotated with @Route("route-a") and @CssImport("./styles/custom-style.css"), the custom-style.css will be present on the root route as well.

    Since:
    2.0
    See Also:
    JsModule

    • Required Element Summary

      Required Elements 
      Modifier and Type Required Element Description
      String value
      Location of the file with the CSS content.

    • Optional Element Summary

      Optional Elements 
      Modifier and Type Optional Element Description
      String id
      The 'id' of the new 'dom-module' created.
      String include
      The 'id' of a module to include in the generated 'custom-style'.
      String themeFor
      The tag name of the themable element that the generated 'dom-module' will target.

    • Element Detail

      • value

        String value
        Location of the file with the CSS content.
        Returns:
        the value.

      • include

        String include
        The 'id' of a module to include in the generated 'custom-style'.
        Returns:
        the include value.
        Default:
        ""

      • id

        String id
        The 'id' of the new 'dom-module' created.
        Returns:
        the id.
        Default:
        ""

      • themeFor

        String themeFor
        The tag name of the themable element that the generated 'dom-module' will target.
        Returns:
        the themable element.
        Default:
        ""