feat: autocompletion for jsx, style and styled

Author: sastan

src/language-service.ts

@@ -68,7 +68,7 @@ const prepareText = (value: string): string =>
     .replace(/\d(?!$|\d)/g, '$& ')
     .replace(/\s+/g, ' ')
 
-export class TwindTemplateLanguageService implements TemplateLanguageService {
+export class TwindLanguageService implements TemplateLanguageService {
   private readonly typescript: typeof ts
   private readonly configurationManager: ConfigurationManager
   private readonly logger: Logger
@@ -234,11 +234,11 @@ export class TwindTemplateLanguageService implements TemplateLanguageService {
           switch (info.id) {
             case 'UNKNOWN_DIRECTIVE': {
               return {
-                messageText: `Unknown utility "${rule.name}"`,
+                messageText: `Unknown utility "${info.rule}"`,
                 start: rule.loc.start,
                 length: rule.loc.end - rule.loc.start,
                 file: context.node.getSourceFile(),
-                category: this.typescript.DiagnosticCategory.Warning,
+                category: this.typescript.DiagnosticCategory.Error,
                 code: ErrorCodes.UNKNOWN_DIRECTIVE,
               }
             }
@@ -251,17 +251,36 @@ export class TwindTemplateLanguageService implements TemplateLanguageService {
                   start: rule.loc.start,
                   length: rule.loc.end - rule.loc.start,
                   file: context.node.getSourceFile(),
-                  category: this.typescript.DiagnosticCategory.Warning,
+                  category: this.typescript.DiagnosticCategory.Error,
                   code: ErrorCodes.UNKNOWN_THEME_VALUE,
                 }
               }
             }
           }
         })
