fix: use and emit custom classes

muhammadsammy · Feb 20, 2021 · 7fd741c · 7fd741c
1 parent 55495b5
commit 7fd741c
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 14 deletions.
diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts
@@ -81,14 +81,14 @@ export class FileContentGenerator {
     return (
       'export type TTailwindString = "TAILWIND_STRING"\n' +
       '\n' +
-      'export type TKey = TClasses | TTailwindString\n' +
+      'export type TKey = TClasses | TTailwindStringIMPORTED_T_CUSTOM_CLASSES_KEY\n' +
       '\n' +
       'export type TArg =\n' +
       '| TClasses\n' +
       '| null\n' +
       '| undefined\n' +
       '| {[key in TKey]?: boolean}\n' +
-      '| TTailwindString\n' +
+      '| TTailwindString\nIMPORTED_T_CUSTOM_CLASSES_ARG' +
       '\n' +
       'export type TTailwind = (...args: TArg[]) => TTailwindString\n' +
       '\n' +

diff --git a/src/cli/core/GeneratedFileWriter.ts b/src/cli/core/GeneratedFileWriter.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
 
 import {promises as fs} from 'fs';
+import path from 'path';
 import colors from 'colors';
 import {ClassnamesGenerator} from './ClassnamesGenerator';
 import {TTailwindCSSConfig} from '../types/config';
@@ -38,7 +39,7 @@ export class GeneratedFileWriter {
   public write = async (): Promise<void> => {
     // Check CLI inputs
     try {
-      this.validateCliOptions();
+      await this.validateCliOptions();
     } catch (error) {
       return;
     }
@@ -86,24 +87,48 @@ export class GeneratedFileWriter {
     const contentGenerator = new FileContentGenerator(generatedClassnames, scanner.getPrefix());
     const fileContentTemplate = contentGenerator.generateFileContent();
 
+    // Resolve the custom classes import path relative to the output file
+    let customClassesImportPath: string | null = null;
+    if (!!this._outputFilename && !!this._customClassesFilename) {
+      customClassesImportPath = path
+        .join(
+          path.relative(
+            path.join(process.cwd(), path.dirname(this._outputFilename)),
+            path.join(process.cwd(), path.dirname(this._customClassesFilename)),
+          ),
+          path.basename(this._customClassesFilename),
+        )
+        // Convert any Windows path separators to posix
+        .replace(/\\/g, '/')
+        .replace(/(\.d)?\.ts$/, '');
+      customClassesImportPath =
+        customClassesImportPath[0] === '.'
+          ? customClassesImportPath
+          : `./${customClassesImportPath}`;
+    }
+
     // Return final file content
     return (
       fileContentTemplate
         // Append the custom classes types from external file if provided.
         .replace(
           /T_CUSTOM_CLASSES_IMPORT_STATEMENT/g,
-          !!this._customClassesFilename
-            ? `import TCustomClassesFromExternalFile from './${this._customClassesFilename}';`
+          !!customClassesImportPath
+            ? `import type TCustomClassesFromExternalFile from '${customClassesImportPath}';`
             : '',
         )
         .replace(
-          /IMPORTED_T_CUSTOM_CLASSES/g,
-          !!this._customClassesFilename ? '\n  | TCustomClassesFromExternalFile' : '',
+          / ?IMPORTED_T_CUSTOM_CLASSES_KEY/g,
+          !!customClassesImportPath ? ' | TCustomClassesFromExternalFile' : '',
+        )
+        .replace(
+          / ?IMPORTED_T_CUSTOM_CLASSES_ARG/g,
+          !!customClassesImportPath ? '| TCustomClassesFromExternalFile\n' : '',
         )
     );
   };
 
-  private validateCliOptions = (): void => {
+  private validateCliOptions = (): Promise<void> => {
     // Check for missing cli options
 
     if (!this._configFilename) {
@@ -117,7 +142,8 @@ export class GeneratedFileWriter {
 
     // Check for invalid custom classes file content
     if (!!this._customClassesFilename) {
-      fs.readFile(`./${this._customClassesFilename}`)
+      return fs
+        .readFile(`./${this._customClassesFilename}`)
         .then(data => {
           if (!data.toString().includes('export default')) {
             this.printCliMessage(
@@ -128,10 +154,11 @@ export class GeneratedFileWriter {
         })
         .catch(error => {
           this.printCliMessage('error', `Unable to read the file with custom types. ${error}`);
+          throw new Error();
         });
-
-      throw new Error();
     }
+
+    return Promise.resolve();
   };
 
   private printCliMessage = (type: 'error' | 'success', message: string): void => {

diff --git a/src/cli/index.ts b/src/cli/index.ts
@@ -24,12 +24,12 @@ commander
   .option('-x, --extra <extra>', 'Name or relative path of the file with the custom extra types')
 
   // Define the action of the CLI
-  .action(({input, output, classesFile: extra}: {[key: string]: string | void}) => {
+  .action(({input, output, extra}: {[key: string]: string | void}) => {
     const isConfigFileFound: boolean = fs.existsSync('./tailwind.config.js');
     // If the config file is found or provided explicitly by the user...
     if (isConfigFileFound || !!input) {
       // Generate the types and write them to a file on disk
-      void new GeneratedFileWriter({
+      return new GeneratedFileWriter({
         configFilename: isConfigFileFound ? 'tailwind.config.js' : input,
         outputFilename: output,
         customClassesFilename: extra,
@@ -61,7 +61,7 @@ commander
         ])
         .then((answers: TInquirerAnswers) => {
           // Get the answers and use them to create the file with generated types
-          void new GeneratedFileWriter({
+          return new GeneratedFileWriter({
             configFilename: answers.configFilename,
             outputFilename: answers.outputFilename,
             customClassesFilename: answers.customClassesFilename,