feat(preset-typography): compatibility mode(#2051)

[BeiyanYunyi]

See #2051

[netlify]

✅ Deploy Preview for unocss ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	7d7691f
🔍 Latest deploy log	https://app.netlify.com/sites/unocss/deploys/63ca34cb8c9ed400086fb58e
😎 Deploy Preview	https://deploy-preview-2064--unocss.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[zyyv]

Hi, it seems to not support for not-prose with use compatibility mode.
Playground

[BeiyanYunyi]

Hi, it seems to not support for not-prose with use compatibility mode.

This is expected and is explained in the jsdoc and README. The reason is the :where() selector, which is not supported under chrome 88 and make the whole prose unavailable. The compatibility mode is introduced to make prose work, at least.

[zyyv]

@lixiang810 I modified the code a bit and removed :is. I think we should drop all pseudo-classes when using compatibility mode, what do you think?

[BeiyanYunyi]

@lixiang810 I modified the code a bit and removed :is. I think we should drop all pseudo-classes when using compatibility mode, what do you think?

Nice, I forgot it. The :is() selector is also unavaliable before Chrome 88.

[zyyv]

@lixiang810 I modified the code a bit and removed :is. I think we should drop all pseudo-classes when using compatibility mode, what do you think?

Nice, I forgot it. The :is() selector is also unavaliable before Chrome 88.

Let me check it again, it seems that the wrong code was i changed.😅

[antfu]

I am a bit hesitant about the name. compatibility is a relevant term, anything could be incompatible if their browsers are old enough. While browser list is probably too heavy for us, I think we could have an object instead:

compatibility: {
  noColonWhere: true,
  noColonIs: true
}

[BeiyanYunyi]

compatibility: {
  noColonWhere: true,
  noColonIs: true
}

The compatibility of :where() and :is() is the same. Browsers that do not support :where() also do not support :is(), and vice versa. It seems that it is unnecessary for these two pseudo-classes.

:not is an exception, as it have a little difference to :where() in firefox. But the not-prose classname will not work without :where() and :not(), it makes no sense to remove only one of them.

Maybe we can call this option disableNotUtility and describe the purpose (compatibility) in jsdoc and readme instead.

[antfu]

The compatibility of :where() and :is() is the same. Browsers that do not support :where() also do not support :is(), and vice versa. It seems that it is unnecessary for these two pseudo-classes.

This statement is only true in the context of the current existing browsers you are aware of. This may not always be the case, as you mentioned the exception. Users could also use a custom browser engine or anything, that does not always support them at the same time. Also in the future, there could be :foo :bar or anything. Having them in a single options is not practical.

[BeiyanYunyi]

OK. Now we have a fine-grained control.