com.vaadin.flow.component.dependency

Annotation Type CssImport

@Retention(value=RUNTIME)
 @Target(value=TYPE)
 @Documented
 @Repeatable(value=CssImport.Container.class)
public @interface CssImport

Instructs flow to import 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>
  
   

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:

""