Preflights

Inject base styles that render before utility classes.

Preflights are CSS rules injected at the top of the generated stylesheet, inside the preflights layer by default. Use them for CSS resets, global styles, font-face declarations, or any CSS that should appear before atomic utility classes.

A preflight entry can be:

• A raw CSS string
• A structured definition object (key-value CSS properties)
• A function (engine, isFormatted, ctx) => ... (sync or async) that returns CSS text or a definition object

Config

import { defineEngineConfig } from '@pikacss/core'

export default defineEngineConfig({
  // Required for the `layer: 'base'` preflight below
  layers: { base: 0 },

  preflights: [
    // Raw CSS string
    '*, *::before, *::after { box-sizing: border-box; }',

    // Structured definition
    {
      body: {
        margin: '0',
        fontFamily: 'system-ui, sans-serif',
      },
    },

    // With layer assignment
    {
      layer: 'base',
      preflight: 'html { line-height: 1.5; }',
    },

    // Async factory function
    async (engine, isFormatted, ctx) => {
      return '/* dynamic preflight */'
    },
  ],
})

Layered preflights need a registered layer

A preflight wrapped with layer must have that layer registered in config.layers (the example above registers base at order 0, before the default preflights: 1 and utilities: 10). An unregistered layer is left out of the generated @layer order declaration, and per CSS @layer semantics it would then be ordered after all declared layers — base styles would override your utilities.

Preflight functions receive a third ctx argument during a renderPreflights pass. A preflight that invokes other preflights must forward it to engine.invokePreflight(fn, isFormatted, ctx) so each preflight function still runs exactly once per render pass.

Examples

import { defineEngineConfig } from '@pikacss/core'

export const preflightConfig = defineEngineConfig({
	preflights: [
		'*, *::before, *::after { box-sizing: border-box; }',
	],
})

Next

• Variables — define CSS custom properties.
• Layers — control preflight layer ordering.