CSS Modules Composition Processor

Build a tool that processes CSS Modules files containing composes declarations and transforms them into explicit import rules.

Capabilities

Process composes from external files

• Given a CSS file with composes: button from "styles/button.css", the processor transforms it to use an explicit :import() rule and replaces the class name with a generated import identifier @test
• Given a CSS file with multiple composes from the same file (e.g., composes: primary secondary from "theme.css"), the processor creates separate import identifiers for each class @test

Process composes from global scope

• Given a CSS file with composes: warning error from global, the processor wraps each global class with global() wrapper @test

Handle mixed compositions

• Given a CSS file with both external and global composes (e.g., composes: button from "lib.css", alert from global), the processor correctly transforms both types @test

Implementation

@generates

API

/**
 * Processes CSS content and transforms composes declarations
 *
 * @param {string} cssContent - The CSS content to process
 * @returns {Promise<string>} The transformed CSS with :import() rules
 */
async function processCSS(cssContent) {
  // IMPLEMENTATION HERE
}

module.exports = { processCSS };

Dependencies { .dependencies }

postcss { .dependency }

Provides CSS parsing and transformation capabilities.

postcss-modules-extract-imports { .dependency }

Provides the core functionality for extracting and transforming CSS Modules composes declarations into explicit import rules.