5

In my Gruntfile I'm using cssmin (grunt-contrib-cssmin) task. Something like:

cssmin: {
    css : {
        src: "dist/styles.css",
        dest: "dist/styles.min.css"
    }
}

The problem is: styles.css is generated with a concat task that concatenates lots of .css files. In some of files I have the same css selector (example: .panel a) Only the first one selector is kept bu the cssmin task, all others are removed. I guess it's a default behaviour of the task. Is there a way to keep duplicated selectors?

Christian Benseler
  • 7,907
  • 8
  • 40
  • 71
  • 2
    But isn't that the point of cssmin? Why do you want to keep them? – jgillich Oct 09 '14 at 15:08
  • @jgillich because the task concats some vendors' css and I have to override some rules/selectors. – Christian Benseler Oct 09 '14 at 15:28
  • But shouldn't these override the existing rules when they get merged in one selector? I guess the order in which the files are processed might be important; to answer your question however there doesn't seem to be any way to turn this behaviour off. – jgillich Oct 09 '14 at 15:44
  • @jgillich I guess they merge, but I have to override the same attributes (i.e: width: 50px first, width:80px later). And changing the order may work. Thanks! – Christian Benseler Oct 09 '14 at 17:23
  • http://stackoverflow.com/questions/34845819/grunt-contrib-css-is-breaking-my-css – cade galt Jan 18 '16 at 01:14
  • 1
    Possible duplicate of [Gruntjs concat & minify | Option to replace the code in destination file instead of appending](http://stackoverflow.com/questions/20866937/gruntjs-concat-minify-option-to-replace-the-code-in-destination-file-instead) – Paul Sweatte Feb 17 '16 at 21:50
  • Can you minify first and then, concat? – dinesh ygv Mar 04 '16 at 06:41

1 Answers1

0

Grunt cssmin has a dependency on node.js module clean-css. I would recommend to use clean-css API within Grunt with the options available https://github.com/jakubpawlowicz/clean-css#how-to-use-clean-css-api.

One of the parameters available is;

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

You play with this option on http://refresh-sf.com/. If you go to tab 'clean-css' below the textarea, you could enable/disable advanced to see it working.

Edit: Issued this at grunt-contrib-cssmin repo as an issue https://github.com/gruntjs/grunt-contrib-cssmin/issues/263

Jeffrey de Graaf
  • 479
  • 3
  • 17