Как удалить дублирующие свойства в css?

Question

[Anton Antonov]

Обнаружил для себя что в сss много дублей; в примере position, иногда значения их разные..
Связываю это с гитом
.case_wrap .same__text {
margin: 90px 0 100px;
position: relative;
padding-left: 15px;
padding-right: 15px;
position: relative;
}

Есть ли способ почистить автоматом?? или в ручную ??

Answer 1

[Anton Antonov]

https://css.github.io/csso/csso.html

Answer 2

[Максим Тимофеев]

https://cssnano.co/optimisations/
Он убирает дубли, но убирает ли такие - это вопрос, так что 100% гарантии не дам, пробуй, расскажешь.

Comments

[Anton Antonov]

спасибо! нашёл easiest way :-)

[Максим Тимофеев]

Anton Antonov, те же тапки только в профиль

[Alexon Classic]

Максим Тимофеев, а может примером показать как пользоваться cssnano? Я поставил себе gulp-cssnano, в таске прописал вот это:

.pipe(cssnano({
            discardOverridden: {removeAll: false},
            cssDeclarationSorter: {order: 'smacss'},
            cssDeclarationSorter: false,
            //discardComments: {removeAll: false},
            discardComments: false,
            mergeIdents: true
        }))

но почему-то у меня ничего не работает...

[Максим Тимофеев]

Alexon Classic, ну так пример есть на самом npm:

gulp.task('default', function() {
    return gulp.src('./main.css')
        .pipe(cssnano())
        .pipe(gulp.dest('./out'));
});

https://www.npmjs.com/package/gulp-cssnano
по Вашему куску конфига ничего не понятно. Надо брать файл или файлы и куда-то писать результат.

[Alexon Classic]

Максим Тимофеев, в примерах там просто:
.pipe(cssnano())
Но как использовать Optimisations... Не пойму хоть ты убей...

[Максим Тимофеев]

Alexon Classic, Что значит использовать?
Как-то так:

gulp.task('default', function() {
    return gulp.src('./main.css')
                   .pipe(cssnano({autoprefixer: {
                       browsers:['last 50 versions'], 
                       add: true
                   }}))
                   .pipe(gulp.dest('./out'));

По declaration-sorter например, надо смотреть его доки https://github.com/Siilwyn/css-declaration-sorter/ не юзал, так что сходу не скажу

[Alexon Classic]

Максим Тимофеев, а Вы можете подсказать что и как прописывать для:

• discardDuplicates;
  
• mergeIdents;
  
• discardUnused;
  
• mergeRules
  

Я так понимаю нужно вот так:

.pipe(cssnano({
            discardDuplicates: true,
            mergeIdents: true,
            discardUnused: true,
            mergeRules: true
        }))

т. е. просто указать .... свойство? и через двоеточие true или false? Или true нужно в фигурные скобки взять или как?

И еще, у меня есть в файле _fonts.scss шрифты, которые прописываются вот так:

@font-face{
  font-family: 'Caviar_Dreams';
  src: url('/templates/mySite/fonts/caviar/CaviarDreams.eot');
  src: local('Caviar Dreams'), local('CaviarDreams'),
  url('/templates/mySite/fonts/caviar/CaviarDreams.eot?#iefix') format('embedded-opentype'),
  url('/templates/mySite/fonts/caviar/CaviarDreams.woff') format('woff'),
  url('/templates/mySite/fonts/caviar/CaviarDreams.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

так вот SCCNano в конечном моем CSS файле - удаляет эту запись...

Как CSSNano "сказать" чтобы он не трогал @font-face?

Заранее благодарю за ответы!