Kostiantyn

Использовать экстенды

%cursor-pointer {
  cursor:pointer;
}

.product {
  &.grid .grid-product__text:not(._price),
  &.grid .grid-product__text._price,
  &.grid .grid-product__text .grid-product__text_inner {
    color: inherit !important;
  }

  &._photo-name-transition {
    ._name,
    ._image {
      @extend %cursor-pointer;
    }
  }

  &._name-transition {
    ._name {
      @extend %cursor-pointer;
    }
  }

  &._photo-transition {
    ._image {
      @extend %cursor-pointer;
    }
  }
}

Output:

.product._photo-name-transition ._name,
.product._photo-name-transition ._image,
.product._name-transition ._name,
.product._photo-transition ._image {
  cursor: pointer;
}

.product.grid .grid-product__text:not(._price),
.product.grid .grid-product__text._price,
.product.grid .grid-product__text .grid-product__text_inner {
  color: inherit !important;
}

Вместо этих заморочек, можно прогнать код через какой-нибудь css-оптимизатор, который умеет группировать свойства. Тут главное правильно его настроить.

Использовать mixin-ы

Это не ошибка, это предупреждение, по сути оно работе не мешает, но если бесит легко фиксится, нужно в предложенном в доках pipe заменить browsers: ['last 2 versions'] на overrideBrowserslist: ['last 2 versions'] и тогда предупреждение пропадает))

.pipe(autoprefixer({
            overrideBrowserslist:  ['last 2 versions'],
            cascade: false
        }))