0

I'm having a weird problem with @extend on scss. when i extend some %placeholder that have repetitive properties, the gulp-clean-css merge them, and I don't want that to happen.

Here's an example: 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}

Why does this happen?

If it helps, this is mine gulp-task:

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();
});

Is there any other better plugin to use? I don't want it to remove duplicated properties. If you ask me why, it's because of old browsers support than might not support rem or calc, or other "new fancy propertie" ;)

Thank you :)

sandrina-p
  • 3,794
  • 8
  • 32
  • 60
  • There's a good chance you can play with some of the clean-css settings (gulp-clean-css is just a wrapper for the node library) to accomplish what you want. Perhaps `--skip-aggressive-merging`? https://github.com/jakubpawlowicz/clean-css – Robert Wade Sep 15 '16 at 12:25
  • how do i add that on my gulp task? – sandrina-p Sep 15 '16 at 12:57
  • 1
    see my answer below. I believe that has what you're looking for. – Robert Wade Sep 15 '16 at 13:03

1 Answers1

1

I played around with this, and I think your setting is incorrect for 'noAdvanced':

Instead of:

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

Use:

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

According to the docs:

advanced - set to false to disable advanced optimizations - selector & property merging, reduction, etc.

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

This isn't going to leave you with 1 .foo selector with two font-size declarations tho, it's just not going to merge the two, so you'll end up having:

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

This answers your issue however kind of defeats the purpose of using something like clean-css. I'm curious as to why you would want to leave both font-size declarations in your CSS when the first one will be overridden anyway.

Robert Wade
  • 4,918
  • 1
  • 16
  • 35
  • Answering your question, it's because of old browsers than might not support `rem` or `calc`. ;) Ideally this should have like: "ignoreProperties: 'rem', 'calc', 'display'". That way it would merge all except these properties. – sandrina-p Sep 15 '16 at 13:36