preset-env 8.2.0 or later let's Nuxt 3 dev server hang

[t0byman]

Reproduction link

https://stackblitz.com/edit/nuxt-starter-3paghm?file=package.json

Bug description

When adding "postcss-preset-env": "^8.3.1" to package.json and

'postcss-preset-env': {
    stage: 1,
},

to postcss.config.js, the nuxt 3 dev server wil hang.

Actual Behavior

The nuxt dev server will hang at ✔ Nitro built in 199 ms, you'll never see ℹ Vite client warmed up in 1177ms

Expected Behavior

For v8.3.1 to not let the Nuxt dev server hang. v8.1.0 works but v8.2.0 is where the problem starts.

Can you reproduce it with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

No

npx Output

No response

Extra config

No response

What plugin are you experiencing this issue on?

PostCSS Preset Env

Plugin version

8.3.1

What OS are you experiencing this on?

macOS

Node Version

v16.14.2

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

[romainmenke]

@t0byman There isn't much we can see in that repro.
Where is the CSS that is being processed?

[t0byman]

@romainmenke You don't have to process any css for it to hang. Something changed from 8.1.0 to 8.2.0 which hangs the dev server even without processing any css, only adding it to the postcss.config.js makes this happen.

[romainmenke]

Unfortunately I don't know anything about nuxt, so you will have to provide a lot more info than this.

How did you verify that it isn't processing any CSS and that it hangs just by loading?
I did try this with stage: 4 and that just worked, so I am not convinced that it is hanging purely when loading postcss-preset-env

[romainmenke]

This for examples seems to work fine :

export default defineNuxtConfig({
  postcss: {
		plugins: {
			'postcss-preset-env': {
				stage: 1,
				features: {
					'gradients-interpolation-method': false
				}
			}
		},
  },
});

gradients-interpolation-method is the feature that was added in 8.2.

So somewhere there is CSS being processed and somehow it is causing an infinite loop.
Without knowing the CSS that is causing the issues we are unable to resolve this.

[t0byman]

I see, stage 4 and 3 work, but stage 2, 1 and 0 don't. Yeah ok, I'll dive a bit deeper then.

[romainmenke]

Is it correct that nuxt makes it impossible to pass a plugin instance and that everything must be configured using strings?

Normally I debug things like this by creating a "debug" postcss plugin that just logs things. But this plugin is never published, it's just a closure in the config file.

[SuperSchek]

Is it correct that nuxt makes it impossible to pass a plugin instance and that everything must be configured using strings?

Yes, this is correct. I am not sure about nuxt v2, but in v3, the config has a postcss.plugins key for which the typing looks as follows:

plugins?: {
    [x: string]: any;
} | undefined

I think your approach could still work. But you'd have to wrap it in a separate module and implement it locally using npm link.

[romainmenke]

Yes, this is correct. I am not sure about nuxt v2, but in v3, the config has a postcss.plugins key for which the typing looks as follows:

I wish frameworks wouldn't do this.
It adds a lot of unneeded friction for users.

---

I think I tracked down what is going on.

nuxt has some styles which are processed by default.
One of which is linear-gradient(#fff 0 0).

The parser algorithm for interpolation methods and color space interpolation scans until it finds a comma node. We didn't account for the possibility of gradient notations without any commas.

We have added extra checks to make sure we try to parse less, making issues in older/existing syntax less likely and we fixed the infinite loop.

We will release this asap.

Thank you for reporting this @t0byman

[SuperSchek]

I which frameworks wouldn't do this.
It adds a lot of unneeded friction for users.

I have to agree.

Thanks for getting on this so quickly @romainmenke, you're a life saver!

[romainmenke]

@t0byman @SuperSchek This has been released, thank you again for reporting and for providing extra info 🎉