CSS Modules Global Composition Processor

Build a CSS processor that uses PostCSS to handle CSS Modules composition declarations, specifically processing global scope references.

Requirements

Create a function that processes CSS content using PostCSS to transform composes declarations that reference global classes. The processor should handle the transformation of global class references into the proper global() wrapped format.

Your solution should:

• Use PostCSS to parse and process the CSS
• Handle single global class references
• Handle multiple global class references in one declaration
• Leave non-global compose declarations unchanged

Expected Transformations

When processing CSS with global compositions:

• Single global: .alert { composes: warning from global; } becomes .alert { composes: global(warning); }
• Multiple global: .alert { composes: warning error from global; } becomes .alert { composes: global(warning) global(error); }
• Non-global references should remain unchanged

Test Cases

• Processes single global class reference correctly @test
• Processes multiple global class references correctly @test
• Leaves non-global compose declarations unchanged @test

Implementation

@generates

API

/**
 * Processes CSS content to transform global compose declarations
 * @param {string} cssContent - The CSS content to process
 * @returns {Promise<string>} Promise resolving to the transformed CSS content
 */
async function processGlobalComposes(cssContent) {
  // Implementation here
}

module.exports = { processGlobalComposes };

Dependencies { .dependencies }

postcss { .dependency }

PostCSS framework for transforming CSS with JavaScript plugins.

@satisfied-by

postcss-modules-extract-imports { .dependency }

PostCSS plugin that transforms CSS Modules compose declarations and extracts imports.

@satisfied-by