component-button.css

/**
 * CSS modules required for this module to render correctly.
 * Correct order for entire app is resolved by script.
 */

@require "normalize.css";
@require "vendor/button.css";

/**
 * CSS component
 */

.Button {}
.Button--primary {}

component-stream-item.css

/**
 * Allow other modules to attach styles scoped to StreamItem.
 */

@provide "StreamItem";

/**
 * CSS component
 */

.StreamItem {}

component-tweet.css

/**
 * CSS modules required for this module to render correctly
 */

@require "normalize.css";
@require "vendor/utils-text/text.css";
@require "vendor/utils-layout/layout.css";

/**
 * Allow other modules to attach styles scoped to Tweet.
 */

@provide "Tweet";

/**
 * CSS modules this module attaches styles off.
 * Build would fail if StreamItem no longer exists or is no longer provided by the StreamItem module.
 */

@use "StreamItem";

/**
 * CSS component
 */

.Tweet {}
.Tweet-body {}

.StreamItem:hover .Tweet {}

This syntax is very interesting. Which pre-processor are you using?