An initial stylesheet declares an import dependency

In the report@import chain inside blocking CSS

css_import_in_stylesheet · Review item

Short answer

This appears when a stylesheet in an audited page's initial head declares a valid @import dependency applicable to screen media. We inspect captured child stylesheets through at most three import edges. Review the dependency and preserve its order and conditions if you replace it.

Severity: Notice. For review: a static dependency is not proof of an extra physical request or a measured delay.

Why it matters

An @import makes one stylesheet depend on another. Reviewing that dependency can make loading and maintenance simpler. Cache, preload, repeated references and browser behavior affect actual loading; this check does not measure those effects.

What to do

  1. Read the original stylesheet address, import excerpt and line, resolved child address, dependency depth and the pages that reference the stylesheet. Notice any incomplete source or depth limit.
  2. Where appropriate, bundle the styles at build time or use direct stylesheet links. Preserve the original cascade order, layer, supports and media conditions, and relative address resolution.
  3. Inspect the page in a browser after the change. Removing an import declaration alone does not prove that the visual result or loading time improved.

When to leave it as it is: Keep the import when the dependency is intentional and appropriate for your site. This is a review item, not a requirement to bundle every stylesheet.

What we read

We start from stylesheets linked in the page's original HTML head, resolved against its base address and confirmed to apply to screen media. A body-only or inert link does not establish an initial root; named sets, uncertain placement and device-dependent conditions remain unchecked.

We parse the captured CSS once and record each import's decoded address, original excerpt, line and column, and any layer, supports or media condition. An import proven invalid or misplaced does not count; when we cannot tell whether earlier rules make an import invalid, coverage stays incomplete.

Relative child addresses use the actual final parent address, and a child with no overriding encoding declaration uses its parent's captured encoding. An unknown encoding label leaves coverage incomplete. The audit reads child stylesheets under its existing robots.txt rules, pacing, cancellation and request limits. The root is depth zero; we inspect through three edges and do not follow a fourth. Cycles, missing children and work limits remain visible coverage gaps.

The problem is grouped by the original root stylesheet address and keeps all pages that referenced it previously. A known dependency can be reported with incomplete chain evidence; incomplete coverage cannot prove a correction.

Example & evidence

Illustrative example — schematic CSS and dependency, not a live audit.

The initial head of a page at https://bakery.example/ links /assets/main.css for screen media. That stylesheet contains:

@import "theme.css" screen;

The recorded dependency resolves to /assets/theme.css. A possible correction is to replace the import with a build-time bundle or correctly ordered direct links while preserving the original conditions and relative addresses. A new full audit must read the same root stylesheet and every page that linked it before with complete coverage before confirming the correction.

Confirm & check again

Check for yourself: Open the stylesheet and inspect top-level imports. In a browser's Network panel, inspect the actual requests separately; a declaration by itself does not establish a measured network cost.

Check again: Full audit — Run a new full audit. A correction needs the same original stylesheet and every page that linked it before, sufficient complete source coverage, and no applicable import dependency. Missing children, lost members, unreadable CSS or a depth cap leave the correction unconfirmed.

Limits & sources

This is a static source check. We do not render the page, evaluate @supports conditions or establish a browser waterfall, paint delay or speed improvement. Unsupported syntax, uncertain encoding and unresolved conditions remain unchecked. Imported child inspection does not extend the separate font and animation checks into a cross-stylesheet cascade.

Confidence: High The dependency is recorded in source, but a browser's actual request count and delay are not measured.

Sources

  • Chrome for Developers, Lighthouse is moving to performance insight audits — Describes the move from Lighthouse audits to performance insights. It provides performance-review context, not the product's static import predicate or three-edge inspection limit. Checked 10 October 2026.

Editorial review: 30 October 2026