Gulp - How to remove duplicated styles in individual css files, If they have already present in common css file

Question

How to remove duplicated styles in individual css files, If they already present in common.css file.

common.css file has below styles.

.nav {
    background-color: red;
}

home.css has below styles.

.nav {
    background-color: red;
}

.home {
    width: 300px;
}

Now, I would like to modify the home.css using gulp task to remove the duplicated class .nav (as I have the class and with the same properties in common.css). After modifying of home.css file, then I'm excepting the below output.

.home {
    width: 300px;
}

I don't want to change or modify the common.css file. Could you please suggest any node package?

score 1 · Answer 1 · answered Jan 13 '22 at 16:31

You should think of compiling-merging both your files into one 'main' css file where you could clean-minify-etc.

As there is no 'real gain' of removing duplicated of both files if they arent being used on the same page.

And if they are being used a the same page, could use a minified-merged css file, you would also reduce the amount of blocking calls to render your page as well.

Can concatenate your css files with gulp-concat :

var concat = require('gulp-concat');
 
gulp.task('concat-css', function() {
  return gulp.src('./*.css')
    .pipe(concat('main.css'))
    .pipe(gulp.dest('dist'));
});

Can remove duplicates using clean-css or gulp-clean-css wrapper :

gulp.task('minify-css', () => {
  return gulp.src('dist/*.css')
    .pipe(cleanCSS({removeDuplicateRules: 'true'}))
    .pipe(gulp.dest('dist'));
});

So you could end up calling concat-css first, then minify-css and would have a main.css file ready to use without duplicate.

Gulp - How to remove duplicated styles in individual css files, If they have already present in common css file

1 Answers1