tailwindcss 0.0.0-insiders.a4d1bdb → 0.0.0-insiders.abcd9ac

package/lib/corePlugins.js

@@ -1797,7 +1797,7 @@ exports.backgroundColor = backgroundColor;
 let backgroundOpacity = (0, _createUtilityPlugin.default)('backgroundOpacity', [['bg-opacity', ['--tw-bg-opacity']]]);
 exports.backgroundOpacity = backgroundOpacity;
 let backgroundImage = (0, _createUtilityPlugin.default)('backgroundImage', [['bg', ['background-image']]], {
-  resolveArbitraryValue: _pluginUtils.asLookupValue
+  resolveArbitraryValue: [_pluginUtils.asLookupValue, _pluginUtils.asURL]
 });
 exports.backgroundImage = backgroundImage;
 
@@ -1984,7 +1984,7 @@ let stroke = ({
 
 exports.stroke = stroke;
 let strokeWidth = (0, _createUtilityPlugin.default)('strokeWidth', [['stroke', ['stroke-width']]], {
-  resolveArbitraryValue: _pluginUtils.asLength
+  resolveArbitraryValue: [_pluginUtils.asLength, _pluginUtils.asURL]
 });
 exports.strokeWidth = strokeWidth;
 

package/lib/lib/expandTailwindAtRules.js

@@ -21,7 +21,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 let env = sharedState.env;
 let contentMatchCache = sharedState.contentMatchCache;
-const PATTERNS = [/([^<>"'`\s]*\['[^"'`\s]*'\])/.source, // `content-['hello']` but not `content-['hello']']`
+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]`
 /([^<>"'`\s]*[^"'`\s:])/.source //  `px-1.5`, `uppercase` but not `uppercase:`].join('|')

package/lib/util/createUtilityPlugin.js

@@ -11,7 +11,7 @@ var _pluginUtils = require("../util/pluginUtils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-let asMap = new Map([[_pluginUtils.asValue, 'any'], [_pluginUtils.asColor, 'color'], [_pluginUtils.asAngle, 'angle'], [_pluginUtils.asLength, 'length'], [_pluginUtils.asLookupValue, 'lookup']]);
+let asMap = new Map([[_pluginUtils.asValue, 'any'], [_pluginUtils.asColor, 'color'], [_pluginUtils.asAngle, 'angle'], [_pluginUtils.asLength, 'length'], [_pluginUtils.asURL, 'url'], [_pluginUtils.asLookupValue, 'lookup']]);
 
 function createUtilityPlugin(themeKey, utilityVariations = [[themeKey, [themeKey]]], {
   filterDefault = false,
@@ -23,7 +23,7 @@ function createUtilityPlugin(themeKey, utilityVariations = [[themeKey, [themeKey
     theme
   }) {
     for (let utilityVariation of utilityVariations) {
-      var _theme, _asMap$get;
+      var _theme, _asMap$get2;
 
       let group = Array.isArray(utilityVariation[0]) ? utilityVariation : [utilityVariation];
       matchUtilities(group.reduce((obj, [classPrefix, properties]) => {
@@ -44,7 +44,11 @@ function createUtilityPlugin(themeKey, utilityVariations = [[themeKey, [themeKey
         });
       }, {}), {
         values: filterDefault ? Object.fromEntries(Object.entries((_theme = theme(themeKey)) !== null && _theme !== void 0 ? _theme : {}).filter(([modifier]) => modifier !== 'DEFAULT')) : theme(themeKey),
-        type: (_asMap$get = asMap.get(resolveArbitraryValue)) !== null && _asMap$get !== void 0 ? _asMap$get : 'any'
+        type: Array.isArray(resolveArbitraryValue) ? resolveArbitraryValue.map(typeResolver => {
+          var _asMap$get;
+
+          return (_asMap$get = asMap.get(typeResolver)) !== null && _asMap$get !== void 0 ? _asMap$get : 'any';
+        }) : (_asMap$get2 = asMap.get(resolveArbitraryValue)) !== null && _asMap$get2 !== void 0 ? _asMap$get2 : 'any'
       });
     }
   };

package/lib/util/pluginUtils.js

@@ -13,6 +13,7 @@ exports.asValue = asValue;
 exports.asUnit = asUnit;
 exports.asColor = asColor;
 exports.asAngle = asAngle;
+exports.asURL = asURL;
 exports.asLength = asLength;
 exports.asLookupValue = asLookupValue;
 exports.coerceValue = coerceValue;
@@ -223,7 +224,9 @@ function asValue(modifier, lookup = {}, {
   } // convert `_` to ` `, escept for escaped underscores `\_`
 
 
-  value = value.replace(/([^\\])_/g, '$1 ').replace(/^_/g, ' ').replace(/\\_/g, '_'); // add spaces around operators inside calc() that do not follow an operator or (
+  value = value.replace(/([^\\])_/g, '$1 ').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, '$1 $2 ');
 }
@@ -281,6 +284,12 @@ function asAngle(modifier, lookup = {}) {
   return asUnit(modifier, ['deg', 'grad', 'rad', 'turn'], lookup);
 }
 
+function asURL(modifier, lookup = {}) {
+  return asValue(modifier, lookup, {
+    validate: value => value.startsWith('url(')
+  });
+}
+
 function asLength(modifier, lookup = {}) {
   return asUnit(modifier, ['cm', 'mm', 'Q', 'in', 'pc', 'pt', 'px', 'em', 'ex', 'ch', 'rem', 'lh', 'vw', 'vh', 'vmin', 'vmax', '%'], lookup);
 }
@@ -294,6 +303,7 @@ let typeMap = {
   color: asColor,
   angle: asAngle,
   length: asLength,
+  url: asURL,
   lookup: asLookupValue
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.a4d1bdb",
+  "version": "0.0.0-insiders.abcd9ac",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",

package/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 }) => {

package/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]`

package/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',
         }
       )
     }

package/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,
 }