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>
tailwindlabs · Mar 20, 2023 · bac5ecf · bac5ecf
1 parent 69d29c9
commit bac5ecf
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>