handle unknown typehints

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.

Author: RobinMalfait

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

@@ -16,6 +16,31 @@ test('arbitrary values', () => {
   })
 })
 
+it('should not generate any css if an unknown typehint is used', () => {
+  let config = {
+    content: [
+      {
+        raw: html`<div class="inset-[hmm:12px]"></div>`,
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css``)
+  })
+})
+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: [