yummacss 3.1.0 → 3.2.0

package/dist/index.js

@@ -0,0 +1 @@
+import{Command as rt}from"commander";import{writeFileSync as V}from"fs";var x={};function k(){return x}function F(t){x=t}function B(t){let o=JSON.stringify(t);return x.configHash!==o}import{existsSync as E}from"fs";import{dirname as S,join as p}from"path";import*as v from"sass-embedded";import{fileURLToPath as N}from"url";function H(){let t=N(import.meta.url),o=S(t);for(;o!==S(o);){let i=p(o,"package.json");if(E(i))return o;o=S(o)}return o}var b=H();async function O(t){let o=t.buildOptions.reset?"index.scss":"core.scss",i=await v.compileAsync(p(b,"src",o),{style:"expanded",loadPaths:[p(b,"src")],importers:[{findFileUrl(e){return new URL(e,`file://${p(b,"src/")}`)}}]});return{css:i.css,dependencies:i.loadedUrls.filter(e=>e.protocol==="file:").map(e=>N(e))}}import{existsSync as _}from"fs";import{join as A}from"path";import{pathToFileURL as Z}from"url";import{z as q}from"zod";import{z as c}from"zod";var a="yumma.config.js",u=c.object({source:c.array(c.string()).default([""]),output:c.string().default(""),buildOptions:c.object({reset:c.boolean().default(!0),minify:c.boolean().default(!1)}).default({reset:!0,minify:!1})});var r={build:{start:"Building...",success:(t,o)=>`Build done in ${t}ms. (${o})`,fail:"Build failed."},init:{fail:"Config failed.",invalid:"Invalid config.",notFound:"Config not found.",success:"Config created."},watch:{start:"Watching...",fail:"Watch failed."},common:{unknownError:"Something went wrong, and we don't know what."}};import f from"ora";var R=t=>f({spinner:"sand",color:"white"}).start(t),D=t=>f().fail(t),L=t=>f().info(t),M=t=>f().succeed(t),W=t=>f().warn(t),s={error:D,info:L,progress:R,success:M,warn:W};async function g(){let t=A(process.cwd(),a),o=Z(t).href;try{let{default:i}=await import(o);return u.parse(i)}catch(i){throw _(a)?i instanceof q.ZodError&&(s.progress(r.init.invalid).fail(r.init.invalid),process.exit(1)):(s.progress(r.init.notFound).warn(r.init.notFound),process.exit(1)),i}}import{transform as G}from"lightningcss";function T(t,o){return G({filename:"style.css",code:Buffer.from(t),minify:o.buildOptions.minify,sourceMap:!1}).code.toString()}import{globby as K}from"globby";import{PurgeCSS as Q}from"purgecss";async function z(t,o){return(await new Q().purge({content:await K(o.source),css:[{raw:t}],defaultExtractor:e=>e.match(/[\w-/\\:]+/g)||[]}))[0].css}async function m(t,o=!1){let i=s.progress(r.build.start),e=Date.now();try{let n=t||await g(),y=k(),I=B(n),w;if(o||I||!y.css){let C=await O(n);w=C.css,F({configHash:JSON.stringify(n),css:C.css,dependencies:C.dependencies})}else w=y.css;let U=await z(w,n),$=T(U,n);V(n.output,$),i.succeed(r.build.success(Date.now()-e,n.output))}catch{i.fail(r.build.fail),process.exit(1)}}import{existsSync as X,readFileSync as Y,writeFileSync as tt}from"fs";function ot(){try{if(X("package.json"))return JSON.parse(Y("package.json","utf-8")).type==="module"?"esm":"cjs"}catch{s.error(r.common.unknownError)}return"cjs"}function it(){let t=u.parse({});return ot()==="esm"?{filename:a,content:`export default ${JSON.stringify(t,null,2)};`}:{filename:a,content:`module.exports = ${JSON.stringify(t,null,2)};`}}function J(){let t=s.progress("Initializing config...");try{let{filename:o,content:i}=it();tt(o,i),t.succeed(r.init.success)}catch{t.fail(r.init.fail),process.exit(1)}}import et from"chokidar";import{globby as nt}from"globby";var d,h=null,j=new Set;async function P(){try{let e=function(n,y){j.add(n),h&&clearTimeout(h),h=setTimeout(async()=>{j.size>0&&(await m(d,!0),j.clear()),h=null},500)};var t=e;d=await g(),await m(d,!0),s.info(r.watch.start);let o=await nt(d.source);et.watch(o,{awaitWriteFinish:{pollInterval:50,stabilityThreshold:200},ignored:/(^|[/\\])\../,ignoreInitial:!0,persistent:!0}).on("add",n=>e(n,"added")).on("change",n=>e(n,"changed")).on("unlink",n=>e(n,"removed"))}catch{s.error(r.watch.fail),process.exit(1)}}var l=new rt;l.name("yummacss").description("Main command");l.command("init").description("Initialize config").action(J);l.command("build").action(()=>m().catch(()=>process.exit(1))).alias("b").description("Build styles once");l.command("watch").action(()=>P().catch(()=>process.exit(1))).alias("w").description("Build styles continuously");l.parse(process.argv);

