Using cssnano's safe mode

[joe-bell]

What is the current behavior?
Trying to use cssnano's safe: true mode doesn't seem to have any effect within minimize.

In my particular case, all gradients are affected by the minifyGradients option - this also doesn't work when set as false.

webpack.config.js

loaders: [
    'style-loader',
    {
        loader: 'css-loader',
        options: {
            importLoaders: 1,
            minimize: {
                safe: true
            }
        }
    },
    {
        loader: 'postcss-loader'
    }
]

What is the expected behavior?
Any cssnano options should work as expected

If this is a feature request, what is motivation or use case for changing the behavior?
Does it make more sense to change minmize to cssnano for clarity too?

cc @lbarratt @joshnesbitt

[ben-eb]

@joebell93 I'm thinking of changing v4 to be safe by default, please see: cssnano/cssnano#358.

What's the issue with postcss-minify-gradients? As far as I'm aware that's a safe transform, but I'd appreciate any insight if that's not the case. Thanks. 👍

[joe-bell]

@ben-eb ace!

Well I'm having a strange issue where our gradients are being minified and changed by default

We define

background: radial-gradient(at 50% 0%, rgba(74,74,74,0.15), transparent 40%);

but this gets overwritten to

background: radial-gradient(at 50% 0,rgba(74,74,74,.15),transparent 0)

So I'm surprised this is supposed to be a safe transform. I'll raise this up as an issue in Autoprefixer

[ben-eb]

@joebell93 Hmm. Seems like the logic for reducing stop percentages needs fixing; I'm in the middle of a rewrite so it's not going to be fixed straight away, but will add it to the todo list.

Essentially, what should happen is that colour stops should be reduced, so if we add a third stop:

background: radial-gradient(at 50% 0%, rgba(74,74,74,.15), transparent 40%, red 40%);
background: radial-gradient(at 50% 0%, rgba(74,74,74,.15), transparent 40%, red 0);

These two definitions are equivalent.

[joe-bell]

@ben-eb awesome, thanks for looking into this

[ben-eb]

@joebell93 Fixed this locally, it'll be in cssnano 4 (within the next month or two).

[pvienneau]

@ben-eb I'm having the same issue regarding implementing cssnano's safe mode to true (attempting to keep empty classes from being discarded).

Is the current position to wait for v4, or is there currently an alternate solution?

[michael-ciniawsky]

Is the current position to wait for v4, or is there currently an alternate solution?

@ben-eb 😛

[michael-ciniawsky]

@pvienneau I think I this would be a breaking change in cssnano

[pvienneau]

@michael-ciniawsky Apologies, I don't think I understand 😕

[michael-ciniawsky]

@joebell93 @pvienneau could you try with the latest css-loader, bc of #400 and

minimize: {
  minifyGradients: false
}

[michael-ciniawsky]

@pvienneau Removing minifyGradients from cssnano v3.x 's safe mode would be semver major

[pvienneau]

@michael-ciniawsky perhaps this is the wrong thread for my question and I should open a separate issue. Re-reading @joebell93's initial description, I see two issue, the first being that the safe flag was not being picked up from within the minimize option, and the second is in regards to minifyGradients.

My issue is solely in regards to the safe flag, from which reading through the code, should trigger the discardUnused to false. I can't seem to get this flag to work correctly as empty classes aren't being maintained.

[ben-eb]

@michael-ciniawsky minifyGradients is enabled by default, I didn't realise it was bugged until 2 weeks ago. However you know the situation right now, I've stopped all development on single repositories and moved everything to the monorepo, so it'll be fixed in v4.

@pvienneau I believe the transform you are looking for is discardEmpty (also enabled by default). Can you let me know your use case for empty rules, please? Is this transform bugged too?

https://github.com/ben-eb/postcss-discard-empty