Add list-style-image support (#10817)

* add `listStyle` instead of `listStyleType`

Co-authored-by: Adam Wathan <[email protected]>
Co-authored-by: Jordan Pittman <[email protected]>

* 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 <[email protected]>
Co-authored-by: Adam Wathan <[email protected]>
Co-authored-by: Jordan Pittman <[email protected]>
Co-authored-by: Peter Neupauer <[email protected]>

Author: 4 people

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
 

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({

stubs/config.full.js

@@ -577,6 +577,9 @@ module.exports = {
       disc: 'disc',
       decimal: 'decimal',
     },
+    listStyleImage: {
+      none: 'none',
+    },
     margin: ({ theme }) => ({
       auto: 'auto',
       ...theme('spacing'),

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;
 }

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;
 }

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>
 

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;
 }

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;
 }

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>