tailwindcss 0.0.0-insiders.a8836eb → 0.0.0-insiders.abcd9ac

package/CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `border-hidden` utility ([#5485](https://github.com/tailwindlabs/tailwindcss/pull/5485))
 - Add `align-sub` and `align-super` utilities by default ([#5486](https://github.com/tailwindlabs/tailwindcss/pull/5486))
 - Add `break-before`, `break-inside` and `break-after` utilities ([#5530](https://github.com/tailwindlabs/tailwindcss/pull/5530))
+- Add `file` variant for `::file-selector-button` pseudo element ([#4936](https://github.com/tailwindlabs/tailwindcss/pull/4936))
 
 ### Fixed
 

package/lib/corePlugins.js

@@ -83,6 +83,13 @@ let pseudoElementVariants = ({
       return withPseudo(`selection${config('separator')}${className}`, '::selection');
     });
   })]);
+  addVariant('file', (0, _pluginUtils.transformAllSelectors)(selector => {
+    return (0, _pluginUtils.updateAllClasses)(selector, (className, {
+      withPseudo
+    }) => {
+      return withPseudo(`file${config('separator')}${className}`, '::file-selector-button');
+    });
+  }));
   addVariant('before', (0, _pluginUtils.transformAllSelectors)(selector => {
     return (0, _pluginUtils.updateAllClasses)(selector, (className, {
       withPseudo
@@ -1790,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;
 
@@ -1977,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,10 +21,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 let env = sharedState.env;
 let contentMatchCache = sharedState.contentMatchCache;
-const PATTERNS = ["([^<>\"'`\\s]*\\['[^<>\"'`\\s]*'\\])", // `content-['hello']` but not `content-['hello']']`
-'([^<>"\'`\\s]*\\["[^<>"\'`\\s]*"\\])', // `content-["hello"]` but not `content-["hello"]"]`
-'([^<>"\'`\\s]*\\[[^<>"\'`\\s]+\\])', // `fill-[#bada55]`
-'([^<>"\'`\\s]*[^<>"\'`\\s:])' // `px-1.5`, `uppercase` but not `uppercase:`
+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('|')
 ].join('|');
 const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g');
 const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g;

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.a8836eb",
+  "version": "0.0.0-insiders.abcd9ac",
   "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
   "license": "MIT",
   "main": "lib/index.js",
@@ -56,7 +56,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^27.1.0",
-    "jest-diff": "^27.1.0",
+    "jest-diff": "^27.2.0",
     "postcss": "^8.3.6",
     "postcss-cli": "^8.3.1",
     "prettier": "^2.4.1",

package/src/corePlugins.js

@@ -17,6 +17,7 @@ import {
   transformAllClasses,
   transformLastClasses,
   asLength,
+  asURL,
   asLookupValue,
 } from './util/pluginUtils'
 import packageJson from '../package.json'
@@ -72,6 +73,15 @@ export let pseudoElementVariants = ({ config, addVariant }) => {
     }),
   ])
 
+  addVariant(
+    'file',
+    transformAllSelectors((selector) => {
+      return updateAllClasses(selector, (className, { withPseudo }) => {
+        return withPseudo(`file${config('separator')}${className}`, '::file-selector-button')
+      })
+    })
+  )
+
   addVariant(
     'before',
     transformAllSelectors(
@@ -1352,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) {
@@ -1473,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,10 +7,12 @@ let env = sharedState.env
 let contentMatchCache = sharedState.contentMatchCache
 
 const PATTERNS = [
-  "([^<>\"'`\\s]*\\['[^<>\"'`\\s]*'\\])", // `content-['hello']` but not `content-['hello']']`
-  '([^<>"\'`\\s]*\\["[^<>"\'`\\s]*"\\])', // `content-["hello"]` but not `content-["hello"]"]`
-  '([^<>"\'`\\s]*\\[[^<>"\'`\\s]+\\])', // `fill-[#bada55]`
-  '([^<>"\'`\\s]*[^<>"\'`\\s:])', // `px-1.5`, `uppercase` but not `uppercase:`
+  /([^<>"'`\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('|')
 ].join('|')
 const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g')
 const INNER_MATCH_GLOBAL_REGEXP = /[^<>"'`\s.(){}[\]#=%]*[^<>"'`\s.(){}[\]#=%:]/g

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