gulp-clean-css @extendを使用すると重複したCSSを削除/削除する

Question

scssで@extendに異常な問題が発生しています。繰り返しプロパティを持つ％placeholderを拡張すると、gulp-clean-cssはそれらをマージし、そのようなことは起こりたくありません。

はここに例を示します foo.scss

%one { 
    font-size: 16px; 
    width: 95%; 
} 

%two { 
    font-size: 1rem; 
    width: calc(100% - 10px); 
} 


.foo { 
    @extend %one; 
    @extend %two; 
} 


.foo2 { 
    font-size: 16px; 
    font-size: 1rem; 
} 

foo.min.css

.foo{font-size:1rem;width:calc(100% - 10px);} 
.foo2{font-size:16px;font-size:1rem} 

これはなぜ起こるのでしょうか？

gulp.task('scss', function(){ 
    console.log('start task scss'); 
    gulp.src(folderStyles) 
     .pipe(sass.sync().on('error', sass.logError)) 
     .pipe(rename({ suffix: '.min' })) 
     .pipe(cleanCSS({compatibility: 'ie9', noAdvanced: true})) 
     .pipe(gulp.dest(folderStyles)); 
    logEnv(); 
}); 

使用するために、他のより良いプラグインがあります：それは助けている場合、これは私の一気-タスクは

のですか？ 重複したプロパティを削除したくありません。あなたはなぜ私に言わせれば、それが理由古いブラウザのだremまたはcalc、または他の「新しい空想propertie」をサポートしていない可能性がありますよりもサポートしています。）

が、私はこれで遊ん:)

Answer 1

をありがとう、と私は考えますお使いの設定では、 'noAdvanced' の誤りです。

の代わりに：

.pipe(cleanCSS({compatibility: 'ie9', noAdvanced: true})) 

使用：

.pipe(cleanCSS({compatibility: 'ie9', advanced: false})) 

ドキュメントによると：セレクタ&等

https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-api

プロパティのマージ、還元、 - - 高度な最適化を無効にするにはfalseに設定

はが前進しました

.foo { 
    font-size:16px; 
    width:95% 
} 
.foo { 
    font-size:1rem; 
    width:calc(100% - 10px) 
} 
.foo2{ 
    font-size:16px; 
    font-size:1rem 
} 

これはあなたの問題に答える：あなたが持ってしまいますので、これは、それだけで2をマージするつもりはない、カントー2フォントサイズの宣言で1 .fooというセレクターであなたを残しするつもりはありませんしかし、クリーンcssのようなものを使う目的を打ち負かしているのです。最初のフォントをオーバーライドするときに、両方のフォントサイズ宣言をCSSに残しておきたいのはなぜですか？