Запретить cssMin удалять стили svg

При запуске задачи grunt.js cssMin https://github.com/gruntjs/grunt-contrib-cssmin

Свойства Svg css удаляются.

Например:

.testClass {
   r: 4;
   width: 3px;
   margin-left: 18px !important;
}

Преобразуется в

.testClass {
   width: 3px;
   margin-left: 18px !important;
}

Как я могу предотвратить это?


person Jack Fairfield    schedule 28.06.2017    source источник


Ответы (2)


grunt-contrib-cssmin использует clean-css для внутренних целей, как указано в options, а любые нативные (clean-css) опции "передаются в clean-css".

clean-css для удобства группирует оптимизацию по уровням. Существует два варианта управления удалением правил, оба находятся на уровне 2:

restructureRules: false, // should disable all removals
skipProperties: []       // specify individual rules to skip

Это должно сделать это:

cssmin: {
  options: {
    skipProperties: ['r']
  }
}


Начиная с clean-css 4.2.0 a " Комментарий" для полного пропуска фрагментов будет доступен:

/* clean-css ignore:start */
.testClass {
   r: 4;
   width: 3px;
   margin-left: 18px !important;
}
/* clean-css ignore:end */

Примечание 4.2 еще не выпущено.


После небольшого тестирования оказалось, что ничего из вышеперечисленного на самом деле не работает, хотя, согласно документации, оно "должно".
Единственная альтернатива, которая у меня есть, это заменить grunt-contrib-cssmin на grunt-postcss cssnano (именно это я использовать с ворчанием для минификации):

npm install grunt-postcss cssnano
grunt.initConfig({
  postcss: {
    processors: [
      require('cssnano')({
        // options here...
      })
    ]
  },
});

grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('postcss', ["postcss"]);

На практике я использую больше надстроек postcss.
Вот практический пример с autoprefixer, pixrem, postcss-flexbox и cssnano:

module.exports = function(grunt) {
    grunt.initConfig({
        postcss: {
            options: {
                processors: [
                    require('pixrem'),
                    require('autoprefixer')({browsers: ['> 0%']}),
                    require('postcss-flexboxfixer'),
                    require('cssnano')({
                      autoprefixer:false,
                      zindex: false
                    })
                ]
            },
            jack: {
                files: [{
                    expand:true,
                    flatten:true,
                    cwd: 'assets/',
                    src: ['scss/*.css', '!**/variables.css'],
                    dest:'assets/css/'
                }]
            }
        },
        watch: {
            styles: {
                files: [
                    'assets/scss/*.css'
                ],
                tasks:['postcss:jack']
            }
        }
    });
    grunt.loadNpmTasks('grunt-postcss');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default', ["watch:styles"]);
    grunt.registerTask('jack', ["postcss:jack"]);
};

Я специально зарегистрировал задачу, которая запускает только плагин postcss:

grunt jack

Не забывайте, что вам нужно установить каждый аддон для использования с postcss. Для вышеперечисленного вам понадобятся:

npm install grunt-postcss cssnano pixrem autoprefixer postcss-flexboxfixer

... и, скорее всего, вы захотите изменить files, чтобы он соответствовал тому, что у вас есть.

На этот раз я протестировал. Свойство r помещается в минифицированный файл:

.testClass{r:20;width:3px;margin-left:18px!important}
person tao    schedule 01.07.2017
comment
Это не работает. Я попытался добавить skipProperties: ['r'] в свои параметры, но ошибка по-прежнему возникает Недопустимое имя свойства 'r' в test.css:2:3. Игнорирование. и полученный файл не содержит свойства r. - person Jack Fairfield; 03.07.2017
comment
@ Джек, я обновил свой ответ альтернативным решением. Дайте мне знать, если это было полезно. - person tao; 03.07.2017
comment
Спасибо Андрей. Я проверил это, и это действительно работает так, как ожидалось. Большое спасибо за ваше время и мысль об этом ответе. - person Jack Fairfield; 05.07.2017

Вы должны иметь возможность предотвратить это, установив для реструктуризации значение false в параметрах:

options: {
  restructuring: false
},
person user7363719    schedule 01.07.2017
comment
Этот ответ, похоже, тоже не работает. Собственность все еще появляется. - person Jack Fairfield; 03.07.2017