From bac5ecf0040aa9a788d1b22d706506146ee831ff Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Mon, 20 Mar 2023 14:40:35 -0400
Subject: [PATCH] Add `list-style-image` support (#10817)

* add `listStyle` instead of `listStyleType`

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>

* add `listStyleType` related deprecation warnings

* Implement list-style-image as separate plugin

* Remove unused code, update tests

* Always generate `list-none`, don't pull it from theme

* Gracefully handle missing listStyleType configuration

* Just use `list-image-*` fuck it

* Update changelog

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Co-authored-by: Peter Neupauer <peter@neupauer.sk>
---
 CHANGELOG.md                          | 1 +
 src/corePlugins.js                    | 2 +-
 stubs/config.full.js                  | 3 +++
 tests/arbitrary-values.oxide.test.css | 6 ++++++
 tests/arbitrary-values.test.css       | 6 ++++++
 tests/arbitrary-values.test.html      | 2 ++
 tests/basic-usage.oxide.test.css      | 3 +++
 tests/basic-usage.test.css            | 3 +++
 tests/basic-usage.test.js             | 1 +
 9 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 950c0e500..41ddd9bbf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `content-normal` and `content-stretch` utilities ([#10645](https://github.com/tailwindlabs/tailwindcss/pull/10645))
 - Add `line-clamp` utilities from `@tailwindcss/line-clamp` to core ([#10768](https://github.com/tailwindlabs/tailwindcss/pull/10768))
 - Support ESM and TypeScript config files ([#10785](https://github.com/tailwindlabs/tailwindcss/pull/10785))
+- Add `list-style-image` utilities ([#10817](https://github.com/tailwindlabs/tailwindcss/pull/10817))
 
 ### Fixed
 
diff --git a/src/corePlugins.js b/src/corePlugins.js
index 147bd8b01..d27364857 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -1093,8 +1093,8 @@ export let corePlugins = {
       '.list-outside': { 'list-style-position': 'outside' },
     })
   },
-
   listStyleType: createUtilityPlugin('listStyleType', [['list', ['listStyleType']]]),
+  listStyleImage: createUtilityPlugin('listStyleImage', [['list-image', ['listStyleImage']]]),
 
   appearance: ({ addUtilities }) => {
     addUtilities({
diff --git a/stubs/config.full.js b/stubs/config.full.js
index d2c952639..d3637bc9f 100644
--- a/stubs/config.full.js
+++ b/stubs/config.full.js
@@ -577,6 +577,9 @@ module.exports = {
       disc: 'disc',
       decimal: 'decimal',
     },
+    listStyleImage: {
+      none: 'none',
+    },
     margin: ({ theme }) => ({
       auto: 'auto',
       ...theme('spacing'),
diff --git a/tests/arbitrary-values.oxide.test.css b/tests/arbitrary-values.oxide.test.css
index 411056bb6..4f3056ea9 100644
--- a/tests/arbitrary-values.oxide.test.css
+++ b/tests/arbitrary-values.oxide.test.css
@@ -411,6 +411,12 @@
 .list-\[var\(--value\)\] {
   list-style-type: var(--value);
 }
+.list-image-\[url\(\.\/my-image\.png\)\] {
+  list-style-image: url("./my-image.png");
+}
+.list-image-\[var\(--value\)\] {
+  list-style-image: var(--value);
+}
 .columns-\[20\] {
   columns: 20;
 }
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index a20e619b5..e1c624e2b 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -411,6 +411,12 @@
 .list-\[var\(--value\)\] {
   list-style-type: var(--value);
 }
+.list-image-\[url\(\.\/my-image\.png\)\] {
+  list-style-image: url("./my-image.png");
+}
+.list-image-\[var\(--value\)\] {
+  list-style-image: var(--value);
+}
 .columns-\[20\] {
   columns: 20;
 }
diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
index 047dae8ca..7e65dbf45 100644
--- a/tests/arbitrary-values.test.html
+++ b/tests/arbitrary-values.test.html
@@ -125,6 +125,8 @@
 
 <div class="list-['\1f44d']"></div>
 <div class="list-[var(--value)]"></div>
+<div class="list-image-[url(./my-image.png)]"></div>
+<div class="list-image-[var(--value)]"></div>
 
 <div class="columns-[20] columns-[var(--columns)]"></div>
 
diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css
index ac91e67e8..c5117b917 100644
--- a/tests/basic-usage.oxide.test.css
+++ b/tests/basic-usage.oxide.test.css
@@ -408,6 +408,9 @@
 .list-disc {
   list-style-type: disc;
 }
+.list-image-none {
+  list-style-image: none;
+}
 .appearance-none {
   appearance: none;
 }
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index 0e39ff9e0..55bdc2b3b 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -408,6 +408,9 @@
 .list-disc {
   list-style-type: disc;
 }
+.list-image-none {
+  list-style-image: none;
+}
 .appearance-none {
   appearance: none;
 }
diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js
index 90d480380..53c2a4418 100644
--- a/tests/basic-usage.test.js
+++ b/tests/basic-usage.test.js
@@ -89,6 +89,7 @@ crosscheck(({ stable, oxide }) => {
             <div class="leading-relaxed leading-5"></div>
             <div class="list-inside"></div>
             <div class="list-disc"></div>
+            <div class="list-image-none"></div>
             <div class="m-4 my-2 mx-auto mt-0 mr-1 mb-3 ml-4"></div>
             <div class="max-h-screen"></div>
             <div class="max-w-full"></div>