feat: Add logging

.changeset/rare-llamas-marry.md

@@ -0,0 +1,5 @@
+---
+"css-var-extract": minor
+---
+
+feat: Add logging

README.md

@@ -214,10 +214,22 @@ If you are using a plugin, it also supports inline configuration.
   ],
   "fileFooter": [
     "/* prettier-ignore-end */"
-  ]
+  ],
+  "disableLogging": false,
+  "emoji": true
 }
 ```
 
+| Option         | Description                                                           |
+|----------------|-----------------------------------------------------------------------|
+| files          | CSS files that collects css variables. Set relative or absolute path. |
+| output         | Path to generate the Typescript file. Set relative or absolute path.  |
+| fileHeader     | Header of the generated file.                                         |
+| fileFooter     | Footer of the generated file.                                         |
+| disableLogging | Disable logging on generation.                                        |
+| emoji          | Use emojis in logs.                                                   |
+
+
 ## 👏 Acknowledgments
 
 This project was inspired by and references implementation patterns from the [TanStack Router](https://tanstack.com/router) package.

packages/css-var-extract/src/config.ts

@@ -18,6 +18,8 @@ export const configSchema = z.object({
         .array(z.string())
         .optional()
         .default(["/* prettier-ignore-end */"]),
+    disableLogging: z.boolean().optional().default(false),
+    emoji: z.boolean().optional().default(true),
 });
 
 export type Config = z.infer<typeof configSchema>;

packages/css-var-extract/src/generator.ts

@@ -2,13 +2,37 @@ import fs from "node:fs/promises";
 import type { Config } from "./config";
 import { extractCssVars } from "./extractCssVars";
 import { generateCode } from "./generateCode";
+import { logging } from "./utils";
+
+let isFirst = true;
 
 export const generator = async (config: Config) => {
+    const logger = logging({
+        disabled: config.disableLogging,
+        emoji: config.emoji,
+    });
+
+    if (isFirst) {
+        logger.log("Generating css var files...");
+        isFirst = false;
+    } else {
+        logger.log("Regenerating css var files...");
+    }
+
     const cssVars = await Promise.all(
         config.files
             .map((file) => fs.readFile(file, "utf-8"))
             .map((content) => content.then(extractCssVars)),
     );
+
+    if (cssVars.length) {
+        logger.info(`Found css vars: ${cssVars.length}`);
+    } else if (config.files.length) {
+        logger.warn("Not found css vars.");
+    } else {
+        logger.warn("Files options is empty.");
+    }
+
     const code = generateCode(Object.assign({}, ...cssVars));
     await fs.writeFile(
         config.output,

packages/css-var-extract/src/utils.ts

@@ -0,0 +1,17 @@
+export const logging = (config: { disabled: boolean; emoji: boolean }) => {
+    const icon = config.emoji ? "🍄" : "*";
+    return {
+        log: (message: string) => {
+            if (!config.disabled) console.log(`${icon}  ${message}`);
+        },
+        info: (message: string) => {
+            if (!config.disabled) console.info(`${icon}  ${message}`);
+        },
+        warn: (message: string) => {
+            if (!config.disabled) console.warn(`${icon}  ${message}`);
+        },
+        error: (message: string) => {
+            if (!config.disabled) console.error(`${icon}  ${message}`);
+        },
+    };
+};