postcss-preset-env behaves differently than in the "interactive playground"

[diesieben07]

Bug description

postcss-preset-env behaves different when I use it locally compared to the interactive playground, specifically in terns of the custom-properties feature.
I want to explicitly support only browsers that already support this feature. Therefor I set my browserslist configuration as defaults and supports css-variables.
In the interactive playground this has the desired effect and custom properties are not transformed (see here).

Locally however, with the exact same postcss.config.mjs file, they are replaced, seen in this repository.

Source CSS

body {
    --color: red;
    color: var(--color);
}

Expected CSS

body {
    --color: red;
    color: var(--color);
}

Actual CSS

body {
    --color: red;
    color: red;
    color: var(--color);
}

Debug output

⚠  Using features from Stage 2 (default)
  prefers-color-scheme-query has been disabled by "enableClientSidePolyfills: false".
  custom-selectors with stage 1 has been disabled
  focus-visible-pseudo-class has been disabled by "enableClientSidePolyfills: false".
  focus-within-pseudo-class has been disabled by "enableClientSidePolyfills: false".
  blank-pseudo-class has been disabled by "enableClientSidePolyfills: false".
  has-pseudo-class has been disabled by "enableClientSidePolyfills: false".
Disabling :is on "nesting-rules" due to lack of browser support.
Adding area[href] fallbacks for ":any-link" support in Edge and IE.
Enabling the following feature(s):
  all-property
  any-link-pseudo-class
  autoprefixer
  break-properties
  cascade-layers
  case-insensitive-attributes
  clamp
  color-function
  color-functional-notation
  color-mix
  custom-media-queries
  custom-properties
  dir-pseudo-class
  display-two-values
  double-position-gradients
  float-clear-logical-values
  font-format-keywords
  font-variant-property
  gap-properties
  gradients-interpolation-method
  hexadecimal-alpha-notation
  hwb-function
  ic-unit
  image-set-function
  is-pseudo-class
  lab-function
  logical-properties-and-values
  logical-resize
  logical-viewport-units
  media-queries-aspect-ratio-number-values
  media-query-ranges
  nested-calc
  nesting-rules
  not-pseudo-class
  oklab-function
  opacity-percentage
  overflow-property
  overflow-wrap-property
  place-properties
  rebeccapurple-color
  relative-color-syntax
  scope-pseudo-class
  stepped-value-functions
  system-ui-font-family
  text-decoration-shorthand
  trigonometric-functions
  unset-value [postcss-preset-env]

Extra config

No response

What plugin are you experiencing this issue on?

PostCSS Preset Env

Plugin version

9.0.0

What OS are you experiencing this on?

Linux

Node Version

18.16.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

[romainmenke]

Hi @diesieben07,
Thank you for the reproduction!

---

Is it correct that you are describing two issues?

• the playground doesn't match a local run
• the local run does't behave as you would want it to

---

1

The playground is subtly different because Browserslist works differently in a browser.

I think this is to blame : https://github.com/browserslist/browserslist/blob/main/browser.js#L33

  loadFeature: function loadFeature() {
    throw new BrowserslistError(
      'Supports queries are not available in client-side build of Browserslist'
    )
  },

---

2

The support queries are not in sync with postcss-preset-env.
I have no idea where they source their data and how they validate it.

I will look into this a bit more later.

[diesieben07]

@romainmenke Yes you are absolutely correct, these are essentially two different things although I perceived them to be one, because it seemed like the playground was behaving correctly.

1

Your analysis certainly seems to be correct, the error you quoted is indeed shown in the console on the playground. Seems like this could be handled better, by communicating to the user that no transforming will happen at all (which I assume is what is happening).

2

Interesting. It seems postcss-preset-env uses cssdb, whereas browserslist uses caniuse-lite. I guess mixing the two doesn't work right, which is a shame. I can work around this by explicitly disabling the feature in the postcss-preset-env configuration instead of filtering out the browsers using browserlist.

[romainmenke]

Hi @diesieben07,

It took a while, but a fix for this issue has now been released.
Please let us know if this still gives you any trouble!

[diesieben07]

I can confirm that this seems to be fixed in 9.1.0!

[romainmenke]

Awesome!

Thank you for getting back to us 🙇