package/package.json

@@ -1,58 +1,60 @@
-{
-  "name": "yummacss",
-  "version": "3.1.0",
-  "description": "A CSS framework for the web with abbreviated styles.",
-  "keywords": [
-    "css-framework",
-    "css",
-    "design-system",
-    "framework",
-    "lightningcss",
-    "responsive-design",
-    "responsive",
-    "scss",
-    "typescript",
-    "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": "tsc -p tsconfig.cli.json",
-    "dev": "tsc -p tsconfig.cli.json --watch",
-    "format:cli": "pnpx prettier --write cli",
-    "format": "pnpx prettier --write .",
-    "prepublishOnly": "pnpm build"
-  },
-  "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",
-    "typescript": "^5.8.2"
-  }
-}
+{
+  "name": "yummacss",
+  "version": "3.2.0",
+  "description": "A CSS framework for the web with abbreviated styles.",
+  "keywords": [
+    "css-framework",
+    "css",
+    "design-system",
+    "framework",
+    "lightningcss",
+    "responsive-design",
+    "responsive",
+    "scss",
+    "typescript",
+    "yummacss"
+  ],
+  "homepage": "https://yummacss.com",
+  "license": "MIT",
+  "author": "Renildo Pereira",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "bin": {
+    "yummacss": "./dist/index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yumma-lib/yumma-css.git"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "format:cli": "prettier --write cli",
+    "format": "prettier --write .",
+    "prepublishOnly": "pnpm build"
+  },
+  "packageManager": "pnpm@10.14.0",
+  "dependencies": {
+    "chokidar": "^4.0.3",
+    "commander": "^14.0.0",
+    "globby": "^14.1.0",
+    "lightningcss": "^1.30.1",
+    "ora": "^8.2.0",
+    "purgecss": "^7.0.2",
+    "sass-embedded": "^1.90.0",
+    "zod": "^4.0.17"
+  },
+  "devDependencies": {
+    "@types/node": "^24.2.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-organize-imports": "^4.2.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
+  }
+}

package/src/{reset/_stylecent.scss → _base.scss}

@@ -1,4 +1,4 @@
-@use "../abstracts/variables" as vars;
+@use "abstracts/variables" as vars;
 
 /** -- Box sizing --
  * 1. Use a more intuitive box-sizing model to make the design consistent.
@@ -26,7 +26,7 @@
 
 body {
   -webkit-font-smoothing: antialiased; /* 1 */
-  font-family: vars.$yma-font-system; /* 2 */
+  font-family: vars.$ycss-font-system; /* 2 */
   line-height: 1.5; /* 3 */
 }
 
@@ -55,7 +55,7 @@ input,
 optgroup,
 select,
 textarea {
-  background-color: vars.$yma-color-transparent; /* 1 */
+  background-color: vars.$ycss-color-transparent; /* 1 */
   font-family: inherit; /* 2 */
   padding: 0.5rem; /* 3 */
 }
@@ -69,7 +69,7 @@ input:not([class]),
 optgroup:not([class]),
 select:not([class]),
 textarea:not([class]) {
-  border: 1px solid vars.$yma-color-silver; /* 1 */
+  border: 1px solid vars.$ycss-color-silver; /* 1 */
 }
 
 /**
@@ -83,7 +83,7 @@ select,
 summary,
 textarea {
   &:focus {
-    outline: 2px solid vars.$yma-color-transparent;
+    outline: 2px solid vars.$ycss-color-transparent;
   }
 }
 
@@ -213,7 +213,7 @@ th {
  */
 
 hr {
-  border-top: 1px solid vars.$yma-color-silver; /* 2 */
+  border-top: 1px solid vars.$ycss-color-silver; /* 2 */
   height: 0; /* 1 */
   margin: 1em 0; /* 3 */
 }

