Non-applicable warning: Please do not use display: contents; if you have grid setting enabled

[TheDutchCoder]

In the current version I'm receiving this warning that I can't get rid of: Please do not use display: contents; if you have grid setting enabled

I don't have "grid setting enabled", nor do I use "display: contents;" in any of my code, so I'm not sure why this warning keeps popping up and littering my builds.

[ai]

1. Do you use any CSS libraries or frameworks?
2. How do you run Autoprefixer? Do you use any boilerplates like Angular CLI or Create React App?

[Dan503]

If you are using the Angular framework (enables grid translations by default) + Tailwind (probably has a display: contents; as one of it's rules) then that would explain it.

I think Tailwind can be be configured to remove certain rules. That would be how I would resolve that.

Or maybe it's possible to configure Angular to not use Grid translations.

[TheDutchCoder]

1. Yes, I use Tailwind and purge my CSS
2. Through PostCSS in my webpack flow

I just don't understand why it arbitrarily warns me about something I'm not using.

Not only would it be the authors choice to enable grids, but who says that I'm using display: contents; as a child in a grid? I feel like it's not a useful warning without analyzing the code (which autoprefixer, of course, doesn't) and it's littering both my dev dashboard with tons of useless warnings (makes it real hard to find real issues in the output), and my logs on every prod build.

Bottom line, in my opinion, is that autoprefixer shouldn't warn me about "potential" issues like that.

[Dan503]

We warn about display: contents; if grid translations are enabled because if grid translations are enabled then the dev is highly likely to be aiming for a consistent display between modern browsers and IE. IE doesn't support display: contents; at all so we throw a warning to tell the dev that they are doing something that will break the layout in IE.

Somewhere in your webpack config you are enabling grid translations. If you don't want grid translations then you will need to figure out how it is getting enabled and disable it.

Tailwind is probably also causing other grid warnings to pop up.

[TheDutchCoder]

Is there a way to tell autoprefixer to not bother with IE at all? I don't support IE (configured in my browserslist, so it would be great if autoprefixer could take that into account).

I still don't understand why it throws the warning when I don't use display: contents;?

[ai]

Show your webpack config.

Also, can you check npm ls | grep autoprefixer. Maybe you have another Autoprefixer in some other tool?

[Dan503]

I still don't understand why it throws the warning when I don't use display: contents;?

You use Tailwind and Tailwind has a display contents rule in it so you are actually using it.

[TheDutchCoder]

Show your webpack config.

I can't, it's way, way too big to usefully share. But this is my postcss.config.js (edited for brevity):

module.exports = (ctx) => {
  return {
    plugins: [
      require('postcss-import'),
      require('tailwindcss')('./tailwind.config.js'),
      isDev
        ? null
        : require('@fullhuman/postcss-purgecss')({
        content: glob.sync(paths),
        whitelistPatterns: [ /-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/, /data-v-.*/, /gpay-button/],
        extractors: [
          {
            extractor: TailwindExtractor,
            extensions: [
              'html',
              'phtml',
              'php',
              'ts',
              'js',
              'vue',
            ],
          },
        ],
      }),
      require('postcss-preset-env')({
        autoprefixer: {},
        features: {
          'nesting-rules': true,
        },
      }),
    ],
  }
}

Also, can you check npm ls | grep autoprefixer. Maybe you have another Autoprefixer in some other tool?

npm ERR! peer dep missing: imagemin@^5.0.0 || ^6.0.0, required by img-loader@3.0.1
│ ├─┬ autoprefixer@9.8.0
│ ├── autoprefixer@9.8.0 deduped

[TheDutchCoder]

I still don't understand why it throws the warning when I don't use display: contents;?

You use Tailwind and Tailwind has a display contents rule in it so you are actually using it.

I'm purging my CSS, so it shouldn't be there, but let me check.

Edit: okay, maybe purgeCSS is broken, because my output contains .grid{display:grid}.contents{display:contents}.hidden{display:none} (I'm neither using grid, nor using contents classes in any of my code).

[TheDutchCoder]

Okay, I think I narrowed this down to a purgeCSS problem. For some reason it doesn't purge all the correct classes when dealing with certain file extensions.

Sorry for the bother, but it was one of those "tool B in the chain A-B-C-D-E messed up, but E threw the error" ;)