+        // Check non-empty directive
+        .concat(
+          rule.name
+            ? undefined
+            : {
+                messageText: `Missing utility class`,
+                start: rule.loc.start,
+                length: rule.loc.end - rule.loc.start,
+                file: context.node.getSourceFile(),
+                category: this.typescript.DiagnosticCategory.Error,
+                code: ErrorCodes.UNKNOWN_DIRECTIVE,
+              },
+        )
         // check if every rule.variants exist
         .concat(
           rule.variants
-            .filter((variant) => !this._twind.completions.variants.has(variant.value))
+            .filter(
+              (variant) =>
+                !(
+                  this._twind.completions.variants.has(variant.value) ||
+                  (variant.value[0] == '[' && variant.value[variant.value.length - 2] == ']')
+                ),
+            )
             .map(
               (variant): ts.Diagnostic => ({
                 messageText: `Unknown variant "${variant.value}"`,
@@ -390,13 +409,8 @@ export class TwindTemplateLanguageService implements TemplateLanguageService {
         keys: [(completion) => prepareText(completion.value + ' ' + completion.detail)],
         baseSort,
       }),
-      ...matchSorter(utilities, needle, {
-        // threshold: matchSorter.rankings.ACRONYM,
-        keys: [(completion) => prepareText(completion.value)],
-        baseSort,
-      }),
-      ...matchSorter(variants, needle, {
-        // threshold: matchSorter.rankings.ACRONYM,
+      ...matchSorter([...utilities, ...variants], needle, {
+        // threshold: matchSorter.rankings.MATCHES,
         keys: [(completion) => prepareText(completion.value)],
         baseSort,
       }),

src/load-twind-config.ts renamed to src/load.ts

@@ -31,10 +31,10 @@ export const findConfig = (cwd = process.cwd()): string | undefined =>
   findUp.sync(TWIND_CONFIG_FILES, { cwd }) ||
   findUp.sync(TAILWIND_CONFIG_FILES, { cwd })
 
-export const loadConfig = (configFile: string, cwd = process.cwd()): Configuration => {
+export const loadFile = <T>(file: string, cwd = process.cwd()): T => {
   const result = buildSync({
     bundle: true,
-    entryPoints: [configFile],
+    entryPoints: [file],
     format: 'cjs',
     platform: 'node',
     target: 'es2018', // `node${process.versions.node}`,
@@ -60,13 +60,19 @@ export const loadConfig = (configFile: string, cwd = process.cwd()): Configurati
     result.outputFiles[0].text,
   )(
     module.exports,
-    Module.createRequire?.(configFile) || Module.createRequireFromPath(configFile),
+    Module.createRequire?.(file) || Module.createRequireFromPath(file),
     module,
-    configFile,
-    Path.dirname(configFile),
+    file,
+    Path.dirname(file),
   )
 
-  const config = module.exports.default || module.exports || {}
+  return module.exports as T
+}
+
+export const loadConfig = (configFile: string, cwd = process.cwd()): Configuration => {
+  const exports = loadFile<{ default: Configuration } & Configuration>(configFile, cwd)
+
+  const config = exports.default || exports || {}
 
   // could be tailwind config
   if (

src/match.ts

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type Predicate =
+  | ((this: undefined, value: any, key: undefined, object: any, matcher: undefined) => unknown)
+  | (<T extends Predicates>(this: T, value: any, key: string, object: any, matcher: T) => unknown)
+
+export interface RegExpLike {
+  /**
+   * Returns a Boolean value that indicates whether or not a pattern exists in a searched string.
+   * @param string String on which to perform the search.
+   */
+  test(string: string): boolean
+}
+
+export type Matcher = Predicate | Predicates | RegExp | unknown
+
+/**
+ * Defines the predicate properties to be invoked with the corresponding property values of a given object.
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface Predicates extends Record<string | number | symbol, Matcher | Matcher[]> {
+  // Support cyclic references
+}
+
+export function match(
+  value: unknown,
+  predicate: Matcher,
+  key?: string | undefined,
+  object?: unknown,
+  matcher?: Matcher | Matcher[],
+): boolean {
+  if (isEqual(value, predicate)) {
+    return true
+  }
+
+  if (Array.isArray(predicate)) {
+    return predicate.some((item) => match(value, item, key, object, matcher))
+  }
+
+  if (typeof predicate == 'function') {
+    return Boolean(predicate.call(matcher, value, key, object, matcher))
+  }
+
+  if (typeof value == 'string' && isRegExpLike(predicate)) {
+    return predicate.test(value)
+  }
+
+  if (isObjectLike(value) && isObjectLike(predicate)) {
+    return Object.keys(predicate).every((key) =>
+      match((value as any)[key], (predicate as any)[key], key, value, predicate),
+    )
+  }
+
+  return false
+}
+
+/**
+ * Performs a [SameValueZero](https://ecma-international.org/ecma-262/7.0/#sec-samevaluezero) comparison
+ * between two values to determine if they are equivalent.
+ *
+ * **Note** SameValueZero differs from SameValue only in its treatment of `+0` and `-0`.
+ * For SameValue comparison use `Object.is()`.
+ */
+function isEqual(value: unknown, other: unknown): boolean {
+  return value === other || (Number.isNaN(value) && Number.isNaN(other))
+}
+
+/**
+ * Return `true` if `value` is an object-like.
+ *
+ * A value is object-like if it's not `null` and has a `typeof` result of `"object"`.
+ *
+ * **Note** Keep in mind that functions are objects too.
+ *
+ * @param value to check
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+function isObjectLike(value: unknown): value is object {
+  return value != null && typeof value == 'object'
+}
+
+function isRegExpLike(value: unknown): value is RegExpLike {
+  return isObjectLike(value) && typeof (value as RegExp).test == 'function'
+}

src/parser.test.ts

@@ -14,6 +14,38 @@ const test = suite('Parser')
 ;([
   ['', []],
   ['   \t \n\r ', []],
+  [
+    'focus:',
+    [
+      {
+        raw: '',
+        value: 'focus:',
+        name: '',
+        prefix: '',
+        important: false,
+        negated: false,
+        loc: { start: 6, end: 6 },
+        spans: [{ start: 0, end: 6 }],
+        variants: [{ name: 'focus', raw: 'focus:', value: 'focus:', loc: { start: 0, end: 6 } }],
+      },
+    ],
+  ],
+  [
+    'focus: ',
+    [
+      {
+        raw: '',
+        value: 'focus:',
+        name: '',
+        prefix: '',
+        important: false,
+        negated: false,
+        loc: { start: 6, end: 6 },
+        spans: [{ start: 0, end: 6 }],
+        variants: [{ name: 'focus', raw: 'focus:', value: 'focus:', loc: { start: 0, end: 6 } }],
+      },
+    ],
+  ],
   [
     'underline',
     [

src/parser.ts

@@ -330,7 +330,7 @@ export function astish(text: string, atPosition = Infinity): Group {
       case '\t':
       case '\n':
       case '\r':
-        if (buffer) {
+        if (buffer || node.kind == NodeKind.Variant) {
           parent = node = node.next = createIdentifier(
             node,
             parent,
@@ -358,7 +358,7 @@ export function astish(text: string, atPosition = Infinity): Group {
   }
 
   // Consume remaining buffer or completion triggered at the end
-  if (buffer || atPosition === text.length) {
+  if (buffer || node.kind == NodeKind.Variant || atPosition === text.length) {
     node.next = createIdentifier(node, parent, buffer, start, true)
   }