yummacss 3.0.0 → 3.0.2

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2022-present Yumma CSS maintained by Renildo Pereira.
+Copyright (c) 2023-present Yumma CSS maintained by Renildo Pereira.
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/README.md

@@ -1,33 +1,66 @@
-<div align="center">
-  <a href="https://yummacss.com" target="_blank" target="_blank" rel="noopener noreferrer">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://www.yummacss.com/trademark/logo-dark.png">
-      <source media="(prefers-color-scheme: light)" srcset="https://www.yummacss.com/trademark/logo-light.png">
-      <img alt="Yumma CSS" src="https://www.yummacss.com/trademark/logo-light.png" width="220" style="max-width: 100%;">
-    </picture>
-  </a>
-</div>
-
-<p align="center">
-  The CSS framework with abbreviated styles for modern design systems — no bloat!
-  <br>
-  <a href="https://yummacss.com"><strong>Read the documentation ↝</strong></a>
-</p>
-
-## Community
-
-Join the Yumma CSS community! Share your experiences and help Yumma CSS grow and be the best it can be.
-
-- Follow [@yummacss on X (Twitter)](https://x.com/yummacss)
-- Subscribe to [@yummacss on YouTube](https://www.youtube.com/@yummacss)
-- Join discussions on [`#yummacss` Discord](https://discord.gg/Zd2y6yVqgK)
+# [@yummacss](https://www.npmjs.com/package/yummacss)
+
+A CSS framework for the web with abbreviated styles.
+
+[![NPM Version](https://img.shields.io/npm/v/yummacss?style=plastic&label=yummacss&labelColor=eaedfc&color=413cb8)](https://www.npmjs.com/package/yummacss)
+[![NPM Downloads](https://img.shields.io/npm/d18m/yummacss?style=plastic&label=downloads&labelColor=eaedfc&color=413cb8)](https://www.npmjs.com/package/yummacss)
+
+## Getting started
+
+Yumma CSS is a CSS framework packed with a set of abbreviated utility classes for building faster and more maintainable UIs.
+
+### Installing
+
+A step by step series of examples that tell you how to get a development
+environment running
+
+Install Yumma CSS
+
+```
+npm i yummacss -D
+```
+
+Initialize configuration
+
+```
+npx yummacss init
+```
+
+Our [framework guides](https://www.yummacss.com/docs/installation#framework-guides) will teach you how to set up your configuration file.
+
+## Development setup
+
+The Yumma CSS CLI provides several commands to help you work with your Yumma CSS files.
+
+> [!IMPORTANT]  
+> Make sure you have a `yumma.config.js` file set up before running these commands. If you haven’t, run `npx yummacss init` first.
+
+### Building styles
+
+The `build` command will compile your Yumma CSS files once.
+
+```bash
+npx yummacss build
+```
+
+### Watching changes
+
+The `watch` command will watch for changes in your Yumma CSS files and recompile them automatically.
+
+```bash
+npx yummacss watch
+```
+
+## Documentation
+
+Head over to [yummacss.com](https://www.yummacss.com) for the full documentation.
 
 ## Built with
 
-- [Gulp](https://gulpjs.com/) — A toolkit to automate & enhance your workflow.
-- [SCSS](https://sass-lang.com/documentation/syntax/) — CSS with superpowers.
-- [Typescript](https://www.typescriptlang.org/) — A superset of JavaScript.
+- [gulp](https://www.npmjs.com/package/gulp) - The streaming build system.
+- [sass](https://www.npmjs.com/package/sass) - CSS with superpowers.
+- [typescript](https://www.npmjs.com/package/typescript) - A language for application-scale JavaScript.
 
-## Licensing
+## License
 
-MIT — Copyright (c) 2022–present
+This project is licensed under the [MIT License](LICENSE)

package/dist/cli/commands/build.js

@@ -1,12 +1,13 @@
 import { writeFileSync } from "fs";
-import { compileSCSS } from "../services/scssCompiler.js";
-import { purgeCSS } from "../services/purgeService.js";
-import { minifyCSS } from "../services/minifyService.js";
+import { messages } from "../lib/cli-lang.js";
+import { cli } from "../lib/cli-ui.js";
 import { loadConfig } from "../services/configLoader.js";
-import { cli } from "../utils/cli-ui.js";
+import { minifyCSS } from "../services/minifyService.js";
+import { purgeCSS } from "../services/purgeService.js";
+import { compileSCSS } from "../services/scssCompiler.js";
 let cache = {};
 export async function build(existingConfig, forceRebuild = false) {
-    const buildSpinner = cli.startSpinner("Starting build process...");
+    const buildSpinner = cli.startSpinner(messages.build.start);
     const startTime = Date.now();
     try {
         const config = existingConfig || (await loadConfig());
@@ -14,7 +15,7 @@ export async function build(existingConfig, forceRebuild = false) {
         const configChanged = cache.configHash !== configHash;
         let css;
         if (forceRebuild || configChanged || !cache.css) {
-            buildSpinner.text = "Compiling SCSS...";
+            buildSpinner.text = messages.build.compiling;
             const result = await compileSCSS(config);
             css = result.css;
             cache = {
@@ -25,20 +26,18 @@ export async function build(existingConfig, forceRebuild = false) {
         }
         else {
             css = cache.css;
-            buildSpinner.text = "Using cached SCSS...";
+            buildSpinner.text = messages.build.usingCache;
         }
-        buildSpinner.text = "Purging unused styles...";
+        buildSpinner.text = messages.build.purging;
         const purgedCSS = await purgeCSS(css, config);
-        buildSpinner.text = "Minifying CSS...";
+        buildSpinner.text = messages.build.minifying;
         const finalCSS = minifyCSS(purgedCSS, config);
         writeFileSync(config.output, finalCSS);
-        buildSpinner.succeed("Build completed successfully!");
-        cli.success(`Styles written to: ${config.output}`);
-        cli.info(`Total time: ${Date.now() - startTime}ms`);
+        buildSpinner.succeed(messages.build.success(Date.now() - startTime, config.output));
     }
     catch (error) {
-        buildSpinner.fail("Build failed!");
-        cli.error(error instanceof Error ? error.message : "Unknown error occurred");
+        buildSpinner.fail(messages.build.fail);
+        cli.error(error instanceof Error ? error.message : messages.common.unknownError);
         process.exit(1);
     }
 }

package/dist/cli/commands/init.js

@@ -1,17 +1,19 @@
 import { writeFileSync } from "fs";
-import { defaultConfig } from "../config/defaultConfig.js";
-import { cli } from "../utils/cli-ui.js";
+import { generateConfigFile } from "../config/templates.js";
+import { messages } from "../lib/cli-lang.js";
+import { cli } from "../lib/cli-ui.js";
+const DEFAULT_CONFIG_EXTENSION = ".js";
 export function init() {
-    const initSpinner = cli.startSpinner("Creating config file...");
+    const init = cli.startSpinner(messages.init.start);
     try {
-        const configContent = `export default ${JSON.stringify(defaultConfig, null, 2)}`;
-        writeFileSync("yumma.config.js", configContent);
-        initSpinner.succeed("Config file created!");
-        cli.success("yumma.config.js successfully created");
+        const configContent = generateConfigFile(DEFAULT_CONFIG_EXTENSION);
+        const configFileName = `yumma.config${DEFAULT_CONFIG_EXTENSION}`;
+        writeFileSync(configFileName, configContent);
+        init.succeed(messages.init.success);
     }
     catch (error) {
-        initSpinner.fail("Failed to create config file!");
-        cli.error(error instanceof Error ? error.message : "Unknown error occurred");
+        init.fail(messages.init.fail);
+        cli.error(error instanceof Error ? error.message : messages.common.unknownError);
         process.exit(1);
     }
 }

package/dist/cli/commands/watch.js

@@ -1,14 +1,16 @@
 import chok from "chokidar";
-import { build } from "./build.js";
-import { loadConfig } from "../services/configLoader.js";
-import { cli } from "../utils/cli-ui.js";
 import { globby } from "globby";
+import { messages } from "../lib/cli-lang.js";
+import { cli } from "../lib/cli-ui.js";
+import { loadConfig } from "../services/configLoader.js";
+import { build } from "./build.js";
 let currentConfig;
+let buildTimeout = null;
+let changedFiles = new Set();
 export async function watch() {
-    const watchSpinner = cli.startSpinner("Initializing watch mode...");
+    const watchSpinner = cli.startSpinner(messages.watch.start);
     try {
         currentConfig = await loadConfig();
-        watchSpinner.start("Watching for changes...");
         await build(currentConfig, true);
         const files = await globby(currentConfig.source);
         const watcher = chok.watch(files, {
@@ -24,13 +26,23 @@ export async function watch() {
             .on("add", (path) => handleChange(path, "added"))
             .on("change", (path) => handleChange(path, "changed"))
             .on("unlink", (path) => handleChange(path, "removed"));
-        async function handleChange(path, event) {
-            await build(currentConfig, true);
+        function handleChange(path, event) {
+            changedFiles.add(path);
+            if (buildTimeout) {
+                clearTimeout(buildTimeout);
+            }
+            buildTimeout = setTimeout(async () => {
+                if (changedFiles.size > 0) {
+                    await build(currentConfig, true);
+                    changedFiles.clear();
+                }
+                buildTimeout = null;
+            }, 500); // 500ms
         }
     }
     catch (error) {
-        watchSpinner.fail("Watch failed!");
-        cli.error(error instanceof Error ? error.message : "Unknown error occurred");
+        watchSpinner.fail(messages.watch.fail);
+        cli.error(error instanceof Error ? error.message : messages.common.unknownError);
         process.exit(1);
     }
 }

package/dist/cli/config/defaultConfig.js

@@ -1,4 +1,4 @@
-export const defaultConfig = {
+const defaultConfig = {
     source: [""],
     output: "",
     buildOptions: {
@@ -6,3 +6,4 @@ export const defaultConfig = {
         minify: false,
     },
 };
+export { defaultConfig };

package/dist/cli/config/templates.js

@@ -0,0 +1,33 @@
+import { readFileSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+import { defaultConfig } from "./defaultConfig.js";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const TEMPLATES_DIR = join(__dirname, "templates");
+const CONFIG_PLACEHOLDER = "{{CONFIG}}";
+const SUPPORTED_TEMPLATES = [
+    { extension: ".js", templateFile: "yumma.config.js.template" },
+];
+function loadTemplate(templateFile) {
+    const templatePath = join(TEMPLATES_DIR, templateFile);
+    return readFileSync(templatePath, "utf-8");
+}
+function generateConfigContent(template, config) {
+    const configString = JSON.stringify(config, null, 2);
+    return template.replace(CONFIG_PLACEHOLDER, configString);
+}
+export function generateConfigFile(extension) {
+    const templateInfo = SUPPORTED_TEMPLATES.find(t => t.extension === extension);
+    if (!templateInfo) {
+        throw new Error(`Unsupported config extension: ${extension}`);
+    }
+    const template = loadTemplate(templateInfo.templateFile);
+    return generateConfigContent(template, defaultConfig);
+}
+export function getSupportedExtensions() {
+    return SUPPORTED_TEMPLATES.map(t => t.extension);
+}
+export function isSupportedExtension(extension) {
+    return SUPPORTED_TEMPLATES.some(t => t.extension === extension);
+}

package/dist/cli/lib/cli-lang.js

@@ -0,0 +1,23 @@
+export const messages = {
+    build: {
+        start: "Building...",
+        compiling: "Compiling...",
+        usingCache: "Using cache...",
+        purging: "Purging...",
+        minifying: "Minifying...",
+        success: (ms, output) => `Build done in ${ms}ms. (${output})`,
+        fail: "Build failed.",
+    },
+    init: {
+        start: "Creating config...",
+        success: "Config created.",
+        fail: "Config failed.",
+    },
+    watch: {
+        start: "Watching...",
+        fail: "Watch failed.",
+    },
+    common: {
+        unknownError: "Unknown error.",
+    },
+};

package/dist/cli/{utils → lib}/cli-ui.js

@@ -1,8 +1,8 @@
 import ora from "ora";
-export const spinner = ora({
+const spinner = ora({
     spinner: "sand",
 });
-export const cli = {
+const cli = {
     success: (msg) => console.log(`✔ ${msg}`),
     info: (msg) => console.log(`ℹ ${msg}`),
     error: (msg) => console.log(`✗ ${msg}`),
@@ -11,3 +11,4 @@ export const cli = {
         return spinner;
     },
 };
+export { spinner, cli };

package/dist/cli/services/configLoader.js

@@ -1,10 +1,36 @@
-import { join } from "path";
+import { join, extname } from "path";
 import { pathToFileURL } from "url";
+import { existsSync } from "fs";
 import { defaultConfig } from "../config/defaultConfig.js";
+import { getSupportedExtensions } from "../config/templates.js";
+const CONFIG_BASE = "yumma.config";
+const SUPPORTED_EXTENSIONS = getSupportedExtensions();
+const EXTENSION_LOADERS = {
+    ".js": async (path) => {
+        const configUrl = pathToFileURL(path).href;
+        return (await import(configUrl)).default;
+    },
+};
+function findConfigFile(cwd) {
+    for (const ext of SUPPORTED_EXTENSIONS) {
+        const file = join(cwd, `${CONFIG_BASE}${ext}`);
+        if (existsSync(file))
+            return file;
+    }
+    return null;
+}
 export async function loadConfig() {
-    const configPath = join(process.cwd(), "yumma.config.js");
-    const configUrl = pathToFileURL(configPath).href;
-    const { default: userConfig } = (await import(configUrl));
+    const cwd = process.cwd();
+    const configPath = findConfigFile(cwd);
+    if (!configPath) {
+        throw new Error(`No config file found. Supported: ${CONFIG_BASE}${SUPPORTED_EXTENSIONS.join(", ")}`);
+    }
+    const ext = extname(configPath);
+    const loader = EXTENSION_LOADERS[ext];
+    if (!loader) {
+        throw new Error(`Unsupported config file extension: ${ext}`);
+    }
+    const userConfig = await loader(configPath);
     return {
         ...defaultConfig,
         ...userConfig,

package/dist/cli/services/purgeService.js

@@ -1,5 +1,5 @@
-import { PurgeCSS } from "purgecss";
 import { globby } from "globby";
+import { PurgeCSS } from "purgecss";
 export async function purgeCSS(css, config) {
     const purgeCSSResult = await new PurgeCSS().purge({
         content: await globby(config.source),

package/dist/cli/services/scssCompiler.js

@@ -1,6 +1,6 @@
-import * as sass from "sass-embedded";
-import { fileURLToPath } from "url";
 import { dirname, join } from "path";
+import { fileURLToPath } from "url";
+import * as sass from "sass-embedded";
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const packageRoot = join(__dirname, "../../..");

package/dist/cli/src/cli.js

@@ -1,19 +1,16 @@
 import { Command } from "commander";
-import { init } from "../commands/init.js";
 import { build } from "../commands/build.js";
+import { init } from "../commands/init.js";
 import { watch } from "../commands/watch.js";
 const program = new Command();
-program.name("yummacss").description("Yumma CSS CLI").version("3.0.0");
-program
-    .command("init")
-    .description("Create a default config file")
-    .action(init);
+program.name("yummacss").description("Yumma CSS CLI");
+program.command("init").description("Create config file.").action(init);
 program
     .command("build")
-    .description("Compile CSS with optional minification")
+    .description("Build styles.")
     .action(() => build().catch(() => process.exit(1)));
 program
     .command("watch")
-    .description("Watch files and rebuild on changes")
+    .description("Build styles automatically.")
     .action(() => watch().catch(() => process.exit(1)));
 program.parse(process.argv);

package/package.json

@@ -1,50 +1,65 @@
-{
-  "author": "Renildo Pereira",
-  "description": "The CSS framework with abbreviated styles.",
-  "license": "MIT",
-  "main": "./dist/cli/index.js",
-  "name": "yummacss",
-  "type": "module",
-  "version": "3.0.0",
-  "bin": {
-    "yummacss": "./dist/cli/src/cli.js",
-    "yumma": "./dist/cli/src/cli.js"
-  },
-  "exports": {
-    ".": "./dist/cli/src/cli.js"
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "gulp build",
-    "build:css": "gulp build",
-    "build:cli": "tsc -p tsconfig.cli.json",
-    "dev": "tsc -p tsconfig.cli.json --watch",
-    "prepublishOnly": "pnpm build:cli"
-  },
-  "keywords": [
-    "utility-first",
-    "framework"
-  ],
-  "dependencies": {
-    "chokidar": "^4.0.3",
-    "commander": "^13.1.0",
-    "globby": "^14.1.0",
-    "lightningcss": "^1.29.3",
-    "ora": "^8.2.0",
-    "purgecss": "^7.0.2",
-    "sass-embedded": "^1.85.1"
-  },
-  "devDependencies": {
-    "@types/node": "^22.13.10",
-    "gulp": "^5.0.0",
-    "gulp-clean-css": "^4.3.0",
-    "gulp-debug": "^5.0.1",
-    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^6.0.0",
-    "sass": "^1.85.1",
-    "typescript": "^5.8.2"
-  }
+{
+  "name": "yummacss",
+  "version": "3.0.2",
+  "description": "A CSS framework for the web with abbreviated styles.",
+  "keywords": [
+    "css-framework",
+    "css",
+    "design-system",
+    "framework",
+    "gulp",
+    "lightningcss",
+    "responsive-design",
+    "responsive",
+    "scss",
+    "yummacss"
+  ],
+  "homepage": "https://yummacss.com",
+  "license": "MIT",
+  "author": "Renildo Pereira",
+  "files": [
+    "dist/cli",
+    "src"
+  ],
+  "main": "./dist/cli/index.js",
+  "type": "module",
+  "exports": {
+    ".": "./dist/cli/src/cli.js"
+  },
+  "bin": {
+    "yummacss": "./dist/cli/src/cli.js",
+    "yumma": "./dist/cli/src/cli.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yumma-lib/yumma-css.git"
+  },
+  "scripts": {
+    "build:cli": "tsc -p tsconfig.cli.json",
+    "build:css": "gulp build",
+    "build": "pnpm build:css && pnpm build:cli",
+    "dev": "tsc -p tsconfig.cli.json --watch",
+    "format:cli": "pnpx prettier --write cli",
+    "prepublishOnly": "pnpm build:cli"
+  },
+  "dependencies": {
+    "chokidar": "^4.0.3",
+    "commander": "^13.1.0",
+    "globby": "^14.1.0",
+    "lightningcss": "^1.29.3",
+    "ora": "^8.2.0",
+    "purgecss": "^7.0.2",
+    "sass-embedded": "^1.85.1"
+  },
+  "devDependencies": {
+    "@ianvs/prettier-plugin-sort-imports": "^4.5.1",
+    "@types/node": "^22.13.10",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-debug": "^5.0.1",
+    "gulp-rename": "^2.0.0",
+    "gulp-sass": "^6.0.0",
+    "gulp": "^5.0.0",
+    "sass": "^1.85.1",
+    "typescript": "^5.8.2"
+  }
 }

package/src/abstracts/_variables.scss

@@ -57,9 +57,10 @@ $yma-outline-width: 1px !default;
 // positioning
 $yma-bottom-left-top-right: 0.25rem !default;
 
-// typography
+// text
 $yma-decoration-thickness: 1px !default;
 
+// font
 $yma-font-size-xs: 0.75rem !default;
 $yma-font-size-sm: 0.875rem !default;
 $yma-font-size-md: 1rem !default;

package/src/reset/_stylecent.scss

@@ -1,9 +1,5 @@
 @use "../abstracts/variables" as vars;
 
-/**
- * Yumma CSS v3.0.0 by Renildo Pereira | https://www.yummacss.com/
- */
-
 /** -- Box sizing --
  * 1. Use a more intuitive box-sizing model to make the design consistent.
  * 2. Remove default margin and padding.