Expose completions API (#5520)

src/lib/setupContextUtils.js

@@ -624,6 +624,36 @@ function registerPlugins(plugins, context) {
 
     return output.map((value) => ({ raw: value, extension: 'html' }))
   }
+
+  // Generate a list of strings for autocompletion purposes. Colors will have a
+  // tuple with options, e.g.:
+  // ['uppercase', 'lowercase', ['bg-red', { color: 'rgb(255 0 0)' }]]
+  context.completions = function () {
+    // TODO: Try and detect color from components?
+    // TODO: Should we provide a simple "public api" file with functions?
+    let output = []
+
+    for (let util of classList) {
+      if (Array.isArray(util)) {
+        let [utilName, options] = util
+        let isColor = [].concat(options.type).includes('color')
+
+        if (isColor) {
+          for (let [value, color] of Object.entries(options?.values ?? {})) {
+            output.push([formatClass(utilName, value), { color }])
+          }
+        } else {
+          for (let value of Object.keys(options?.values ?? {})) {
+            output.push(formatClass(utilName, value))
+          }
+        }
+      } else {
+        output.push(util)
+      }
+    }
+
+    return output
+  }
 }
 
 export function createContext(

tests/completions.test.js

@@ -0,0 +1,25 @@
+import resolveConfig from '../resolveConfig'
+import { createContext } from '../src/lib/setupContextUtils'
+
+it('should generate completions for every possible class, without variants', () => {
+  let config = {}
+
+  let context = createContext(resolveConfig(config))
+  expect(context.completions()).toBeInstanceOf(Array)
+
+  // Verify we have a `container` for the 'components' section.
+  expect(context.completions()).toContain('container')
+
+  // Verify we handle the DEFAULT case correctly
+  expect(context.completions()).toContain('border')
+
+  // Verify we handle negative values correctly
+  expect(context.completions()).toContain('-inset-1/4')
+
+  // Verify we list extra information for colors (!tuples)
+  let fromBlack = context
+    .completions()
+    .find((value) => Array.isArray(value) && value[0] === 'from-black')
+
+  expect(fromBlack).toMatchObject(['from-black', { color: '#000' }])
+})