Глобальные классы полезности с модулями PostCSS/CSS

Question

Использование CSS Modules, как я могу применить глобальный класс утилиты к нескольким элементам без дублирования объявления стиля?

Например, здесь находится компонент React без CSS-модулей. Соответствующая строка является div с двумя классами: widget и 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 глобальный класс утилита, которую я хочу, чтобы применить ко многим элементам на протяжении всего моего приложения:

/* util/clearfix.scss */ 

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

Я мы видели различные способы импорта .clearfix в CSS-модуль, но в каждом случае объявления стиля переопределяются для каждого случая, где применяется класс. Вот один пример:

/* widget.scss */ 

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

Answer 1

Методом проб и ошибок, я обнаружил, что вы можете объявить :global в селекторе, когда используется класс утилита (не там, где он определен):

.widget { 

    // other styles 

    :global { 
    composes: clearfix; 
    } 
} 

Чтобы избежать грязный и repetitive import и from, я использовал файл index.scss для импорта файлов утилиты, а затем импортировал его в любом частичном месте, где нужен класс утилиты.