flex: 1 1 0 compiled to flex: 1 1

[benmerckx]

Link to the code that reproduces this issue

https://github.com/benmerckx/next-flex-bug

To Reproduce

Check compiled css

Current vs. Expected behavior

The flex-basis value is omitted. But the browser default of 0% is not the same as the absolute 0 value.

Input css: flex: 1 1 0;
Compiled css: flex: 1 1;
Expected css: flex: 1 1 0;

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: Ubuntu 20.04.0 LTS Tue Feb 13 2024 17:05:09 GMT+0100 (Central European Standard Time)
Binaries:
  Node: 18.18.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 8.14.0
Relevant Packages:
  next: 14.1.1-canary.51 // Latest available version is detected (14.1.1-canary.51).
  eslint-config-next: 13.5.1
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Vercel (Deployed), Other (Deployed)

Additional context

No response

[icyJoseph]

Hi,

This is done by the PostCSS plugin, postcss-flexbugs-fixes, and it is called flexbug-4.

There's an already opened issue over there: luisrudge/postcss-flexbugs-fixes#59

Their recommended workaround is to use units, particularly %:

• https://github.com/philipwalton/flexbugs?tab=readme-ov-file#flexbug-4

Or you could disable it if you like...

The configuration used by Next.js is roughly:

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009",
          "grid": "autoplace"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

Taken from:

• https://nextjs.org/docs/pages/building-your-application/configuring/post-css#default-behavior

• next.js/packages/next/src/build/webpack/config/blocks/css/plugins.ts

  Line 89 in 4e03b85

  function getDefaultPlugins(

And there you could disable the bug4 fix with:

In postcss.config.json:

{
  "plugins": [
    ["postcss-flexbugs-fixes", { "bug4" : false }],
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009",
          "grid": "autoplace"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

You'd need to install postcss-preset-env and postcss-flexbugs-fixes though.

Here it is in action:

• https://stackblitz.com/edit/github-bzlm5z?file=postcss.config.json,app%2Fpage.css

Run npx next build and cat .next/static/css/<some-hash-name>.css and you'll see it:

[benmerckx]

Thanks for the detailed answer, I guess there's nothing actionable for Next.js here.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.