CSS Bundle Builder

Build a CSS bundling tool that processes CSS files and produces a single optimized output file.

@generates

Requirements

Your tool should accept a main CSS file path as input and produce a bundled, minified CSS output. The tool must handle CSS files that reference other stylesheets and combine them into a single file.

Input Processing

The tool should:

• Accept a file path to a main CSS file
• Read and process the CSS content
• Handle any stylesheet references found in the CSS
• Return the processed CSS as a string

Import Resolution

When processing CSS files:

• Local file references should be resolved and their content included in the output
• Relative paths should be resolved correctly based on the importing file's location
• Absolute paths should be handled appropriately
• The tool should avoid processing the same file multiple times if it's referenced from different locations

Output Generation

The final output should be:

• A single CSS string containing all processed styles
• Minified to reduce file size
• Valid CSS that can be used directly in production

Error Handling

The tool should handle common error cases:

• Missing or inaccessible files should be reported clearly
• Invalid CSS syntax should be handled gracefully
• Circular references should not cause infinite loops

Test Cases

Create test cases in test/bundle.test.js that verify:

• Processing a simple CSS file without any imports returns minified output @test
• Processing a CSS file that imports one local file correctly includes the imported content @test
• Processing a CSS file with multiple imports includes all imported content in the correct order @test
• Processing a CSS file that imports the same file from multiple locations only includes it once @test

API

/**
 * Bundles a CSS file and its dependencies into a single minified output
 * @param {string} entryPath - Path to the main CSS file
 * @returns {Promise<{styles: string, errors: Array<string>, warnings: Array<string>}>}
 */
async function bundle(entryPath) {
  // Implementation here
}

module.exports = { bundle };

Dependencies { .dependencies }

clean-css { .dependency }

Provides CSS minification and optimization support.