tailwindcss 0.0.0-insiders.a8836eb → 0.0.0-insiders.ab17c6c

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/lib/generateRules.js

@@ -254,10 +254,13 @@ function* resolveMatches(candidate, context) {
   for (let matchedPlugins of resolveMatchedPlugins(classCandidate, context)) {
     let matches = [];
     let [plugins, modifier] = matchedPlugins;
+    let isOnlyPlugin = plugins.length === 1;
 
     for (let [sort, plugin] of plugins) {
       if (typeof plugin === 'function') {
-        for (let ruleSet of [].concat(plugin(modifier))) {
+        for (let ruleSet of [].concat(plugin(modifier, {
+          isOnlyPlugin
+        }))) {
           let [rules, options] = parseRules(ruleSet, context.postCssNodeCache);
 
           for (let rule of rules) {

package/lib/lib/setupContextUtils.js

@@ -333,17 +333,27 @@ function buildPluginApi(tailwindConfig, context, {
         let rule = utilities[identifier];
         classList.add([prefixedIdentifier, options]);
 
-        function wrapped(modifier) {
+        function wrapped(modifier, {
+          isOnlyPlugin
+        }) {
           let {
             type = 'any'
           } = options;
           type = [].concat(type);
           let [value, coercedType] = (0, _pluginUtils.coerceValue)(type, modifier, options.values, tailwindConfig);
 
-          if (!type.includes(coercedType) || value === undefined) {
+          if (value === undefined) {
             return [];
           }
 
+          if (!type.includes(coercedType)) {
+            if (isOnlyPlugin) {
+              _log.default.warn([`Unnecessary typehint \`${coercedType}\` in \`${identifier}-${modifier}\`.`, `You can safely update it to \`${identifier}-${modifier.replace(coercedType + ':', '')}\`.`]);
+            } else {
+              return [];
+            }
+          }
+
           if (!isValidArbitraryValue(value)) {
             return [];
           }

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,11 +303,15 @@ let typeMap = {
   color: asColor,
   angle: asAngle,
   length: asLength,
+  url: asURL,
   lookup: asLookupValue
 };
+let supportedTypes = Object.keys(typeMap);
 
 function splitAtFirst(input, delim) {
-  return (([first, ...rest]) => [first, rest.join(delim)])(input.split(delim));
+  let idx = input.indexOf(delim);
+  if (idx === -1) return [undefined, input];
+  return [input.slice(0, idx), input.slice(idx + 1)];
 }
 
 function coerceValue(type, modifier, values, tailwindConfig) {
@@ -307,7 +320,11 @@ function coerceValue(type, modifier, values, tailwindConfig) {
   if (isArbitraryValue(modifier)) {
     let [explicitType, value] = splitAtFirst(modifier.slice(1, -1), ':');
 
-    if (value.length > 0 && Object.keys(typeMap).includes(explicitType)) {
+    if (explicitType !== undefined && !supportedTypes.includes(explicitType)) {
+      return [];
+    }
+
+    if (value.length > 0 && supportedTypes.includes(explicitType)) {
       return [asValue(`[${value}]`, values, tailwindConfig), explicitType];
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwindcss",
-  "version": "0.0.0-insiders.a8836eb",
+  "version": "0.0.0-insiders.ab17c6c",
   "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/lib/generateRules.js

@@ -226,10 +226,11 @@ function* resolveMatches(candidate, context) {
   for (let matchedPlugins of resolveMatchedPlugins(classCandidate, context)) {
     let matches = []
     let [plugins, modifier] = matchedPlugins
+    let isOnlyPlugin = plugins.length === 1
 
     for (let [sort, plugin] of plugins) {
       if (typeof plugin === 'function') {
-        for (let ruleSet of [].concat(plugin(modifier))) {
+        for (let ruleSet of [].concat(plugin(modifier, { isOnlyPlugin }))) {
           let [rules, options] = parseRules(ruleSet, context.postCssNodeCache)
           for (let rule of rules) {
             matches.push([{ ...sort, options: { ...sort.options, ...options } }, rule])

package/src/lib/setupContextUtils.js

@@ -300,15 +300,29 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
 
         classList.add([prefixedIdentifier, options])
 
-        function wrapped(modifier) {
+        function wrapped(modifier, { isOnlyPlugin }) {
           let { type = 'any' } = options
           type = [].concat(type)
           let [value, coercedType] = coerceValue(type, modifier, options.values, tailwindConfig)
 
-          if (!type.includes(coercedType) || value === undefined) {
+          if (value === undefined) {
             return []
           }
 
+          if (!type.includes(coercedType)) {
+            if (isOnlyPlugin) {
+              log.warn([
+                `Unnecessary typehint \`${coercedType}\` in \`${identifier}-${modifier}\`.`,
+                `You can safely update it to \`${identifier}-${modifier.replace(
+                  coercedType + ':',
+                  ''
+                )}\`.`,
+              ])
+            } else {
+              return []
+            }
+          }
+
           if (!isValidArbitraryValue(value)) {
             return []
           }

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,11 +280,16 @@ let typeMap = {
   color: asColor,
   angle: asAngle,
   length: asLength,
+  url: asURL,
   lookup: asLookupValue,
 }
 
+let supportedTypes = Object.keys(typeMap)
+
 function splitAtFirst(input, delim) {
-  return (([first, ...rest]) => [first, rest.join(delim)])(input.split(delim))
+  let idx = input.indexOf(delim)
+  if (idx === -1) return [undefined, input]
+  return [input.slice(0, idx), input.slice(idx + 1)]
 }
 
 export function coerceValue(type, modifier, values, tailwindConfig) {
@@ -284,7 +298,11 @@ export function coerceValue(type, modifier, values, tailwindConfig) {
   if (isArbitraryValue(modifier)) {
     let [explicitType, value] = splitAtFirst(modifier.slice(1, -1), ':')
 
-    if (value.length > 0 && Object.keys(typeMap).includes(explicitType)) {
+    if (explicitType !== undefined && !supportedTypes.includes(explicitType)) {
+      return []
+    }
+
+    if (value.length > 0 && supportedTypes.includes(explicitType)) {
       return [asValue(`[${value}]`, values, tailwindConfig), explicitType]
     }