Почему вендорные префиксы псевдокласса ломают стили и как это обойти если используется CSSO?

Question

[imko]

Песочница
Вот этот парень подставляет вендорные префиксы для псевдокласса placeholder-shown. И он создает отдельно три правила. Затем CSSO объединяет эти три правила и все ломается.
Какие есть варианты выхода из этой ситуации?

Comments

[Ankhena]

Напишите в настройках CSSO запрет на объединение.

Answer 1

[Антон Шаманов]

тебе нужно указать только общий псевдокласс, autoprefixer добавит правила для браузеров.
если ты не можешь изменить его код, то ты должен исключить из обрабатываемых autoprefixer

Comments

[imko]

До обработки префиксером только одщий и был

input {
		&:invalid {
			&:not(:placeholder-shown):not(:focus) {
				color: $red;
				border-color: $red;
			}
		}
	}

а исключения для префиксера никак не задать судя по доками

[Антон Шаманов]

imko, там есть blacklist по селекторам судя по докам

[imko]

Антон Шаманов, а можно ссылочку?

[Антон Шаманов]

imko, https://github.com/css/csso#black-list-filtering

[imko]

Антон Шаманов, а, я думал мы про префиксер говорили)

[Антон Шаманов]

imko, можно и через autoprefixer/postcss:

return gulp.src('./src/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([ autoprefixer() ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dest'))

файл не должен находится в папке ./src , пусть размещается в ./vendor/* или ./node_modules/*