Support URL in arbitrary values (#5587)

* add url to resolveArbitraryValue list

* add `asURL` data type

* add `bg-[url('..')]` regex

* allow for `resolveArbitraryValue` to be an array

* prevent spaces around `-` when in a `url`

* add tests to verify `bg-[url('...')]` and `stroke-[url(...)]`

src/corePlugins.js

@@ -17,6 +17,7 @@ import {
   transformAllClasses,
   transformLastClasses,
   asLength,
+  asURL,
   asLookupValue,
 } from './util/pluginUtils'
 import packageJson from '../package.json'
@@ -1361,7 +1362,7 @@ export let backgroundOpacity = createUtilityPlugin('backgroundOpacity', [
 export let backgroundImage = createUtilityPlugin(
   'backgroundImage',
   [['bg', ['background-image']]],
-  { resolveArbitraryValue: asLookupValue }
+  { resolveArbitraryValue: [asLookupValue, asURL] }
 )
 export let gradientColorStops = (() => {
   function transparentTo(value) {
@@ -1482,7 +1483,7 @@ export let stroke = ({ matchUtilities, theme }) => {
 }
 
 export let strokeWidth = createUtilityPlugin('strokeWidth', [['stroke', ['stroke-width']]], {
-  resolveArbitraryValue: asLength,
+  resolveArbitraryValue: [asLength, asURL],
 })
 
 export let objectFit = ({ addUtilities }) => {

src/lib/expandTailwindAtRules.js

@@ -7,6 +7,8 @@ let env = sharedState.env
 let contentMatchCache = sharedState.contentMatchCache
 
 const PATTERNS = [
+  /([^<>"'`\s]*\[\w*\('[^"'`\s]*'\)\])/.source, // bg-[url('...')]
+  /([^<>"'`\s]*\[\w*\("[^"'`\s]*"\)\])/.source, // bg-[url("...")]
   /([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
   /([^<>"'`\s]*\["[^"'`\s]*"\])/.source, // `content-["hello"]` but not `content-["hello"]"]`
   /([^<>"'`\s]*\[[^"'`\s]+\])/.source, // `fill-[#bada55]`

src/util/createUtilityPlugin.js

@@ -1,11 +1,12 @@
 import transformThemeValue from './transformThemeValue'
-import { asValue, asColor, asAngle, asLength, asLookupValue } from '../util/pluginUtils'
+import { asValue, asColor, asAngle, asLength, asURL, asLookupValue } from '../util/pluginUtils'
 
 let asMap = new Map([
   [asValue, 'any'],
   [asColor, 'color'],
   [asAngle, 'angle'],
   [asLength, 'length'],
+  [asURL, 'url'],
   [asLookupValue, 'lookup'],
 ])
 
@@ -38,7 +39,9 @@ export default function createUtilityPlugin(
                 Object.entries(theme(themeKey) ?? {}).filter(([modifier]) => modifier !== 'DEFAULT')
               )
             : theme(themeKey),
-          type: asMap.get(resolveArbitraryValue) ?? 'any',
+          type: Array.isArray(resolveArbitraryValue)
+            ? resolveArbitraryValue.map((typeResolver) => asMap.get(typeResolver) ?? 'any')
+            : asMap.get(resolveArbitraryValue) ?? 'any',
         }
       )
     }

src/util/pluginUtils.js

@@ -175,6 +175,9 @@ export function asValue(modifier, lookup = {}, { validate = () => true } = {}) {
     .replace(/^_/g, ' ')
     .replace(/\\_/g, '_')
 
+  // Keep raw strings if it starts with `url(`
+  if (value.startsWith('url(')) return value
+
   // add spaces around operators inside calc() that do not follow an operator or (
   return value.replace(
     /(-?\d*\.?\d(?!\b-.+[,)](?![^+\-/*])\D)(?:%|[a-z]+)?|\))([+\-/*])/g,
@@ -236,6 +239,12 @@ export function asAngle(modifier, lookup = {}) {
   return asUnit(modifier, ['deg', 'grad', 'rad', 'turn'], lookup)
 }
 
+export function asURL(modifier, lookup = {}) {
+  return asValue(modifier, lookup, {
+    validate: (value) => value.startsWith('url('),
+  })
+}
+
 export function asLength(modifier, lookup = {}) {
   return asUnit(
     modifier,
@@ -271,6 +280,7 @@ let typeMap = {
   color: asColor,
   angle: asAngle,
   length: asLength,
+  url: asURL,
   lookup: asLookupValue,
 }