CSS Module Theme Composer

Create a CSS Modules transformation that processes style composition declarations to build a theme system with inherited styles.

Requirements

You need to build a PostCSS processing pipeline that transforms CSS files containing style composition declarations. The system should:

1. Process CSS files with composition declarations that reference multiple sources
2. Handle compositions that combine styles from external files and global styles
3. Support multiple class compositions from the same external file in a single declaration
4. Transform the compositions into the appropriate output format with extracted imports

Input Format

Your processor will receive CSS files with composition declarations like:

.primaryButton {
  composes: baseButton from "./common/buttons.css", hoverEffect from global;
  color: blue;
}

.secondaryButton {
  composes: baseButton smallSize from "./common/buttons.css";
  color: gray;
}

Expected Behavior

• Extract import references from composition declarations
• Generate appropriate import statements for external files
• Preserve global style references in the output
• Handle multiple class names from the same external file
• Maintain the order and structure of the original CSS

Test Cases

• Processing a CSS file with compositions from both external files and global scope produces the correct output with import rules @test
• Processing a CSS file with multiple class compositions from the same external file generates a single import rule with multiple aliases @test
• Processing a CSS file with compositions from multiple different external files creates separate import rules for each file @test

Implementation

@generates

API

/**
 * Processes CSS files and transforms composition declarations
 *
 * @param {string} cssContent - The CSS content to process
 * @param {object} options - Processing options
 * @returns {object} Result object with transformed CSS
 */
function processCompositions(cssContent, options) {
  // IMPLEMENTATION HERE
}

module.exports = { processCompositions };

Dependencies { .dependencies }

postcss-modules-extract-imports { .dependency }

Provides CSS Modules composition extraction and import transformation functionality.