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