A url() containing something that looks like a hexa is getting transpiled. In this case, it’s a hash from an svg web font.

url("Fonts/e4d5b881-6835-45b7-8766-3e5b9e7cab8b.svg#e4d5b881-6835-45b7-8766-4e5b9e7cab7c") format("svg");

url("Fonts/e4d5b881-6835-45b7-8766-3e5b9e7cab8b.svgrgba(228,213,184,.50588)-6835-45b7-8766-4e5b9e7cab7c") format("svg");

See: MoOx/postcss-cssnext#339 reported by @luangjokaj

csstools/postcss-color-functional-notation#3

Just noting this same issue applies to this package. No rush or pressure to upgrade! I tried to explore this myself but I really don't know enough to understand the api differences in postcss-values-parser 2x vs 3x release.

PostCSS Plugin Guidelines are mandatory right now. Because all of rules are about ecosystem health.

I am having the following issue:

Plugin Error: Cannot find module 'C:\Users\<user>\AppData\Roaming\npm\node_modules\postcss-color-hex-alpha\node_modules\postcss-values-parser\lib\nodes\Punctuation' imported from C:\Users\<user>\AppData\Roaming\npm\node_modules\postcss-color-hex-alpha\dist\index.mjs

Generally it is caused because you are using .mjs file format, so when importing Punctuation (and all similars) is required to defines it entiry like Punctuaction.js.

It affects 8.0, but works fine at 7.0.

The above npm audit shows when I install postcss-color-hex-alpha@6 so I had to downgrade to v5, it still works but it would be good if I could use the latest version without fear of vulnerabilities.

Searching a bit, it seems postcss-values-parser@3 is the cause and updating it to v4 would fix the issue.

Thanks.

I think the issue is with postcss-color-hex-alpha so that's why I open an issue here.

Here is a reproduction. It's an Ember.js project but that shouldn't matter - it was just easier for me to reproduce. git clone https://github.com/boris-petrov/ember-cli-postcss-bug.git, cd ember-cli-postcss-bug, npm install, ./frontend/node_modules/.bin/ember serve. That would lead to an infinite loop (you'll have to kill the process by killall -9 node). Postcss' options are in the ember-cli-build.js file. Commenting-out the usage of postcss-color-hex-alpha in it will fix the issue. Also, commenting-out the importing of Bootstrap (in app/styles/app.scss which is the main entry point for the app) also resolves it.

Not sure why that is, perhaps postcss-color-hex-alpha doesn't like something in Bootstrap 3 as Bootstrap 5 works.

While using postcss-preset-env I get the following results:

color: #{$black}de;

In development it will return the expected:

color: rgba(0, 0, 0, 0.87059);

But in production:

color: #000de;

In package.json I have the following scripts:

"dev": "cross-env webpack-dev-server --config webpack.config.js --mode=development -w --hot",
"prod": "cross-env webpack --config webpack.config.js --mode=production -p"

And in webpack.config.js

{
	test: /\.(sa|sc|c)ss$/,
	exclude: ['/node_modules', './dist', '/src/js', '/docs'],
	use: [
		MiniCSSExtractPlugin.loader,
		{
			loader: 'css-loader',
			options: {
				sourceMap: true,
				minimize: process.env.NODE_ENV === 'production',
			}
		},
		{
			loader: 'postcss-loader',
			options: {
				sourceMap: true,
				syntax: postCssScss,
				plugins: () => [
					autoprefixer,
					postCssPresetEnv({
						stage: 0,
						features: {
							'color-mod-function': true,
							'alpha-hex-colors': true
						}
					}),
				],
			},
		},
		{
		loader: 'sass-loader',
			options: {
				sourceMap: true
			}
		}
	]
}

I have tried to use it without the features part that didn't work. Also tried to require the color-mod-function and alpha-hex-colors as seperate package after the autoprefixer which also didn't work.

So how can I get the same output from development in production?

it will allow rest of us to awesome hexa format in our libs

This will require a major version bump so it doesn't break people who are running plugins on the 4.x path.