Merge adjacent layers in minification

[jacobrask]

The following code

@import url('./layout/tokens.css') layer(theme);
@import url('./ornamental/tokens.css') layer(theme);
@import url('./layout/defaults.css') layer(defaults);

Currently bundles/minifies into

@layer theme {
  // layout/tokens.css content
}
@layer theme {
  // ornamental/tokens.css content
}
@layer defaults {
  // ornamental/tokens.css content
}

While it could minify to

@layer theme {
  // layout/tokens.css content
  // ornamental/tokens.css content
}
@layer defaults {
  // ornamental/tokens.css content
}

As a project grows into a large number of files this adds up in the total bundle.

As a further optimization it should even be possible to hoist the contents of any layer to the first occurrence of that layer, and always only output a single @layer for a unique name in any one bundle. That's the way the cascade works anyway.

[devongovett]

Seems like a good idea! Should be pretty simple to implement too. Here's how it's done for style rules: https://github.com/parcel-bundler/parcel-css/blob/3dd150d90c11d8f963e55866dbee4c9f42e6cf42/src/rules/mod.rs#L319

If you're interested in contributing, this would probably be a pretty good first issue. Let me know if you have any questions!

[jacobrask]

Sure, I'll give it a go in a few weeks