📦 plugin-css-cascade-layers

A plugin for wrapping CSS modules of your Docusaurus site in CSS Cascade Layers. This modern CSS feature is widely supported by all browsers. It allows grouping CSS rules in layers of specificity and gives you more control over the CSS cascade.

Use this plugin to:

apply a top-level @layer myLayer { ... } block rule around any CSS module, including un-layered third-party CSS.
define an explicit layer ordering

Installation

npm2yarn

npm install --save @docusaurus/plugin-css-cascade-layers

Configuration

Accepted fields:

mdx-code-block

<APITable>

Name	Type	Default	Description
`layers`	`Layers`	Built-in layers	An object representing all the CSS cascade layers you want to use, and whether the layer should be applied to a given file path. See examples and types below.

mdx-code-block

</APITable>

Types

`Layers`

TypeScript

type Layers = Record<
  string, // layer name
  (filePath: string) => boolean // layer matcher
>;

The layers object is defined by:

key: the name of a layer
value: a function to define if a given CSS module file should be in that layer

Example configuration

You can configure this plugin through plugin options.

JavaScript

const options = {
  layers: {
    'docusaurus.infima': (filePath) =>
      filePath.includes('/node_modules/infima/dist'),
    'docusaurus.theme-classic': (filePath) =>
      filePath.includes('/node_modules/@docusaurus/theme-classic/lib'),
  },
};