0

Is there some kind of special syntax I need to use to override Clean CSS defaults when using Grunt CSS min?

Looking at the docs I can successfully get the "roundingPrecision" example working but trying to override other Clean CSS rules does not work for me.

I've given a config example below where I'm trying to prevent duplicate rules being removed (in this case I need a non-css variable fallback for browsers that do not support CSS variables). This is not working for me though.

Here is the CSS Min part of my Grunt config:

    cssmin: {
        options: {
            removeDuplicateRules: false,
            roundingPrecision: -1
        },
        prod: {
            files: [{
                expand: true,
                ext: '.min.css',
                src: ['<%= cssPath %>style.css'],
            }]
        },
    },

With the above config, this is what happens:

    .test {
       background: red;
       background: var(--colour-blue);
    }

Becomes

    .test{background:var(--colour-blue);}

However, the second background rule should not be removed.

I've noticed in a another StackOverflow question it seems like I may need to target some specific area of Clean CSS—Use clean-css compatibility options in grunt-contrib-cssmin—but I'm not sure how to do that for other properties like "removeDuplicateRules: false".

I'm guessing that I'm doing something fundamentally wrong. Any pointers would be helpful—thanks.

Update #2

As suggested I've tried to use the attempted "level" options as follows, without any success:

cssmin: {
  options: {
    level: {
      1: {
        all: false
      },
      2: {
        all: false
      }
    }
  },
  prod: {
    files: [{
      expand: true,
      ext: '.min.css',
      src: ['<%= cssPath %>style.css'],
    }]
  },
},
Community
  • 1
  • 1
SparrwHawk
  • 13,581
  • 22
  • 61
  • 91
  • Could you please elaborate this part? *"...the quotes should **not** be removed..."* Why not? There are no spaces in the name. Please name one browser/version combination that will interpret it differently with/without quotes. – tao Feb 10 '17 at 18:44
  • The example is irrelevant. Clean CSS should do whatever I tell it to do. I've just changed it if that makes any difference. – SparrwHawk Feb 10 '17 at 18:48
  • I'm not sure why you're getting sassy. Basically, whatever Clean CSS rule I throw at the config, it's not working. – SparrwHawk Feb 10 '17 at 18:56
  • I apologize. So you're basically saying you've gone over [these](https://github.com/jakubpawlowicz/clean-css#use)? – tao Feb 10 '17 at 18:58
  • Might have to do with optimization options being split into `level.1` and `level.2`. [¯\\_(ツ)_/¯](https://github.com/jakubpawlowicz/clean-css#level-1-optimizations) – tao Feb 10 '17 at 19:11
  • Yes I thought that too. I tried the following, but no cigar. It fails to suppress any Clean CSS sanitising: `cssmin: { options: { level: { 1: { all: false }, 2: { all: false } } }, prod: { files: [{ expand: true, ext: '.min.css', src: ['<%= cssPath %>style.css'], }] }, },` – SparrwHawk Feb 10 '17 at 23:22
  • I posted an update to my original question since I couldn't seem to format a code block in a comment – SparrwHawk Feb 10 '17 at 23:30
  • I'm afraid I'm out of ideas. I've used `grunt` extensively for the past year, but I'm far from what you'd consider an expert at configuring it. Tried to help as much as I could, I'll be here in my corner waiting for you to post the answer when you find it. Fingers crossed, too, of course. – tao Feb 10 '17 at 23:38
  • Even I am facing the same issue. I have used a background property ` background: linear-gradient(70deg, #c12365 0%, #c72570 1%, #c12365 calc(0% + 1px), #c12365 40%, #404040 calc(20% + 1px), #404040 75%, #404040 calc(75% + 1px), #404040 100%); ` when I run the cssmin command it converts it to ``` background:linear-gradient(70deg, #c12365 0, #c72570 1%, #c12365 calc(0 + 1px), #c12365 40%, #404040 calc(20% + 1px), #404040 75%, #404040 calc(75% + 1px), #404040 100%); ``` Which is a completely different background. How can I solve this? – Siddhant Jun 02 '20 at 11:08

0 Answers0