package/src/_fonts.scss

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

package/src/abstracts/_breakpoints.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 
-$yma-breakpoints: (
+$ycss-breakpoints: (
   "sm": 40rem,
   "md": 48rem,
   "lg": 64rem,
@@ -9,31 +9,31 @@ $yma-breakpoints: (
 );
 
 @mixin sm {
-  @media (min-width: map.get($yma-breakpoints, "sm")) {
+  @media (min-width: map.get($ycss-breakpoints, "sm")) {
     @content;
   }
 }
 
 @mixin md {
-  @media (min-width: map.get($yma-breakpoints, "md")) {
+  @media (min-width: map.get($ycss-breakpoints, "md")) {
     @content;
   }
 }
 
 @mixin lg {
-  @media (min-width: map.get($yma-breakpoints, "lg")) {
+  @media (min-width: map.get($ycss-breakpoints, "lg")) {
     @content;
   }
 }
 
 @mixin xl {
-  @media (min-width: map.get($yma-breakpoints, "xl")) {
+  @media (min-width: map.get($ycss-breakpoints, "xl")) {
     @content;
   }
 }
 
 @mixin xxl {
-  @media (min-width: map.get($yma-breakpoints, "xxl")) {
+  @media (min-width: map.get($ycss-breakpoints, "xxl")) {
     @content;
   }
 }

package/src/abstracts/_theme.scss

@@ -1,21 +1,22 @@
 @use "sass:map";
 @use "variables" as vars;
 
-$yma-theme: (
-  "red": vars.$yma-color-red,
-  "orange": vars.$yma-color-orange,
-  "yellow": vars.$yma-color-yellow,
-  "green": vars.$yma-color-green,
-  "teal": vars.$yma-color-teal,
-  "cyan": vars.$yma-color-cyan,
-  "blue": vars.$yma-color-blue,
-  "indigo": vars.$yma-color-indigo,
-  "violet": vars.$yma-color-violet,
-  "pink": vars.$yma-color-pink,
-  "silver": vars.$yma-color-silver,
-  "gray": vars.$yma-color-gray,
-  "lead": vars.$yma-color-lead,
-  "black": vars.$yma-color-black,
-  "white": vars.$yma-color-white,
-  "transparent": vars.$yma-color-transparent,
+$ycss-theme: (
+  "red": vars.$ycss-color-red,
+  "orange": vars.$ycss-color-orange,
+  "yellow": vars.$ycss-color-yellow,
+  "green": vars.$ycss-color-green,
+  "teal": vars.$ycss-color-teal,
+  "cyan": vars.$ycss-color-cyan,
+  "blue": vars.$ycss-color-blue,
+  "indigo": vars.$ycss-color-indigo,
+  "violet": vars.$ycss-color-violet,
+  "pink": vars.$ycss-color-pink,
+  "slate": vars.$ycss-color-slate,
+  "gray": vars.$ycss-color-gray,
+  "silver": vars.$ycss-color-silver,
+  "black": vars.$ycss-color-black,
+  "white": vars.$ycss-color-white,
+  "current": vars.$ycss-color-current,
+  "transparent": vars.$ycss-color-transparent,
 );

package/src/abstracts/_variables.scss

@@ -1,83 +1,84 @@
-// color
-$yma-color-red: #d73d3d !default;
-$yma-color-orange: #e06814 !default;
-$yma-color-yellow: #d3a107 !default;
-$yma-color-green: #1fb155 !default;
-$yma-color-teal: #12a695 !default;
-$yma-color-cyan: #05a4bf !default;
-$yma-color-blue: #3575dd !default;
-$yma-color-indigo: #595cd9 !default;
-$yma-color-violet: #7d53dd !default;
-$yma-color-pink: #d4418a !default;
-$yma-color-lead: #3f3f4e !default;
-$yma-color-gray: #606773 !default;
-$yma-color-silver: #bfc2c7 !default;
-$yma-color-black: black !default;
-$yma-color-white: white !default;
-$yma-color-transparent: transparent !default;
+// borders
+$ycss-border: 1px !default;
+$ycss-border-radius: 0.25rem !default;
+$ycss-border-spacing: 0.25rem !default;
 
-// border
-$yma-border: 1px !default;
-$yma-border-radius: 0.25rem !default;
-$yma-border-spacing: 0.25rem !default;
+// outlines
+$ycss-outline-offset: 1px !default;
+$ycss-outline-width: 1px !default;
 
-// box model
-$yma-dimension: 0.25rem !default;
-$yma-height: 0.25rem !default;
-$yma-width: 0.25rem !default;
-$yma-padding: 0.25rem !default;
-$yma-margin: 0.25rem !default;
-$yma-spacing: 0.25rem !default;
+// colors
+$ycss-color-red: #d73d3d !default;
+$ycss-color-orange: #e06814 !default;
+$ycss-color-yellow: #d3a107 !default;
+$ycss-color-green: #1fb155 !default;
+$ycss-color-teal: #12a695 !default;
+$ycss-color-cyan: #05a4bf !default;
+$ycss-color-blue: #3575dd !default;
+$ycss-color-indigo: #595cd9 !default;
+$ycss-color-violet: #7d53dd !default;
+$ycss-color-pink: #d4418a !default;
+$ycss-color-slate: #3f3f4e !default;
+$ycss-color-gray: #606773 !default;
+$ycss-color-silver: #bfc2c7 !default;
+$ycss-color-black: black !default;
+$ycss-color-white: white !default;
+$ycss-color-current: currentColor !default;
+$ycss-color-transparent: transparent !default;
 
-// effect
-$yma-backdrop-blur: 4px !default;
+// box model
+$ycss-dimension: 0.25rem !default;
+$ycss-height: 0.25rem !default;
+$ycss-width: 0.25rem !default;
+$ycss-padding: 0.25rem !default;
+$ycss-margin: 0.25rem !default;
+$ycss-spacing: 0.25rem !default;
 
-$yma-blur: 4px !default;
+// flexbox
+$ycss-flex-basis: 0.25rem !default;
 
-$yma-box-shadow-lg: 1px 3px 5px 1px #0000001a !default;
-$yma-box-shadow-md: 1px 3px 5px -1px #0000001a !default;
-$yma-box-shadow-sm: 1px 3px 5px -2px #0000001a !default;
-$yma-box-shadow-xl: 1px 3px 5px 2px #0000001a !default;
-$yma-box-shadow-xs: 1px 3px 5px -3px #0000001a !default;
+// grid
+$ycss-gap: 0.25rem !default;
+$ycss-column-gap: 0.25rem !default;
+$ycss-row-gap: 0.25rem !default;
 
-$yma-grayscale: 10% !default;
+// effect
+$ycss-backdrop-blur: 4px !default;
 
-// flexbox
-$yma-flex-basis: 0.25rem !default;
+$ycss-blur: 4px !default;
 
-// grid
-$yma-gap: 0.25rem !default;
-$yma-column-gap: 0.25rem !default;
-$yma-row-gap: 0.25rem !default;
+$ycss-box-shadow-lg: 1px 3px 5px 1px #0000001a !default;
+$ycss-box-shadow-md: 1px 3px 5px -1px #0000001a !default;
+$ycss-box-shadow-sm: 1px 3px 5px -2px #0000001a !default;
+$ycss-box-shadow-xl: 1px 3px 5px 2px #0000001a !default;
+$ycss-box-shadow-xs: 1px 3px 5px -3px #0000001a !default;
 
-// outline
-$yma-outline-offset: 1px !default;
-$yma-outline-width: 1px !default;
+$ycss-grayscale: 10% !default;
 
 // positioning
-$yma-bottom-left-top-right: 0.25rem !default;
-
-// text
-$yma-decoration-thickness: 1px !default;
+$ycss-bottom-left-top-right: 0.25rem !default;
 
 // font
-$yma-font-size-xs: 0.75rem !default;
-$yma-font-size-sm: 0.875rem !default;
-$yma-font-size-md: 1rem !default;
-$yma-font-size-lg: 1.125rem !default;
-$yma-font-size-xl: 1.25rem !default;
-$yma-font-size-2xl: 1.5rem !default;
-$yma-font-size-3xl: 1.875rem !default;
-$yma-font-size-4xl: 2.25rem !default;
-$yma-font-size-5xl: 3rem !default;
-$yma-font-size-6xl: 3.75rem !default;
-$yma-font-size-7xl: 4.5rem !default;
-$yma-font-size-8xl: 6rem !default;
-$yma-font-size-9xl: 8rem !default;
+$ycss-font-charter:
+  Charter, "Bitstream Charter", "Sitka Text", Cambria, serif !default;
+$ycss-font-mono: "Nimbus Mono PS", "Courier New", monospace !default;
+$ycss-font-system: system-ui, sans-serif !default;
 
-$yma-font-weight: 500 !default;
+$ycss-font-size-xs: 0.75rem !default;
+$ycss-font-size-sm: 0.875rem !default;
+$ycss-font-size-md: 1rem !default;
+$ycss-font-size-lg: 1.125rem !default;
+$ycss-font-size-xl: 1.25rem !default;
+$ycss-font-size-2xl: 1.5rem !default;
+$ycss-font-size-3xl: 1.875rem !default;
+$ycss-font-size-4xl: 2.25rem !default;
+$ycss-font-size-5xl: 3rem !default;
+$ycss-font-size-6xl: 3.75rem !default;
+$ycss-font-size-7xl: 4.5rem !default;
+$ycss-font-size-8xl: 6rem !default;
+$ycss-font-size-9xl: 8rem !default;
 
-$yma-font-charter:
-  Charter, "Bitstream Charter", "Sitka Text", Cambria, serif !default;
-$yma-font-mono: "Nimbus Mono PS", "Courier New", monospace !default;
-$yma-font-system: system-ui, sans-serif !default;
+$ycss-font-weight: 500 !default;
+
+// text
+$ycss-decoration-thickness: 1px !default;

package/src/abstracts/functions/_ignore-neutral.scss

@@ -1,7 +1,8 @@
 @use "../theme" as *;
 @use "sass:map";
 
-@function ignore-neutral($v, $yma-theme) {
-  @return $v != map.get($yma-theme, "black") and $v !=
-    map.get($yma-theme, "white") and $v != map.get($yma-theme, "transparent");
+@function ignore-neutral($v, $ycss-theme) {
+  @return $v != map.get($ycss-theme, "black") and $v !=
+    map.get($ycss-theme, "white") and $v != map.get($ycss-theme, "transparent")
+    and $v != map.get($ycss-theme, "current");
 }

package/src/abstracts/mixins/_create-colors.scss

@@ -1,7 +1,6 @@
 @use "sass:color";
 
 @mixin color-scaling($property, $prefix, $k, $v) {
-
   // base styles
   .#{$prefix}-#{$k} {
     #{$property}: $v;
@@ -32,7 +31,6 @@
 @mixin shade-scaling($property, $prefix, $k, $v, $percentage) {
   @for $i from 1 through 13 {
     @if $i <=6 {
-
       // base styles
       .#{$prefix}-#{$k}-#{$i} {
         #{$property}: color.mix(white, $v, (7 - $i) * $percentage);
@@ -59,7 +57,6 @@
         }
       }
     } @else if $i >7 {
-
       // base styles
       .#{$prefix}-#{$k}-#{$i - 1} {
         #{$property}: color.mix(black, $v, ($i - 7) * $percentage);

package/src/abstracts/mixins/_create-utilities.scss

@@ -39,7 +39,7 @@
   }
 
   // responsive styles
-  @each $bp, $bp-value in bp.$yma-breakpoints {
+  @each $bp, $bp-value in bp.$ycss-breakpoints {
     @media (min-width: $bp-value) {
       @each $k, $v in map.get($map, "values") {
         .#{$bp}\:#{$prefix}-#{$k} {

package/src/{yummacss.scss → index.scss}

@@ -1,4 +1,4 @@
-@use "reset/stylecent";
+@use "base";
 @use "abstracts" as *;
 @use "utilities" as *;
 @use "fonts";

package/src/utilities/_background.scss

@@ -3,7 +3,7 @@
 @use "../abstracts/variables" as vars;
 @use "../abstracts/mixins/" as mix;
 
-$yma-background-utils: (
+$ycss-background-utils: (
   "background-attachment": (
     "prefix": "ba",
     "properties": (
@@ -87,7 +87,7 @@ $yma-background-utils: (
   ),
 );
 
-@each $properties, $map in $yma-background-utils {
+@each $properties, $map in $ycss-background-utils {
   $prefix: map.get($map, "prefix");
   $properties: map.get($map, "properties");