Ошибка минимизации с minifycss

У меня есть строка минификации gulp css:

.pipe(minifycss({advanced:false, keepSpecialComments : 0}).on('error', gutil.log))

Когда я уменьшу эту часть CSS:

.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
    background-repeat: repeat-y;
    opacity: 0.3;
    filter: "alpha(opacity=30)"; 
    -ms-filter: "alpha(opacity=30)";
}

я получаю это:

mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30')"}

который ломает весь CSS из-за этой вещи в скобках.

Есть ли какие-то варианты, которые я пропустил, чтобы избежать этого? (не может переключиться на нанокссм атм)

Источник

2 ответа

Решение

Обратите внимание: если вы попали сюда, у вас может возникнуть проблема # 676, что означает, что вам нужно обновить пакет.

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

Что я сделал, чтобы ваш ввод был корректным, начиная с нового репо:

npm install gulp -g
npm install gulp --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-util --save-dev

Это дало мне это package.json:

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-minify-css": "^1.2.3",
    "gulp-util": "^3.0.7"
  }
}

Я кормил это styles.css файл (ваш код, как есть):

.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail, 
.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==");
    background-repeat: repeat-y;
    opacity: 0.3;
    filter: "alpha(opacity=30)"; 
    -ms-filter: "alpha(opacity=30)";
}

В это gulfile.js:

'use strict';

var gulp = require('gulp');
var gutil = require('gulp-util');
var minifycss = require('gulp-minify-css');

gulp.task('default', [], function() {
    gulp.src('styles.css')
        .pipe(minifycss({advanced:false, keepSpecialComments : 0}).on('error', gutil.log))
        .pipe(gulp.dest('output'));
});

А потом побежал:

gulp

И получил этот вывод:

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);background-repeat:repeat-y;opacity:.3;filter:"alpha(opacity=30)";-ms-filter:"alpha(opacity=30)"}

Насколько я могу судить, этот вывод правильный.

Который при использовании функции "Tidy" из фрагментов стека равен:

.mCS-rounded-dots-dark.mCSB_scrollTools .mCSB_draggerRail,
.mCS-rounded-dots.mCSB_scrollTools .mCSB_draggerRail {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQYV2NkIAAYiVbw//9/Y6DiM1ANJoyMjGdBbLgJQAX/kU0DKgDLkaQAvxW4HEvQFwCRcxIJK1XznAAAAABJRU5ErkJggg==);
  background-repeat: repeat-y;
  opacity: .3;
  filter: "alpha(opacity=30)";
  -ms-filter: "alpha(opacity=30)"
}

Вы пробовали вводить ваши входные данные CSS? Возможно, где-то там спрятана проблема...

PS. Мой вывод отличается от вашего, как у вас url:('.... это единственная цитата там. Я бы проверил ваш источник для любых случайных цитат / несоответствующих цитат.

Источник

Я не могу добавить комментарий, чтобы спросить это, но вы имеете в виду, что он ломается из-за следующих скобок:

filter: "alpha(opacity=30)"; 
-ms-filter: "alpha(opacity=30)";

Если это так, я бы, наверное, просто отбросил их. Свойство opacity поддерживается всеми основными браузерами и начиная с IE9 ( ссылка).

Если вам нужна поддержка IE 8, я предлагаю использовать автоматический префикс и добавить его в свой инструмент сборки после минификации.

Источник
Другие вопросы по тегам