diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js index 200487a30..cba36026f 100644 --- a/src/lib/setupContextUtils.js +++ b/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( diff --git a/tests/completions.test.js b/tests/completions.test.js new file mode 100644 index 000000000..b854f7b57 --- /dev/null +++ b/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' }]) +})