com.vaadin.flow.component.dependency

Annotation Type CssImport

@Retention(value=RUNTIME)
 @Target(value=TYPE)
 @Inherited
 @Documented
 @Repeatable(value=CssImport.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' inside a '<custom-style>' block.

    <custom-style>
      <style>
        CSS-CONTENT
      </style>
    </custom-style>
  
   

• When specifying 'value' and 'include', it is appended inside a '<custom-style>' block, but 'include' value is used for including a defined module. Multiple modules are allowed by passing a space separated list.

    <custom-style>
      <style include="INCLUDE-VALUE">
        CSS-CONTENT
      </style>
    </custom-style>
  
   

• When 'value' and 'id' are given, a new 'dom-module' with the provided 'id' is created, the 'include' parameter is allowed and is added to the <style> tag inside the module template.

   <dom-module id="ID-VALUE">
     <template>
       <style include="INCLUDE-VALUE">
         CSS-CONTENT
       </style>
     </template>
   </dom-module>
  
   

• When 'value' and 'themeFor' are given, a new 'dom-module' for customizing a themable element is created, the 'include' parameter is allowed and is added to the <style> tag inside the module template.

   <dom-module id="RANDOM-ID" theme-for="THEME-FOR-VALUE">
     <template>
       <style include="INCLUDE-VALUE">
         CSS-CONTENT
       </style>
     </template>
   </dom-module>
  
   

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 and Description
String	value Location of the file with the CSS content.

Optional Element Summary

Optional Elements

Modifier and Type	Optional Element and 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

public abstract String value

Location of the file with the CSS content.

Returns:

the value.

include

public abstract String include

The 'id' of a module to include in the generated 'custom-style'.

Returns:

the include value.

Default:

""

id

public abstract String id

The 'id' of the new 'dom-module' created.

Returns:

the id.

Default:

""

themeFor

public abstract String themeFor

The tag name of the themable element that the generated 'dom-module' will target.

Returns:

the themable element.

Default:

""