yummacss 2.1.0 → 3.0.1

package/LICENSE

@@ -1,21 +1,20 @@
-MIT License
+Copyright (c) 2023-present Yumma CSS maintained by Renildo Pereira.
 
-Copyright (c) Yumma CSS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
 
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS," WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES, OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT, OR OTHERWISE, ARISING FROM,
-OUT OF, OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,31 +1,66 @@
-<div align="center">
-  <a href="https://yummacss.com" target="_blank">
-    <picture>
-      <source media="(prefers-color-scheme: dark)" srcset="https://www.yummacss.com/assets/vectors/dark-logo.svg">
-      <source media="(prefers-color-scheme: light)" srcset="https://www.yummacss.com/assets/vectors/light-logo.svg">
-      <img alt="Yumma CSS" src="https://www.yummacss.com/assets/vectors/light-logo.svg" width="220" style="max-width: 100%;">
-    </picture>
-  </a>
-</div>
+# [@yummacss](https://www.npmjs.com/package/yummacss)
 
-<p align="center">
-  All the tools you need in one package, with abbreviated utility classes — goodbye, massive codebases!
-  <br>
-  <a href="https://yummacss.com"><strong>Read the documentation ↝</strong></a>
-</p>
+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)
 
-### Support
+## Getting started
 
