How to use custom CSS in a bundle

Sometimes the CSS styles provided by a map.apps theme are not enough to design the widget provided by your bundle. Instead of extending the theme globally, you just want to use some custom CSS files inside that bundle.

To define CSS that is only available to local widgets (that is, in the bundle that defines them) you need to add a CSS themes extension.

Step 1: Add some CSS

Create a CSS file in your bundle folder, one for each theme you want to support.
For example, to support custom styles for the map.apps summer and winter themes, add the following files to your bundle
```
./themes/winter/myBundle.css
./themes/summer/myBundle.css
```
Add the CSS required by your bundle to the files.

Step 2: Declare the theme extension

Add the cssThemesExtension array to the bundle manifest and add an entry for every theme you want to support.

manifest.json

{
    "cssThemesExtension": [{
         "name": "winter",
         "files": ["./themes/winter/myBundle.css"]
    },
    {
         "name": "summer",
         "files": ["./themes/summer/myBundle.css"]
    }]
}

The name property must match the theme name that should be supported with your bundle.
The files property must match the path to your main CSS file, relative to the the manifest.json file.

Advanced usage

Apply style to all themes

You may use "*" as the theme name if your custom CSS can be used with all available themes:

manifest.json

{
    "cssThemesExtension": [{
         "name": "*",
    }]
}

This will load the CSS from ./all/all.css.

Use default file path

If you don’t specify a file name, the custom CSS is expected to be specified in the file ./<theme_name>/<theme_name>.css:

manifest.json

{
    "cssThemesExtension": [{
         "name": "summer"
    }]
}