Optimization idea: Split file by media query(s).

Not sure if it makes sense to live in this package but since we have the AST, would be easy to implement here.

The basic idea is that we could take a css file like this as input:

/* Set the background color of body to tan */
body {
    background-color: tan;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
    body {
        background-color: blue;
    }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
    body {
        background-color: olive;
    }
}

/* Show dark mode when user prefers it */
@media (prefers-color-scheme: dark) {
  body  { 
    background:  #333; 
    color: white;
  }
}

And then split it into 4 files, one for each unique media query included in the file:
Media: N/A

body {
    background-color: tan;
}

Media: screen and (max-width: 992px)

body {
    background-color: blue;
}

Media: screen and (max-width: 600px)

body {
    background-color: olive;
}

Media: (prefers-color-scheme: dark)

body  { 
  background:  #333; 
  color: white;
}

This list of split files could then be used by bundlers (like parcel) to generate multiple <link rel="stylesheet" media="..." href="..." /> in the HTML.

This would be a performance optimization as link tags with media queries are non-render blocking for the browser.

Review the package's AST support for media queries and the bundler context mentioned in the issue; no specific file or test is identified. Define how unique media queries, including the N/A bucket, map to separate outputs and how bundlers such as Parcel consume them. Done means the behavior and output contract are agreed and covered by tests.