Support splitting CSS files by media queries via configurable output

[Hugoer]

Description: There is a common need in modern frontend projects to split CSS files into separate outputs based on media queries — especially to support viewport-based loading strategies in a mobile-first architecture.

Currently, FE Build processes a single .css file into a single output, even when that file contains multiple @media rules. This can lead to unnecessarily large CSS payloads for smaller devices and prevents more granular control over style delivery.

Supporting a configurable split based on media queries would enable build outputs like:

Input

button.clientlib.css

If it contains media queries for "medium", "large", and "xlarge" breakpoints.

Output

button.small.clientlib.css
button.medium.clientlib.css
button.large.clientlib.css
button.xlarge.clientlib.css

This separation allows for better delivery and loading performance, especially in projects that serve styles conditionally based on viewport or context.

Constraints & Requirements

• This behavior must not introduce breaking changes.
• The split should only occur if explicitly configured via the FE Build configuration file.
• The feature should follow a mobile-first philosophy: unwrapped styles apply to smaller screens by default.

Proposed Configuration Format The configuration for this feature could look like this:

{
  output: {
    path: path.join(destinationPath, 'sizes'),
    name: '[query]/[name].[ext]',
  },
  queries: {
    '(min-width: 991px)': 'medium',
    '(min-width: 1118px)': 'large',
    '(min-width: 1474px) and (max-width: 1679px)': 'xlarge',
    '(min-width: 1442px)': 'xlarge',
    '(min-width: 1580px)': 'xlarge',
    '(min-width: 1674px)': 'xlarge',
    '(min-width: 1678px)': 'xlarge',
  },
}

This is aligned with the postcss-extract-media-query plugin, which we already use at project level. Our current implementation wraps this behavior on top of FE Build, but we believe it would be beneficial to integrate it directly into the build system, provided a compatible configuration interface is adopted.

Let me know if you'd like me to submit a draft implementation or PR to start the discussion.