[Audit] Avoid CSS @import

#### Provide a basic description of the audit

Check whether stylesheets are being imported from within other stylesheets.

Aim is to identify the imported stylesheets through the request chain.

Drawback to this approach is that only identifies cases where the stylesheet is imported in the Lighthouse run. Searching stylesheets source code is an alternative approach that works for a wider set of scenarios e.g. `@import` enclosed within a media query. This second approach would still miss some stylesheets e.g those wrapped in IE's conditional comments.

#### How would the audit appear in the report?

This audit will come under performance.

When passing:

- Title: Avoids css @import
- Description: Using CSS @import delays the discovery of stylesheets and delays rendering (to be wordsmithed)

When failing:
- Title: Avoids css @import
- Description: Using CSS @import delays the discovery of stylesheets and delays rendering (to be wordsmithed)
- Table: Containing stylesheet, @imported stylesheet

#### How is this audit different from existing ones?

There's no existing audit.

Imported stylesheets are visible in the Avoid Chaining Critical Requests audit but they're not highlighted and there's no specific advice about avoiding them.

#### What % of developers/pages will this impact?

Querying https://publicwww.com for `"@import url" filetype:css` returns over 100,000 CSS files using `@import`.

#### How is the new audit making a better web for end users?

Styles imported into another stylesheet via `@import` delay initial rendering as they are discovered late – a browser must download and parse the outer stylesheet before they are discovered.

Gains will depend on the number and size of imported stylesheets, and the length of the import chain.

As example of the gains that might be made here's a comparison of snowpack.dev with and without the imported stylesheet on Moto G4 / 3G.

In the top test the @imported stylesheet has been blocked and the page starts rendering 0.5s earlier.

https://www.webpagetest.org/video/compare.php?tests=201221_DiWH_925d14973580957e917ef244fb6f322a%2C201221_Di7P_cec2262fdef423f979661401f762199f&thumbSize=200&ival=100&end=visual

If the imported stylesheet was directly in the document the gains should be roughly similar as the preloader will discover it and dispatch the request earlier (avoiding the latency penalty)

#### What is the resourcing situation?

@andydavies will implement and document the audit

#### Any other links or documentation that we should check out?

None

Start by reviewing the existing Avoid Chaining Critical Requests audit and the performance report requirements described here. Trace how imported stylesheets appear in the request chain, then define the audit output around containing and imported stylesheets. Done means the audit reports CSS @import usage with the specified titles, descriptions, and table.

Written by the indexing model from the issue text.