Ensure repeating-conic-gradient is detected as an image (#11180)

* ensure `repeating-conic-gradient` is detected as an image

* update changelog

Author: RobinMalfait

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix issue where some pseudo-element variants generated the wrong selector ([#10943](https://github.com/tailwindlabs/tailwindcss/pull/10943), [#10962](https://github.com/tailwindlabs/tailwindcss/pull/10962))
 - Make font settings propagate into buttons, inputs, etc. ([#10940](https://github.com/tailwindlabs/tailwindcss/pull/10940))
 - Fix parsing of `theme()` inside `calc()` when there are no spaces around operators ([#11157](https://github.com/tailwindlabs/tailwindcss/pull/11157))
+- Ensure `repeating-conic-gradient` is detected as an image ([#11180](https://github.com/tailwindlabs/tailwindcss/pull/11180))
 
 ### Added
 

src/util/dataTypes.js

@@ -188,11 +188,12 @@ export function image(value) {
 }
 
 let gradientTypes = new Set([
+  'conic-gradient',
   'linear-gradient',
   'radial-gradient',
+  'repeating-conic-gradient',
   'repeating-linear-gradient',
   'repeating-radial-gradient',
-  'conic-gradient',
 ])
 export function gradient(value) {
   value = normalize(value)

tests/arbitrary-values.oxide.test.css

@@ -652,6 +652,9 @@
 .bg-\[linear-gradient\(to_left\,rgb\(var\(--green\)\)\,blue\)\] {
   background-image: linear-gradient(to left, rgb(var(--green)), blue);
 }
+.bg-\[repeating-conic-gradient\(\#F8F9FA_0\%_25\%\,_white_0\%_50\%\)\] {
+  background-image: repeating-conic-gradient(#f8f9fa 0% 25%, white 0% 50%);
+}
 .bg-\[url\(\'\/path-to-image\.png\'\)\] {
   background-image: url('/path-to-image.png');
 }

tests/arbitrary-values.test.css

@@ -681,6 +681,9 @@
 .bg-\[linear-gradient\(to_left\,rgb\(var\(--green\)\)\,blue\)\] {
   background-image: linear-gradient(to left, rgb(var(--green)), blue);
 }
+.bg-\[repeating-conic-gradient\(\#F8F9FA_0\%_25\%\,_white_0\%_50\%\)\] {
+  background-image: repeating-conic-gradient(#f8f9fa 0% 25%, white 0% 50%);
+}
 .bg-\[url\(\'\/path-to-image\.png\'\)\] {
   background-image: url('/path-to-image.png');
 }

tests/arbitrary-values.test.html

@@ -206,6 +206,7 @@
 <div class="bg-[var(--value1)_var(--value2)]"></div>
 <div class="bg-[color:var(--value1)_var(--value2)]"></div>
 <div class="bg-[linear-gradient(to_left,rgb(var(--green)),blue)]"></div>
+<div class="bg-[repeating-conic-gradient(#F8F9FA_0%_25%,_white_0%_50%)]"></div>
 
 <div class="bg-[url('/path-to-image.png')] bg-[url:var(--url)]"></div>
 <div class="bg-[linear-gradient(#eee,#fff)]"></div>