`postcss-preset-env` dynamically skips plugins with `importFrom`/`exportTo` based on browser lists

[romainmenke]

Bug description

preset-env is a way to dynamically toggle plugins on and off based on config.

This conflicts with importFrom/exportTo and maybe other options where it is always required to run a certain plugin.

---

I don't see a way for these kinds of options to ever work correctly with postcss-preset-env.

Source CSS

.test-custom-properties {
	order: var(--order);
}

@media (--narrow-window) {
	.test-custom-media-queries {
		order: 2;
	}
}

.test-custom-selectors {
	&:--heading {
		order: 3;
	}
}

Expected CSS

:root {
  --order: 1;
}

.test-custom-properties {
	order: var(--order);
}

@media (max-width: 40rem) {
	.test-custom-media-queries {
		order: 2;
	}
}

h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.test-custom-selectors,h5.test-custom-selectors,h6.test-custom-selectors {
		order: 3;
	}

Actual CSS

.test-custom-properties {
	order: var(--order);
}

@media (max-width: 40rem) {
	.test-custom-media-queries {
		order: 2;
	}
}

h1.test-custom-selectors,h2.test-custom-selectors,h3.test-custom-selectors,h4.test-custom-selectors,h5.test-custom-selectors,h6.test-custom-selectors {
		order: 3;
	}

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

No response

Extra config

options: {
	browsers: 'chrome >= 88',
	importFrom: {
		customMedia: {
			'--narrow-window': '(max-width: env(--sm))'
		},
		customProperties: {
			'--order': '1'
		},
		customSelectors: {
			':--heading': 'h1, h2, h3, h4, h5, h6'
		},
		environmentVariables: {
			'--sm': '40rem'
		}
	},
	stage: 0
}

What plugin are you experiencing this issue on?

PostCSS Preset Env, PostCSS Custom Properties

Plugin version

latest

What OS are you experiencing this on?

No response

Node Version

latest

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

[equinusocio]

In my environment importFrom is completely broken now, i'm using postcss-preset-env@7+. I use the importFrom key to inject custom environmentVariables (env()) properties inside the CSS, but from postcss-preset-env@7 they are not parsed anymore.

[Antonio-Laguna]

@equinusocio we've been discussing importFrom, mostly internally so we don't really have much to share yet. However, I'm really curious to know if you could get some minimum example that's not working as you'd expect to assess what could be going on.

Thanks a lot for taking the time to chime in here!

[romainmenke]

@equinusocio Preferably in a separate issue if possible as it is likely separate from the case describe here.

This issue is more about how postcss-preset-env can skip plugins if allowed by browser lists.

That will make it easier to follow up your case :)

[romainmenke]

@Antonio-Laguna I think we might need to resolve this sooner than later.
With cssdb 5.1 the support stats seem to have shifted in way that this is happening for more people.

This also just broken our CI (see last couple commits)

@equinusocio I was wrong, it's exactly the same issue :)
Setting browserslist to slightly older browsers might resolve this until we ship a fix.

[romainmenke]

More details for env-function :

• this did not have a caniuse entry before in cssdb : https://github.com/csstools/cssdb/blame/d917390f9ddd95c6bd45b8382957eb1d00b2e8ea/cssdb.json#L242-L255
• having added it makes it dynamic in postcss-preset-env
• the plugin is not a true polyfill but actually promotes adding side effects :/

I think we need to split this one up :

• one plugin for the side effects only (not included in preset-env)
• one plugin that is a true polyfill : only these real values

The same approach might be needed for all these plugins :/

[equinusocio]

Setting browserslist to slightly older browsers might resolve this until we ship a fix.

Here the replication on codesandbox

https://codesandbox.io/s/eloquent-northcutt-fwee7?file=/postcss.config.js:120-1199

I can confirm that setting a browserslist in package.json breaks the custom environmentVariables. If you remove it you can see a blue "hello word" box with padding. This is the browserslist we use, but I can't find versions that make it work again. Apparently, the only fix is to remove the browserslist completely.

  "browserslist": [
    "last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 Safari versions",
    "last 2 Edge versions"
  ],

Also leaving the browserslist with the default values fix it:

    "> 0.2%",
    "not dead",
    "not op_mini all"

I saw the fix, I would like to test it if you can release it as alpha/beta/next channel.

[romainmenke]

There is no alpha/beta/next channel.
But we hope to release this shortly.

Please be aware that the fix we have to roll out for this goes against the purpose of postcss-preset-env. We have no idea yet how we will remove this functionality in a next major version, but it will be removed.

My personal preference at this time is to extract the import / export features into different plugins which will not be included in postcss-preset-env

We do have to consider the maintenance cost of this as just keeping preset-env healthy and up to date is already a lot of work :)

Maybe there are existing alternatives to do this kind of injection?