PostCSS Calc doesn't understand infinity

[JalenWasHere]

The postcss-calc library does not (yet) understand the infinity keyword. There is an issue for it in that repository that has been open since last year. This is not really a "Tailwind" problem yet it does block me from upgrading to v4.

The rounded-full utility is what causes this:

  .rounded-full {
    border-radius: calc(infinity * 1px);
  }

I believe the old value was 9999px so what I tried was to override the utility to use the old value:

@utility rounded-full {
  border-radius: 9999px;
}

However when inspecting the compiled Tailwind CSS the rounded-full is not overridden instead both rules are added like such:

  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-full {
    border-radius: 9999px;
  }

With my utility being later in the CSS order it does take specificity however the PostCSS Calc still cant parse the file because infinity is still there.

Any one got an idea on how to fix this? I tried changing every rounded-full to rounded-[9999px] but I use Flowbite and it also uses this utility.

[wongjn]

You could either:

• Disable CSSNano (since Tailwind will optimize internally via Lightning CSS anyway).
• Disable postss-calc() specifically:

  cssnano: {
    preset: [
      'cssnano-preset-default',
      { calc: false },
    ]
  },

[JalenWasHere]

I forgot to add that I use Webpack Encore to build my assets, I'm not sure if there's actually a way to turn off the CSS minifyer but I will look into it.

[JalenWasHere]

For anyone wondering, this has been fixed from the postcss-calc package itself.

postcss/postcss-calc#210 (comment)