CSS layer

Why use CSS layers

CSS cascade layers allow CSS authors to control specificity.
For instance a Bifrost selector may have a specificity of 0,2,0.

.bf-checkbox-button.bf-checkbox {
  background-color: var(--bfc-base-3);
}
.bf-checkbox-button.bf-checkbox {
  background-color: var(--bfc-base-3);
}

Without layers: Custom selector needs to obtain a higher than 0,2,0 specificity

.bf-checkbox-button.bf-checkbox.my-red-bg {
  background-color: var(--bfc-alert);
}
.bf-checkbox-button.bf-checkbox.my-red-bg {
  background-color: var(--bfc-alert);
}

With layers: Custom selectors will be applied regardless of specificity.

.my-red-bg {
  background-color: var(--bfc-alert);
}
.my-red-bg {
  background-color: var(--bfc-alert);
}

Why not use CSS layers

For existing projects, you might encounter issues with selectors that will now be more specific than Bifrost-CSS.

Import bifrost CSS in a layer

Even though Bifrost does not currently use CSS layers internally, you can use the layer keyword when importing Bifrost CSS using @import statements, but there are a few things to keep in mind.

1. layer is a CSS keyword, so we cannot use them with module import in JS.
2. Some of our internal CSS targets icons from font awesome, so make sure the font awesome CSS is included on the same layer as Bifrost CSS.
3. Our main CSS bundle file includes @import statements to include external font files, and some bundlers will hoist these statements to the top.

To work around these limitations we can first:

Prevent font awesome from auto-injecting CSS by setting the autoAddCss config option to false (default true).

import { config } from "@fortawesome/fontawesome-svg-core";

config.autoAddCss = false;
import { config } from "@fortawesome/fontawesome-svg-core";

config.autoAddCss = false;

Then import font-imports.css instead of bifrost-app.css and create a CSS bundle file:

- import "@intility/bifrost-react/bifrost-app.css";
+ import "@intility/bifrost-react/font-imports.css";
+ import "./bundle.css";
- import "@intility/bifrost-react/bifrost-app.css";
+ import "@intility/bifrost-react/font-imports.css";
+ import "./bundle.css";

In the bundle.css file, import font awesome and bifrost bundle CSS in the same layer:

/* bifrost-bundle.css includes selectors overriding font-awesome styling, so it
 * needs to be included later, using the same layer name */
@import "@fortawesome/fontawesome-svg-core/styles.css" layer(bifrost);
@import "@intility/bifrost-react/bifrost-bundle.css" layer(bifrost);
/* uncomment if you use Bifrost <DatePicker> or Publish <Article>
 * (and remove their JS module imports) */
/* @import "@intility/bifrost-react-datepicker/datepicker.css" layer(bifrost); */
/* @import '@intility/publish-article/Article.css' layer(publish-article); */
/* bifrost-bundle.css includes selectors overriding font-awesome styling, so it
 * needs to be included later, using the same layer name */
@import "@fortawesome/fontawesome-svg-core/styles.css" layer(bifrost);
@import "@intility/bifrost-react/bifrost-bundle.css" layer(bifrost);
/* uncomment if you use Bifrost <DatePicker> or Publish <Article>
 * (and remove their JS module imports) */
/* @import "@intility/bifrost-react-datepicker/datepicker.css" layer(bifrost); */
/* @import '@intility/publish-article/Article.css' layer(publish-article); */

Project files

Author styles are unlayered by default, which is what you often want since it means your own selectors will always win over layered ones. Opionally you can declare your own layers after bifrost.

@import "@fortawesome/fontawesome-svg-core/styles.css" layer(bifrost);
@import "@intility/bifrost-react/bifrost-bundle.css" layer(bifrost);
@import "./global-layer.css" layer(global); /* optional */
@import "./unlayered.css";
@import "@fortawesome/fontawesome-svg-core/styles.css" layer(bifrost);
@import "@intility/bifrost-react/bifrost-bundle.css" layer(bifrost);
@import "./global-layer.css" layer(global); /* optional */
@import "./unlayered.css";

Use with Tailwind

Tailwind CSS is already layered (since v4). To let tailwind override bifrost, import it after bifrost. The following example assumes you've configured @tailwindcss/vite.

We also recommend using the @intility/tailwind-bifrost-theme package.

The base layer from tailwind introduces some resets we don't want overriding bifrost CSS, so we declare base (and components if needed) as the first layer(s), then bifrost, then let tailwind do its thing.

@layer base, components, bifrost;
@import "@fortawesome/fontawesome-svg-core/styles.css" layer(bifrost);
@import "@intility/bifrost-react/bifrost-bundle.css" layer(bifrost);
/* uncomment if you use Bifrost <DatePicker> or Publish <Article> */
/* @import '@intility/bifrost-react-datepicker/datepicker.css' layer(bifrost); */
/* @import '@intility/publish-article/Article.css' layer(publish-article); */
@import "tailwindcss";
@import "@intility/tailwind-bifrost-theme";
@layer base, components, bifrost;
@import "@fortawesome/fontawesome-svg-core/styles.css" layer(bifrost);
@import "@intility/bifrost-react/bifrost-bundle.css" layer(bifrost);
/* uncomment if you use Bifrost <DatePicker> or Publish <Article> */
/* @import '@intility/bifrost-react-datepicker/datepicker.css' layer(bifrost); */
/* @import '@intility/publish-article/Article.css' layer(publish-article); */
@import "tailwindcss";
@import "@intility/tailwind-bifrost-theme";