-[Join our Discord server](https://discord.gg/CGw5vyqmQ6). To get support just createa post in the `#help` channel with the <kbd>yummacss</kbd> tag.
+Yumma CSS is a CSS framework packed with a set of abbreviated utility classes for building faster and more maintainable UIs.
 
-### Contributing
+### Installing
 
-I'd love your help with Yumma CSS. I've included some links below which you might find useful.
+A step by step series of examples that tell you how to get a development
+environment running
 
-- [Join us on the `#yummacss` channel on Discord](https://discord.gg/V6s5jg5TfX)
-  
-### Licensing
+Install Yumma CSS
 
-MIT — Copyright (c) 2023–present [Renildo Pereira](https://github.com/yumma-lib/yumma-css/graphs/contributors).
+```
+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://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.
+
+## License
+
+This project is licensed under the [MIT License](LICENSE)

package/dist/cli/commands/build.js

@@ -0,0 +1,43 @@
+import { writeFileSync } from "fs";
+import { messages } from "../lib/cli-lang.js";
+import { cli } from "../lib/cli-ui.js";
+import { loadConfig } from "../services/configLoader.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(messages.build.start);
+    const startTime = Date.now();
+    try {
+        const config = existingConfig || (await loadConfig());
+        const configHash = JSON.stringify(config);
+        const configChanged = cache.configHash !== configHash;
+        let css;
+        if (forceRebuild || configChanged || !cache.css) {
+            buildSpinner.text = messages.build.compiling;
+            const result = await compileSCSS(config);
+            css = result.css;
+            cache = {
+                css: result.css,
+                dependencies: result.dependencies,
+                configHash,
+            };
+        }
+        else {
+            css = cache.css;
+            buildSpinner.text = messages.build.usingCache;
+        }
+        buildSpinner.text = messages.build.purging;
+        const purgedCSS = await purgeCSS(css, config);
+        buildSpinner.text = messages.build.minifying;
+        const finalCSS = minifyCSS(purgedCSS, config);
+        writeFileSync(config.output, finalCSS);
+        buildSpinner.succeed(messages.build.success(Date.now() - startTime, config.output));
+    }
+    catch (error) {
+        buildSpinner.fail(messages.build.fail);
+        cli.error(error instanceof Error ? error.message : messages.common.unknownError);
+        process.exit(1);
+    }
+}

package/dist/cli/commands/init.js

@@ -0,0 +1,19 @@
+import { writeFileSync } from "fs";
+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 init = cli.startSpinner(messages.init.start);
+    try {
+        const configContent = generateConfigFile(DEFAULT_CONFIG_EXTENSION);
+        const configFileName = `yumma.config${DEFAULT_CONFIG_EXTENSION}`;
+        writeFileSync(configFileName, configContent);
+        init.succeed(messages.init.success);
+    }
+    catch (error) {
+        init.fail(messages.init.fail);
+        cli.error(error instanceof Error ? error.message : messages.common.unknownError);
+        process.exit(1);
+    }
+}

package/dist/cli/commands/watch.js

@@ -0,0 +1,48 @@
+import chok from "chokidar";
+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(messages.watch.start);
+    try {
+        currentConfig = await loadConfig();
+        await build(currentConfig, true);
+        const files = await globby(currentConfig.source);
+        const watcher = chok.watch(files, {
+            awaitWriteFinish: {
+                pollInterval: 50,
+                stabilityThreshold: 200,
+            },
+            ignored: /(^|[/\\])\../,
+            ignoreInitial: true,
+            persistent: true,
+        });
+        watcher
+            .on("add", (path) => handleChange(path, "added"))
+            .on("change", (path) => handleChange(path, "changed"))
+            .on("unlink", (path) => handleChange(path, "removed"));
+        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(messages.watch.fail);
+        cli.error(error instanceof Error ? error.message : messages.common.unknownError);
+        process.exit(1);
+    }
+}

package/dist/cli/config/defaultConfig.js

@@ -0,0 +1,9 @@
+const defaultConfig = {
+    source: [""],
+    output: "",
+    buildOptions: {
+        reset: true,
+        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/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 for changes...",
+        fail: "Watch failed.",
+    },
+    common: {
+        unknownError: "Unknown error.",
+    },
+};

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/lib/cli-ui.js

@@ -0,0 +1,14 @@
+import ora from "ora";
+const spinner = ora({
+    spinner: "sand",
+});
+const cli = {
+    success: (msg) => console.log(`✔ ${msg}`),
+    info: (msg) => console.log(`ℹ ${msg}`),
+    error: (msg) => console.log(`✗ ${msg}`),
+    startSpinner: (text) => {
+        const spinner = ora({ spinner: "sand", color: "white" }).start(text);
+        return spinner;
+    },
+};
+export { spinner, cli };

package/dist/cli/services/configLoader.js

@@ -0,0 +1,42 @@
+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 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,
+        buildOptions: {
+            ...defaultConfig.buildOptions,
+            ...userConfig.buildOptions,
+        },
+    };
+}

package/dist/cli/services/minifyService.js

@@ -0,0 +1,16 @@
+import { transform } from "lightningcss";
+export function minifyCSS(css, config) {
+    try {
+        const result = transform({
+            filename: "style.css",
+            code: Buffer.from(css),
+            minify: config.buildOptions.minify,
+            sourceMap: false,
+        });
+        return result.code.toString();
+    }
+    catch (error) {
+        console.error("Minification error:", error);
+        throw error;
+    }
+}

package/dist/cli/services/purgeService.js

@@ -0,0 +1,12 @@
+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),
+        css: [{ raw: css }],
+        defaultExtractor: (content) => {
+            return content.match(/[\w-/\\:]+/g) || [];
+        },
+    });
+    return purgeCSSResult[0].css;
+}

package/dist/cli/services/scssCompiler.js

@@ -0,0 +1,34 @@
+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, "../../..");
+export async function compileSCSS(config) {
+    const scssFile = config.buildOptions.reset
+        ? "yummacss.scss"
+        : "yummacss-core.scss";
+    try {
+        const result = await sass.compileAsync(join(packageRoot, "src", scssFile), {
+            style: "expanded",
+            loadPaths: [join(packageRoot, "src")],
+            importers: [
+                {
+                    findFileUrl(url) {
+                        return new URL(url, `file://${join(packageRoot, "src/")}`);
+                    },
+                },
+            ],
+        });
+        return {
+            css: result.css,
+            dependencies: result.loadedUrls
+                .filter((url) => url.protocol === "file:")
+                .map((url) => fileURLToPath(url)),
+        };
+    }
+    catch (error) {
+        console.error("SCSS compilation error:", error);
+        throw error;
+    }
+}

