Improve merge of rulesets when no common properties in rulesets between them

[luizdch]

Hi , my main goal in using the CSSO is to optimize the union selectors with the same styles . I then I analyzed the output of a piece of code from a project of mine and I saw that the plugin was not as efficient , there were large chunks of repeated code

I made this example :

Input:

.a { float: left; }

.e { float: left; }

.d { float: left; }

Output:

.a,.e,.d{float:left}

Okay , all right, but in another example:

Input:

.a { float: left; }

.b { background: red; }

.c { color: white; }

.d { text-decoration: none; }

.e { float: left; }

.d { float: left; }

Output:

.a{float:left}.b{background:red}.c{color:#fff}.d{text-decoration:none}.e,.d{float:left}

The plugin did not join the selectors .a , .e and .d that have the float: left.

What is the problem ? Because in a greater amount of code repetition code is enormous.

This is my gulp config and I 'm using windows 7:

var gulp = require('gulp'), sass = require('gulp-sass'), watch = require('gulp-watch'), prefixer = require('gulp-autoprefixer'), plumber = require('gulp-plumber'), gutil = require('gulp-util'), csso = require('gulp-csso'), combineMediaQueries = require('gulp-combine-media-queries');

var onError = function(err) {

gutil.log(gutil.colors.green(err))

}

gulp.task('default', function() {

gulp.watch('public/sass/**/*.scss', function() {

    gulp.src('public/sass/*.scss')

    .pipe(plumber({

        errorHandler: onError

    }))

    .pipe(sass({

        outputStyle: 'expanded'

    }))

    .pipe(combineMediaQueries())

    .pipe(prefixer('last 3 versions'))

    .pipe(csso())

    .pipe(gulp.dest('public/css/'))

})

})

[chrisheinzelmann]

Changing the order of selectors can lead to unexpected output in the browser because it changes their specificity.

[apaatsio]

@crohrer I don't think it changes the specificity but it changes the precedence. When CSS selectors have equal specificity, the last one has the highest precedence.

@luizdch CSSO merges only adjacent selectors. Otherwise the merges could change the "meaning" of the CSS, i.e. it would render differently before and after optimization.

I think that basically CSSO could be improved so that it merges the selectors only when it doesn't change the precedence. But this is probably not so easy to implement.

[jakubpawlowicz]

This is what you get in clean-css 3.1, which does non-adjacent optimizations too:

.a,.d,.e{float:left}.b{background:red}.c{color:#fff}.d{text-decoration:none}

[vithar]

I have the same problem and I need this improvement too, for example under option, if you don't want to break things for all.

I have such code:

.yandex-search__clear{display:block;height:36px}
.yandex-search__clear-inner{position:relative}
.yandex-search__clear-inner::after,.yandex-search__clear-inner::before{transform:rotate(45deg)}
.yandex-search__clear-inner::before{top:4px}
.yandex-search__clear-inner::after{top:9px}
.yandex-search__clear{height:34px}
.yandex-search__clear-inner::after,.yandex-search__clear-inner::before{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg)}

And want to get:

.yandex-search__clear{display:block;height:34px}
.yandex-search__clear-inner{position:relative}
.yandex-search__clear-inner::after,.yandex-search__clear-inner::before{transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg)}
.yandex-search__clear-inner::before{top:4px}
.yandex-search__clear-inner::after{top:9px}

[vainamov]

I have the same problem currently where SASS generates classes for column widths on different breakpoints. There are multiple widths that share the same value under different fraction names. But because there are media queries between them they dont get merged. Would it be possible to add this feature as an unsafe option just like force-media-merge for uses when you know the precedence can't get messed up?