Layers

PikaCSS uses CSS @layer to establish cascade ordering between preflight styles and utility classes.

CSS layers provide explicit control over the cascade order. PikaCSS generates a @layer declaration at the top of the CSS output so that preflights always come before utilities, and custom layers can be inserted at any priority level.

By default, PikaCSS creates two layers: preflights (priority 1) and utilities (priority 10). Lower numbers render earlier in the layer order.

Config

Configure layers via layers in the engine config:

import { defineEngineConfig } from '@pikacss/core'

export default defineEngineConfig({
  layers: {
    reset: -1, // before preflights
    preflights: 1, // default
    components: 5, // between preflights and utilities
    utilities: 10, // default
  },
})

Use the __layer meta-property in a style definition to assign styles to a specific layer:

pika({
  __layer: 'components',
  display: 'flex',
  padding: '1rem',
})

Related config options:

• defaultPreflightsLayer — the layer for unlayered preflights (default: 'preflights').
• defaultUtilitiesLayer — the fallback layer for utility styles (default: 'utilities').

Examples

Input

const className = pika({
	__layer: 'components',
	display: 'flex',
	padding: '1rem',
})

Output

@layer preflights, components, utilities;

@layer components {
  .pk-a {
    display: flex;
  }
  .pk-b {
    padding: 1rem;
  }
}

Next

• Important — add !important to all styles.
• Preflights — inject base CSS before utilities.