package/dist/cli/src/cli.js

@@ -0,0 +1,16 @@
+import { Command } from "commander";
+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");
+program.command("init").description("Create config file.").action(init);
+program
+    .command("build")
+    .description("Build styles.")
+    .action(() => build().catch(() => process.exit(1)));
+program
+    .command("watch")
+    .description("Build styles automatically.")
+    .action(() => watch().catch(() => process.exit(1)));
+program.parse(process.argv);

package/dist/cli/utils/cli-ui.js

@@ -0,0 +1,13 @@
+import ora from "ora";
+export const spinner = ora({
+    spinner: "sand",
+});
+export const cli = {
+    success: (msg) => console.log(`✔ ${msg}`),
+    info: (msg) => console.log(`ℹ ${msg}`),
+    error: (msg) => console.log(`✗ ${msg}`),
+    startSpinner: (text) => {
+        const spinner = ora({ spinner: "sand", color: "white" }).start(text);
+        return spinner;
+    },
+};

package/dist/cli/utils/ui.js

@@ -0,0 +1,15 @@
+import ora from "ora";
+import chalk from "chalk";
+export const spinner = ora();
+const { green, yellow, cyan, red } = chalk;
+export const ui = {
+    success: (msg) => console.log(green(`✓ ${msg}`)),
+    warn: (msg) => console.log(yellow(`⚠ ${msg}`)),
+    info: (msg) => console.log(cyan(`ℹ ${msg}`)),
+    error: (msg) => console.log(red(`✗ ${msg}`)),
+    startSpinner: (text) => {
+        spinner.text = text;
+        spinner.start();
+        return spinner;
+    },
+};

package/package.json

@@ -1,24 +1,65 @@
-{
-  "author": "Renildo Pereira",
-  "description": "Quickly build applications with less code in your markup.",
-  "license": "MIT",
-  "name": "yummacss",
-  "version": "2.1.0",
-  "devDependencies": {
-    "gulp-clean-css": "^4.3.0",
-    "gulp-copy": "^4.0.1",
-    "gulp-purgecss": "^6.0.0",
-    "gulp-rename": "^2.0.0",
-    "gulp-sass": "^5.1.0",
-    "gulp": "^4.0.2",
-    "npm-run-all": "^4.1.5",
-    "sass": "^1.62.1"
-  },
-  "scripts": {
-    "build": "npm-run-all --sequential std min core mincore",
-    "core": "gulp coreFile",
-    "min": "gulp minifiedFile",
-    "mincore": "gulp minifiedCoreFile",
-    "std": "gulp standardFile"
-  }
-}
+{
+  "name": "yummacss",
+  "version": "3.0.1",
+  "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": "https://github.com/yumma-lib/yumma-css"
+  },
+  "scripts": {
+    "build:cli": "tsc -p tsconfig.cli.json",
+    "build:css": "gulp build",
+    "build": "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/_fonts.scss

@@ -1,14 +1,16 @@
+@use "abstracts/variables" as vars;
+
 .ff-c {
-  font-family: $yma-font-charter;
-  font-weight: $yma-font-weight;
+  font-family: vars.$yma-font-charter;
+  font-weight: vars.$yma-font-weight;
 }
 
 .ff-m {
-  font-family: $yma-font-mono;
-  font-weight: $yma-font-weight;
+  font-family: vars.$yma-font-mono;
+  font-weight: vars.$yma-font-weight;
 }
 
 .ff-s {
-  font-family: $yma-font-system;
-  font-weight: $yma-font-weight;
+  font-family: vars.$yma-font-system;
+  font-weight: vars.$yma-font-weight;
 }