Handle unknown typehints (#5588)

If you use a typehint like `w-[length:12px]`, then currently that
wouldn't generate anything because we don't have a matchUtilities for
`w` with a `length` type. To fix this, we can detect if this is
unnecessary, if it is we still generate the expected outcome. (In this
case `width: 12px`) but we also warn to the user that we detected this.

Currently we detect this by checking if there is only a single plugin
registered for handling the prefix (e.g.: `w-`). We can probably improve
this by also checking all the types that all plugins are handling for
the resolved plugins.

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])

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 []
  }

tests/arbitrary-values.test.js

@@ -30,6 +30,18 @@ it('should not generate any css if an unknown typehint is used', () => {
  })
 })
 
+it('should handle unknown typehints', () => {
+ let config = { content: [{ raw: html`<div class="w-[length:12px]"></div>` }] }
+
+ return run('@tailwind utilities', config).then((result) => {
+ return expect(result.css).toMatchFormattedCss(`
+ .w-\\[length\\:12px\\] {
+ width: 12px;
+ }
+ `)
+ })
+})
+
 it('should convert _ to spaces', () => {
  let config = {
  content: [