Shouldn't supports: false disable prefixing inside @supports block?

[frippz]

[email protected]

Browserslist config

"browserslist": [
  "last 2 versions",
  "not < 1%",
  "last 2 edge versions",
  "not ie < 11"
],

postcss.config.js

module.exports = {
  plugins: {
    autoprefixer: {
      supports: false,
    },
    'postcss-import': {},
    'postcss-custom-properties': {
      preserve: false,
    },
    'postcss-custom-media': {
      preserve: false,
    },
  },
};

Input CSS

@supports (position: sticky) {
  .search-results {
    position: sticky;
    top: 0;
  }
}

Output CSS

@supports (position: sticky) {
  .search-results {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }
}

Expected output CSS

@supports (position: sticky) {
  .search-results {
    position: sticky;
    top: 0;
  }
}

Given the configuration option, and the fact that the @supports block effectively causes non-supporting browsers to skip over the content inside — wouldn't it make sense that autoprefixer didn't prefix anything inside said @supports block?

[ai]

Nice idea, but I will not have time for this during next few weeks.

Do you want to send PR?

[frippz]

Hmm, I will at least give it a look. But this would be the first time I'd do something outside of simple DOM manipulation with JavaScript. 😄

[frippz]

Well, I gave up. This was clearly outside of my competence area. 😂

[ai]

You can remove -webkit-sticky by /* autoprefixer:off */ inside @supports

[Dan503]

That's an ok temporary solution. The advantage of having Autoprefixer understand @supports though is that you can still get prefixing on values not associated with the @supports statement inside @supports.

[Dan503]

Yes it should disable prefixing but only for properties associated with the @supports statement.

@supports (display: grid) {
  display: grid; /* should not get prefixed */
  user-select: none; /* should still get prefixed */
}

This is really complicated to do though so it's probably likely to have lots of bugs in it if implemented.

There are still the /* autoprefixer:off */ and /* autoprefixer: ignore next */ control comments though which are able to achieve the result needed with a bit of extra writing.

@supports (display: grid) {
  /* autoprefixer: ignore next */
  display: grid; /* not prefixed */
  user-select: none; /* still prefixed */
}

[ai]

Yeap, it is a pretty rare case. I will not have time for it in next months. But let’s keep it open. If somebody will implement it, I will help with code polishing and release PR.

[fanich37]

I'm gonna check it but at first glance it's a tricky one :)