Add `list-style-image` utility

[neupauer]

This PR will add the list-style-image utilities.

This PR also fix the ambiguity of the list utility by introducing the string: type for the arbitrary values, so: .list-['👉'] will generatelist-style-type: '👉' .list-[url(...)] will generate list-style-image: url(...)

💥This also introduces breaking change to the list-style-type utility:

- list-[var(--value)]
+ list-[string:var(--value)]

[adamwathan]

Thanks! I think to avoid the breaking change we are going to want to come up with some clever internal way to make list-[var(--value)] still work, maybe like a preferred: true or preferred: somePrivateSymbol option or something.

I think this would be good to add though so going to leave this open so we can look into it soon — just going through PRs today as we're trying to clean up before tagging v3.1. Will try to dig into this more for v3.2 👍🏻

[thecrypticace]

I updated the PR to use list-style-type for otherwise unknown types (the any type) which fixes the issue with var(…) and the need for the additional string data type — which I have removed it as well.

ping @adamwathan

[adamwathan]

@thecrypticace Can you review this again tomorrow if you have time and see if we need to incorporate any of the preferOnConflict stuff we added for ambiguous types before merging?

I'm a bit hesitant to add this in general at this point since we have arbitrary property support — it might just be simpler to recommend typing <div class="[list-style-image:url(...)] ..."> since there are no sensible default values we can include for this anyways. Makes it a pretty weird one to document in the documentation.

Anyone following this PR have any thoughts?

[thecrypticace]

@adamwathan I've updated the PR. So preferOnConflict is unnecessary here. That is only necessary when multiple sets of utilities can take the same arbitrary value "types" and share the same prefix. In this case the url(…) is typed separately and therefore not ambiguous. The use of any is what bypasses the problem with the use of var(--my-var-name-here).

[adamwathan]

Thinking about this more, I think the best solution here is actually to drop list-style-type and just use list-style for all this stuff, then the same plugin can handle both type and image and we don't have the weird documentation issue.

So going to close this one, and we'll plan to make it possible to use URLs with the existing listStyleType core plugin instead. Just a bit of work because we'll want to make it a smooth deprecation process from listStyleType to listStyle that automatically normalizes your config file and stuff.

Thanks either way!