CSS Module Composition Processor

A CSS processing utility that transforms CSS Modules composes declarations into :import() rules with proper import deduplication.

Capabilities

Deduplicates imports from the same file

When multiple CSS rules compose classes from the same external file, the processor should reuse generated identifiers instead of creating duplicate import entries.

• Given CSS with two rules that each compose the button class from ./components.css, the processed output contains exactly one :import() rule for that file and class, with the same generated identifier used in both composes declarations @test

Handles multiple classes with deduplication

When composing multiple classes where some are duplicated and some are unique, the processor should deduplicate identical imports while creating separate identifiers for different classes.

• Given CSS with .primary { composes: button icon from "./ui.css"; } and .secondary { composes: button badge from "./ui.css"; }, the output has one :import() rule for ./ui.css containing three unique identifiers (button, icon, badge), with the button identifier reused in both rules @test

Maintains separate identifiers for different source files

When classes with the same name are composed from different files, the processor should create separate import rules and identifiers for each source file.

• Given CSS with .one { composes: button from "./buttons.css"; } and .two { composes: button from "./controls.css"; }, the output contains two separate :import() rules with different generated identifiers for each file @test

Implementation

@generates

API

/**
 * Processes CSS content containing composes declarations.
 * Transforms them into :import() rules with deduplicated identifiers.
 *
 * @param {string} inputCSS - The CSS content with composes declarations
 * @returns {Promise<string>} The processed CSS with :import() rules
 */
async function processCompositions(inputCSS) {
  // IMPLEMENTATION HERE
}

module.exports = { processCompositions };

Dependencies { .dependencies }

postcss-modules-extract-imports { .dependency }

Provides CSS Modules import extraction and deduplication capabilities.