Package com.vaadin.flow.component.dependency

Annotation Interface 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:

  • Nested Class Summary

    Nested Classes
    Modifier and Type
    Class
    Description
    static @interface 
    CssImport.Container
    Internal annotation to enable use of multiple CssImport annotations.

  • 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 Details

    • 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:
      ""