diff --git a/.changeset/rare-llamas-marry.md b/.changeset/rare-llamas-marry.md new file mode 100644 index 0000000..a57a3e3 --- /dev/null +++ b/.changeset/rare-llamas-marry.md @@ -0,0 +1,5 @@ +--- +"css-var-extract": minor +--- + +feat: Add logging diff --git a/README.md b/README.md index 0d6b5fe..021da9b 100644 --- a/README.md +++ b/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. diff --git a/packages/css-var-extract/src/config.ts b/packages/css-var-extract/src/config.ts index 5277209..da8003c 100644 --- a/packages/css-var-extract/src/config.ts +++ b/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; diff --git a/packages/css-var-extract/src/generator.ts b/packages/css-var-extract/src/generator.ts index 64577d1..50fb877 100644 --- a/packages/css-var-extract/src/generator.ts +++ b/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, diff --git a/packages/css-var-extract/src/utils.ts b/packages/css-var-extract/src/utils.ts new file mode 100644 index 0000000..122c620 --- /dev/null +++ b/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}`); + }, + }; +};