5
votes

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?

1
But isn't that the point of cssmin? Why do you want to keep them?jgillich
@jgillich because the task concats some vendors' css and I have to override some rules/selectors.Christian Benseler
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
@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

1 Answers

0
votes

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