PostCSS проверка существование класса &?

Question

[Хазрат Гаджикеримов]

Начал использовать PostCSS в мелком проекте, раньше использовал препроцессор Less.
Часто сталкиваюсь с задачей, что если у элемента есть такой класс, то применить такие стили, пример:

.link {
   color: blue;

   // В Less можно использовать амперсанд (&) для решения такой задачи
   &.active {
       color: red; 
   }

}

А как в PostCSS сделать нечто такое?
Амперсанд в PostCSS это ссылка на родительский элемент и после сборки проекта Webpack'ом то выше указанный код не подходит, амперсанд вставляет имя родительского класса

Вот результат работы PostCSS с плагином postcss-nested:

/* Профиль пользователя */
.app-components-Aside-__user__1gy.app-components-Aside-__wrapper__1n4 {
  height: 42px;
  width: 100%;
  background-color: red;
}

и рендер компонента

<div class="app-components-Aside-__user__1gy">
      <div class="app-components-Aside-__user__1gy-wrapper"></div>
</div>

сам компонент

import React from 'react';
import { Link } from 'react-router';

/* component styles */
import s from './styles.css';

function Aside() {
    return (
        <aside className={s.root}>
            <div className={s.user}>
                <div className={s.user + '-wrapper'}></div>
            </div>
             
        </aside>
    );
}

export default Aside;

Answer 1

[Андрей Бережной]

Используйте precss для postcss

https://github.com/jonathantneal/precss