Clamp polyfill doesn't work in grid-template context

[filipjakov]

Bug description

When using css clamp as part of the grid-template-{row|column} context, it discards the previous/post row/column declarations.

Source CSS

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: clamp(22rem, 40%, 32rem) minmax(0, 1fr);
}

Expected CSS

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: max(22rem, min(40%, 32rem)) minmax(0, 1fr);
}

Actual CSS

.grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: max(22rem, min(40%, 32rem));
}

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

N/A

Debug output

Warning

postcss-preset-env: all-property

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: any-link-pseudo-class

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: blank-pseudo-class has been disabled by "enableClientSidePolyfills: false".

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: break-properties

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: case-insensitive-attributes

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: clamp

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: color-functional-notation

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: custom-media-queries

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: custom-properties has been disabled by options

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: custom-selectors with stage 1 has been disabled

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: dir-pseudo-class

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: display-two-values

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: double-position-gradients

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: environment-variables with stage 0 has been disabled

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: focus-visible-pseudo-class has been disabled by "enableClientSidePolyfills: false".

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: focus-within-pseudo-class has been disabled by "enableClientSidePolyfills: false".

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: font-format-keywords with stage 1 has been disabled

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: font-variant-property

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: gap-properties

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: has-pseudo-class has been disabled by "enableClientSidePolyfills: false".

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: hexadecimal-alpha-notation

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: hwb-function

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: image-set-function

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: is-pseudo-class

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: lab-function

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: logical-properties-and-values

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: media-query-ranges

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: nesting-rules has been enabled by options

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: nesting-rules

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: not-pseudo-class

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: opacity-percentage

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: overflow-property

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: overflow-wrap-property

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: place-properties

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: prefers-color-scheme-query has been disabled by "enableClientSidePolyfills: false".

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: rebeccapurple-color

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: system-ui-font-family

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: Adding area[href] fallbacks for ":any-link" support in Edge and IE.

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: Disabling :is on "nesting-rules" due to lack of browser support.

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: Enabling the following feature(s):

./src/pages/rating/[ratingId]/index.module.css
Warning

postcss-preset-env: Using features from Stage 2

Extra config

Next.js project, postcss.config.js:

module.exports = {
	plugins: [
		[
			'postcss-preset-env',
			// https://github.com/csstools/postcss-preset-env/blob/main/src/lib/plugins-by-id.js
			{
				// The stage can be 0 (experimental) through 4 (stable), or false. Setting stage to false will disable every polyfill.
				// Doing this would only be useful if you intended to exclusively use the features option. <-- TODO
				stage: 2,
				// minimumVendorImplementations: 2,
				enableClientSidePolyfills: false,
				debug: Boolean(process.env.APP_ENV === 'dev'),
				autoprefixer: {
					flexbox: false,
					grid: false,
				},
				features: {
					'custom-properties': false,
					'nesting-rules': true,
				},
			},
		],
	],
};

What plugin are you experiencing this issue on?

PostCSS Preset Env

Plugin version

7.3.3

What OS are you experiencing this on?

macOS

Node Version

16.13.1

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this bug?

• I'm willing to open a PR

[Antonio-Laguna]

Thanks for reporting! Will take a look!

[Antonio-Laguna]

@filipjakov see polemius/postcss-clamp#16

[Antonio-Laguna]

@filipjakov this got fixed on postcss-preset-env version 7.4.1! Please let me know if you still experience issues

[filipjakov]

@Antonio-Laguna amazing, this was quick :) 7.4.1 works like a charm, thank you!

[Antonio-Laguna]

Thanks for confirming!

BTW, love that you integrated the debug option!

[flayks]

@Antonio-Laguna @filipjakov
I'm using this line of code for instance which now breaks with the newest postcss-preset-env and postcss-clamp (using PostCSS on a SvelteKit install - took me quite a while to figure where the issue came from)

padding: clamp(48px, 6.5vw, 104px) 0 calc(var(--footer-height) + clamp(48px, 6.5vw, 104px));

This used to compile properly but now it just keeps compiling until node crashes being out of memory 😅
Is there a way to fix this or disable postcss-clamp as the support is pretty good now? I was using stage 2, maybe switching to stage 3?

[mronian]

I'm facing a similar issue with this CSS after upgrading from 6.7.0 to 7.4.1 -

Source

.progress {
    width: 1em;
    height: 1em;
    clip-path: polygon(
        50% 50%,
        0 0,
        calc(min(var(--progress), 0.25) * 400%) 0,
        calc(min(var(--progress), 0.25) * 400%) calc((clamp(0.25, var(--progress), 0.5) - 0.25) * 400%),
        calc(min(var(--progress), 0.25) * 400% - (clamp(0.5, var(--progress), 0.75) - 0.5) * 400%)
          calc((clamp(0.25, var(--progress), 0.5) - 0.25) * 400%),
        calc(min(var(--progress), 0.25) * 400% - (clamp(0.5, var(--progress), 0.75) - 0.5) * 400%)
          calc((clamp(0.25, var(--progress), 0.5) - 0.25) * 400% - (max(0.75, var(--progress)) - 0.75) * 400%)
      );
}

Expected

.progress {
    width: 1em;
    height: 1em;
    clip-path: polygon(
        50% 50%,
        0 0,
        calc(min(var(--progress), 0.25) * 400%) 0,
        calc(min(var(--progress), 0.25) * 400%) calc((clamp(0.25, var(--progress), 0.5) - 0.25) * 400%),
        calc(min(var(--progress), 0.25) * 400% - (clamp(0.5, var(--progress), 0.75) - 0.5) * 400%)
          calc((clamp(0.25, var(--progress), 0.5) - 0.25) * 400%),
        calc(min(var(--progress), 0.25) * 400% - (clamp(0.5, var(--progress), 0.75) - 0.5) * 400%)
          calc((clamp(0.25, var(--progress), 0.5) - 0.25) * 400% - (max(0.75, var(--progress)) - 0.75) * 400%)
      );
}

Actual

.progress {
    width: 1em;
    height: 1em;
    clip-path: max(0.25, min(var(--progress), 0.5))
}