0

I'm wondering if there's a grunt plugin that can compare two files and remove duplicates from one of them.

Example: if both blog.css and main.css contain the rule .button { color: red; } I'd like to remove that rule from blog.css. (main.css should always remain unchaged)

Background:

I've got two LESS-bundles, main.less and blog.less, which I compile into main.css and blog.css

The idea is that my site should load main.css on every page. On blog pages I'll load both both main.css and blog.css.

The problem is that these LESS-files share a few "utility"-files (with variables, mixins and some common classes like .button)

So I end up with blog.css containing duplicates of some rules which are already defined in main.css, and I'd like to get rid of those duplicates to reduce file size.

Drkawashima
  • 8,837
  • 5
  • 41
  • 52
  • Possible duplicate of [Remove duplicate CSS declarations across multiple files](https://stackoverflow.com/questions/9656509/remove-duplicate-css-declarations-across-multiple-files) – Drkawashima Sep 07 '17 at 21:32

1 Answers1

0

Found it https://www.npmjs.com/package/grunt-csscss

csscss: { dist: { src: ['css/x.css', 'css/y.css'] } }

Allthough in my case the solution was actually much simpler. Turns out LESS now has import ("reference") which will import a file to use as a dependency only, without outputting any of it's css. So now I can use import ("reference") commonstuff.less in blog.less and thus none of the styles from commonstuff.less will be output to blog.css! :)

Drkawashima
  • 8,837
  • 5
  • 41
  • 52