Css-loader: 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: https://github.com/ben-eb/cssnano/issues/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

[pvienneau]

@ben-eb I feel like I'm late to the party, I'm trying to piece things together as I go.

I'm trying to persist empty SASS classes through the transformations for them to be included to the styles. So far:

{
    test: /\.(css|scss)$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
            {
                 loader: 'css-loader',
                 options: {
                      modules: true,
                      importLoader: 1,
                      camelCase: true,
                      localIdentName: '[local]',
                      minimize: {
                          safe: true
                      }
                  }
              },
              {
                  loader: 'sass-loader'
              }
         ],
    })
}

Doesn't seem to work, but I'll create a new environment and isolate the css-loader loader from everything else, since there very well could be another culprit with removing the empty classes.

[ben-eb]

@pvienneau Try:

{
  minimize: {
    discardEmpty: false
  }
}

[pvienneau]

@ben-eb Thanks for your help so far, but empty classes are still discarded.

Knowing that I can call discardEmpty directory, I will create an isolated environment and try it solely with css-loader. If I cannot get the expected result, I think I will create a new issue since this issue would be differently scope than this current issue. Does this work for you?

[ben-eb]

Sure thing. Note that from v4 it should be much easier to configure cssnano through config files & presets. 😄

[pvienneau]

Thanks @ben-eb for your patience and understanding. cssnano v4 is still planned to be out in 1/2 months?

[ben-eb]

Hopefully as soon as possible, but I'd like to synchronise this with PostCSS 6 so that I can remove a few redundant methods also.

[pvienneau]

@ben-eb If I isolate css-loader from the rest of my webpack configuration, the minification works like a charm. My issue is therefore elsewhere. Thanks for your help + patience 😄

[michael-ciniawsky]

@pvienneau Can you confirm that it isn't an issue within css-loader ?

[pvienneau]

@michael-ciniawsky I can confirm that this isn't an issue with css-loader. However, noticing that you took the bug label off, my issue was different than that of @joebell93.

[michael-ciniawsky]

@pvienneau Yep, there was a solution proposed and no response until now, if @joebell93 still has regressions after trying that out, he can reopen any time or simply open a new issue 😛. But this doesn't seems to be a bug in css-loader