when using component based systems, aggregation of everything doesn't make much sense anymore.

It might be useful only to merge certain groups of css files. For instance only merge CSS_BASE and CSS_LAYOUT into one or two files.

global-styling:
  version: VERSION
  css:
    base:
      css/base/elements.css: {}    // ⎫
      css/base/typography.css: {}  // ⎪
      css/base/print.css: {}       // ⎬ should be merged
      css/base/colors.css: {}      // ⎭
    component:
    layout:
      css/layout/narrow.css: {}     // ⎫
      css/layout/layout.css: {}     // ⎬ should be merged
      css/layout/layout-wide.css: {}// ⎭

Also it might be helpful do aggregate all css files in each component

cuddly-slider:
  version: 1.x
  css:
    component:
      css/cuddly-slider-layout.css: {} // ⎫
      css/cuddly-slider-colors.css: {} // ⎬ should be merged
      css/cuddly-slider-fonts.css: {}  // ⎭

So I am proposing three options:

☐ Aggregate all css files
☑ Aggregate base-level css files
☑ Aggregate layout-level css files
☑ Aggregate layout-level and base-level css files
☑ Aggregate css files per component

Comments

loominade created an issue. See original summary.

loominade’s picture

Issue summary: View changes