Classes d'utilitaires globales avec des modules PostCSS/CSS

Question

En utilisant CSS Modules, comment appliquer une classe d'utilitaires globale à plusieurs éléments sans dupliquer la déclaration de style?

Par exemple, voici un composant React sans modules CSS. La ligne concernée est le div avec deux classes: widget et clearfix ...

/* components/widget.jsx */ 

class Widget extends Component { 
    render() { 
    return (
     <div className="widget clearfix"> 
     <div className="widget-alpha">Alpha</div> 
     <div className="widget-beta">Beta</div> 
     </div> 
    ); 
    } 
} 

.clearfix est une classe mondiale de services publics que je veux appliquer à de nombreux éléments tout au long de mon application:

/* util/clearfix.scss */ 

.clearfix { 
    &:before, &:after { content: " "; display: table; } 
    &:after { clear: both; } 
} 

Je Nous avons vu diverses manières d'importer .clearfix dans un module CSS, mais dans chaque cas, les déclarations de style sont redéfinies pour chaque occurrence où la classe est appliquée. Voici un exemple:

/* widget.scss */ 

.widget { 
    // other styles 
    composes: clearfix from '../util/clearfix.scss'; 
} 

Answer 1

Par essais et erreurs, je trouve que vous pouvez déclarer :global dans le sélecteur où la classe utilitaire est utilisé (pas où il est défini):

.widget { 

    // other styles 

    :global { 
    composes: clearfix; 
    } 
} 

Pour éviter désordre et instructions répétitives import et from, j'ai utilisé un fichier index.scss pour importer les fichiers d'utilitaire, puis importer cela dans tout partiel où une classe d'utilitaire est nécessaire.