postcss-prepend-layer

A PostCSS plugin that prepends @layer declarations to your CSS files.

Installation

npm install postcss-prepend-layer --save-dev

Usage

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-prepend-layer')({
      layers: [
        'design-system.base',
        'design-system.layout',
        'design-system.components',
        'design-system.utilities',
        'design-system.theme'
      ]
    })
  ]
}

TypeScript

import postcss from 'postcss';
import prependLayer from 'postcss-prepend-layer';

postcss([
  prependLayer({
    layers: ['base', 'components', 'utilities']
  })
])

Options

layers (required)

Type: string[]

An array of layer names to prepend to your CSS file.

Output

Given this configuration:

prependLayer({
  layers: ['base', 'components', 'utilities']
})

The plugin will prepend this to your CSS:

@layer base, components, utilities;

License

MIT