CSS Module Bundler

Build a CSS bundler that combines multiple CSS modules from different sources into a single optimized stylesheet.

Requirements

Your tool should accept CSS content from multiple named sources (such as different component stylesheets) and combine them into a single minified output file. Each source should be identifiable by name so that errors and warnings can be traced back to their origin.

The bundler should:

1. Accept CSS content from at least 3 different named sources
2. Combine all sources into a single minified stylesheet
3. Report any errors or warnings, clearly indicating which source they came from
4. Output the final minified CSS to a file named bundle.css
5. Display statistics showing the original total size, final size, and compression ratio

Implementation

@generates

API

/**
 * Bundles CSS from multiple named sources into a single minified file.
 *
 * @param {Object} sources - An object where keys are source names and values are CSS strings
 * @param {string} outputPath - Path where the bundled CSS should be written
 * @returns {Object} Result object containing styles, errors, warnings, and stats
 */
function bundleCSS(sources, outputPath) {
  // IMPLEMENTATION HERE
}

module.exports = { bundleCSS };

Test Cases

• Given CSS from three named sources ('header', 'footer', 'sidebar'), the bundler successfully combines them into a single minified file @test
• When one source contains invalid CSS, the bundler reports an error indicating the source name @test
• The bundler correctly calculates and displays the total original size, minified size, and compression percentage @test

Dependencies { .dependencies }

clean-css { .dependency }

Provides CSS minification and optimization capabilities.