ensure stroke can handle url arbitrary values

RobinMalfait · RobinMalfait · commit 60148c2be3c9 · 2021-09-22T15:27:38.000+02:00
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -1418,7 +1418,7 @@ export let stroke = ({ matchUtilities, theme }) => {
         return { stroke: toColorValue(value) }
       },
     },
-    { values: flattenColorPalette(theme('stroke')), type: 'color' }
+    { values: flattenColorPalette(theme('stroke')), type: ['color', 'url'] }
   )
 }
 
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
@@ -580,12 +580,18 @@
 .fill-\[var\(--value\)\] {
   fill: var(--value);
 }
+.fill-\[url\(\#icon-gradient\)\] {
+  fill: url(#icon-gradient);
+}
 .stroke-\[\#da5b66\] {
   stroke: #da5b66;
 }
 .stroke-\[color\:var\(--value\)\] {
   stroke: var(--value);
 }
+.stroke-\[url\(\#icon-gradient\)\] {
+  stroke: url(#icon-gradient);
+}
 .stroke-\[20px\] {
   stroke-width: 20px;
 }
diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
@@ -207,9 +207,11 @@
 
     <div class="fill-[#da5b66]"></div>
     <div class="fill-[var(--value)]"></div>
+    <div class="fill-[url(#icon-gradient)]"></div>
 
     <div class="stroke-[#da5b66]"></div>
     <div class="stroke-[color:var(--value)]"></div>
+    <div class="stroke-[url(#icon-gradient)]"></div>
 
     <div class="stroke-[20px]"></div>
     <div class="stroke-[length:var(--value)]"></div>

Original file line number	Diff line number	Diff line change
`@@ -1418,7 +1418,7 @@ export let stroke = ({ matchUtilities, theme }) => {`
`1418`	`1418`	`return { stroke: toColorValue(value) }`
`1419`	`1419`	`},`
`1420`	`1420`	`},`
`1421`		`- { values: flattenColorPalette(theme('stroke')), type: 'color' }`
	`1421`	`+ { values: flattenColorPalette(theme('stroke')), type: ['color', 'url'] }`
`1422`	`1422`	`)`
`1423`	`1423`	`}`
`1424`	`1424`