@salty-css/core 0.0.1-alpha.3 → 0.0.1-alpha.31

package/README.md

@@ -5,7 +5,7 @@
 ### Initial requirements
 
 1. Add `saltyPlugin` to vite or webpack config from `@salty-css/vite` or `@salty-css/webpack`
-2. Create `salty-config.ts` to the root of your project
+2. Create `salty.config.ts` to the root of your project
 3. Import global styles to any regular .css file from `saltygen/index.css` (does not exist during first run, cli command coming later)
 4. Create salty components with styled only inside files that end with `.css.ts`, `.salty.ts` `.styled.ts` or `.styles.ts`
 
@@ -54,8 +54,10 @@ export const IndexPage = () => {
 import { styled } from '@salty-css/react/styled';
 
 export const Wrapper = styled('div', {
-  display: 'block',
-  padding: '2vw',
+  base: {
+    display: 'block',
+    padding: '2vw',
+  },
 });
 ```
 
@@ -65,22 +67,24 @@ export const Wrapper = styled('div', {
 import { styled } from '@salty-css/react/styled';
 
 export const Button = styled('button', {
-  display: 'block',
-  padding: `0.6em 1.2em`,
-  border: '1px solid currentColor',
-  background: 'transparent',
-  color: 'currentColor/40',
-  cursor: 'pointer',
-  transition: '200ms',
-  textDecoration: 'none',
-  '&:hover': {
-    background: 'black',
-    borderColor: 'black',
-    color: 'white',
-  },
-  '&:disabled': {
-    opacity: 0.25,
-    pointerEvents: 'none',
+  base: {
+    display: 'block',
+    padding: `0.6em 1.2em`,
+    border: '1px solid currentColor',
+    background: 'transparent',
+    color: 'currentColor/40',
+    cursor: 'pointer',
+    transition: '200ms',
+    textDecoration: 'none',
+    '&:hover': {
+      background: 'black',
+      borderColor: 'black',
+      color: 'white',
+    },
+    '&:disabled': {
+      opacity: 0.25,
+      pointerEvents: 'none',
+    },
   },
   variants: {
     variant: {

package/bin/bin-util.d.ts

@@ -0,0 +1,2 @@
+export declare const execAsync: (command: string) => Promise<void>;
+export declare const npmInstall: (...packages: string[]) => Promise<void>;

package/bin/index.cjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+"use strict";const e=require("./main.cjs");e.main().catch(n=>console.error(n));

package/bin/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/bin/index.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+import { main as r } from "./main.js";
+r().catch((o) => console.error(o));

package/bin/logger.d.ts

@@ -0,0 +1,2 @@
+export declare const logger: import('winston').Logger;
+export declare const logError: (message: string) => void;

package/bin/main.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("commander"),a=require("fs/promises"),e=require("path"),L=require("ejs"),R=require("../compiler/index.cjs"),z=require("../pascal-case-iWoaJWwT.cjs"),k=require("winston"),W=require("fs"),H=require("child_process"),M=require("ora");var U=typeof document<"u"?document.currentScript:null;const t=k.createLogger({level:"debug",format:k.format.combine(k.format.colorize(),k.format.cli()),transports:[new k.transports.Console({})]}),v=i=>{t.error(i)},E=i=>new Promise((g,h)=>{H.exec(i,w=>{if(w)return h(w);g()})}),b=async(...i)=>{const g=i.map(x=>x.replace("-D","").split("@").slice(0,-1).join("@").trim()).join(", "),h=M(`Installing packages: ${g}`).start(),w=i.join(" ");await E(`npm install ${w}`),h.succeed(`Installed packages: ${g}`)},B=()=>W.existsSync(e.join(process.cwd(),"node_modules",".bin","prettier"));async function D(i){try{if(!B())return;await E(`./node_modules/.bin/prettier --write "${i}"`),t.info(`Formatted ${i} with Prettier`)}catch(g){t.error(`Error formatting ${i} with Prettier:`,g)}}async function G(){const i=new T.Command;i.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");const g={"salty.config.ts":Promise.resolve().then(()=>require("../salty.config-BupieCfE.cjs")),"saltygen/index.css":Promise.resolve().then(()=>require("../index-84Wroia-.cjs")),"react/react-styled-file.ts":Promise.resolve().then(()=>require("../react-styled-file-Dkubsz-U.cjs"))},h=async(o,r)=>{const{default:d}=await g[o],u=L.render(d,r);return{fileName:o,content:u}},w=async()=>{const o=e.join(process.cwd(),".saltyrc");return await a.readFile(o,"utf-8").then(JSON.parse).catch(()=>({}))},x=async o=>{const r=await a.readFile(o,"utf-8").then(JSON.parse).catch(()=>{});if(!r)throw"Could not read package.json file!";return r},O=async()=>{const o=new URL("../package.json",typeof document>"u"?require("url").pathToFileURL(__filename).href:U&&U.tagName.toUpperCase()==="SCRIPT"&&U.src||new URL("bin/main.cjs",document.baseURI).href);return x(o)},J=await(async()=>(await w()).defaultProject)(),C=await O(),I={core:`@salty-css/core@${C.version}`,react:`@salty-css/react@${C.version}`,eslintPluginCore:`@salty-css/eslint-plugin-core@${C.version}`,vite:`@salty-css/vite@${C.version}`};i.command("init [directory]").description("Initialize a new Salty-CSS project.").option("-d, --dir <dir>","Project directory to initialize the project in.").option("--css-file <css-file>","Existing CSS file where to import the generated CSS. Path must be relative to the given project directory.").option("--skip-install","Skip installing dependencies.").action(async function(o){t.info("Initializing a new Salty-CSS project!");const{dir:r=o,cssFile:d,skipInstall:u}=this.opts();if(!r)return v("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");u||(await b(I.core,I.react),await b(`-D ${I.eslintPluginCore}`));const f=process.cwd(),p=e.join(f,r),S=await Promise.all([h("salty.config.ts"),h("saltygen/index.css")]);await a.mkdir(p,{recursive:!0});const j=S.map(async({fileName:n,content:l})=>{const m=e.join(p,n);if(await a.readFile(m,"utf-8").catch(()=>{})!==void 0){t.debug("File already exists: "+m);return}const N=n.split("/").slice(0,-1).join("/");N&&await a.mkdir(e.join(p,N),{recursive:!0}),t.info("Writing file: "+m),await a.writeFile(m,l),await D(m)});await Promise.all(j);const c=e.relative(f,p),s=e.join(f,".saltyrc"),y=await a.readFile(s,"utf-8").catch(()=>{});if(y===void 0){t.info("Creating file: "+s);const l=JSON.stringify({defaultProject:c,projects:[c]},null,2);await a.writeFile(s,l)}else{t.info("Edit file: "+s);const n=JSON.parse(y),l=new Set((n==null?void 0:n.projects)||[]);l.add(c),n.projects=[...l];const m=JSON.stringify(n,null,2);await a.writeFile(s,m)}const $=e.join(f,".gitignore"),F=await a.readFile($,"utf-8").catch(()=>{});if(F!==void 0&&(F.includes("saltygen")||(t.info("Edit file: "+$),await a.writeFile($,F+`
+
+# Salty-CSS
+saltygen
+`))),d){const n=e.join(p,d),l=await a.readFile(n,"utf-8").catch(()=>{});if(l!==void 0&&!l.includes("saltygen")){const q=e.join(n,".."),A=`@import '${e.relative(q,e.join(p,"saltygen/index.css"))}';`;t.info("Edit file: "+n),await a.writeFile(n,A+`
+`+l),await D(n)}}const P=e.join(p,"vite.config.ts"),_=await a.readFile(P,"utf-8").catch(()=>{});if(_!==void 0&&!_.includes("saltyPlugin")){t.info("Edit file: "+P);const l=`import { saltyPlugin } from '@salty-css/vite';
+`,q=_.replace(/(plugins: \[)/,`$1
+  saltyPlugin(__dirname),`);t.info("Installing @salty-css/vite"),u||await b(`-D ${I.vite}`),t.info("Adding Salty-CSS plugin to Vite config..."),await a.writeFile(P,l+q),await D(P)}}),i.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>","Project directory to build the project in.").action(async function(o=J){t.info("Building the Salty-CSS project...");const{dir:r=o}=this.opts();if(!r)return v("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");const d=e.join(process.cwd(),r);await R.generateCss(d)}),i.command("generate [file] [directory]").alias("g").description("Generate a new component file.").option("-f, --file <file>","File to generate.").option("-d, --dir <dir>","Project directory to generate the file in.").option("-t, --tag <tag>","HTML tag of the component.","div").option("-n, --name <name>","Name of the component.").option("-c, --className <className>","CSS class of the component.").action(async function(o,r=J){const{file:d=o,dir:u=r,tag:f,name:p,className:S}=this.opts();if(!d)return v("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");if(!u)return v("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");const j=e.join(process.cwd(),u),c=e.join(j,d),s=e.parse(c);s.ext||(s.ext=".ts"),s.name.endsWith(".css")||(s.name=s.name+".css"),s.base=s.name+s.ext;const y=e.format(s);if(await a.readFile(y,"utf-8").catch(()=>{})!==void 0){t.error("File already exists:",y);return}t.info("Generating a new file: "+y);const F=z.pascalCase(p||s.base.replace(/\.css\.\w+$/,"")),{content:P}=await h("react/react-styled-file.ts",{tag:f,name:F,className:S});await a.writeFile(y,P),await D(y)}),i.command("update").alias("up").description("Update Salty-CSS packages to the latest version.").option("--legacy-peer-deps <legacyPeerDeps>","Use legacy peer dependencies (not recommended).",!1).action(async function(o,r=J){const{legacyPeerDeps:d}=this.opts(),u=e.join(process.cwd(),"package.json"),f=await x(u).catch(c=>v(c));if(!f)return;const p={...f.dependencies,...f.devDependencies},S=Object.keys(p).filter(c=>c==="salty-css"||c.startsWith("@salty-css/"));if(!S.length)return v("No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: "+u);const j=S.map(c=>`${c}@${C.version}`);d?(t.warn("Using legacy peer dependencies to update packages."),await b(...j,"--legacy-peer-deps")):await b(...j),t.info("Salty-CSS packages updated successfully!")}),i.parseAsync(process.argv)}exports.main=G;

package/bin/main.d.ts

@@ -0,0 +1 @@
+export declare function main(): Promise<void>;

package/bin/main.js

@@ -0,0 +1,156 @@
+import { Command as W } from "commander";
+import { mkdir as _, readFile as y, writeFile as w } from "fs/promises";
+import { join as o, relative as U, parse as H, format as B } from "path";
+import { render as G } from "ejs";
+import { generateCss as M } from "../compiler/index.js";
+import { p as R } from "../pascal-case-BQpR5PdN.js";
+import { createLogger as V, format as O, transports as q } from "winston";
+import { existsSync as K } from "fs";
+import { exec as Q } from "child_process";
+import X from "ora";
+const t = V({
+  level: "debug",
+  format: O.combine(O.colorize(), O.cli()),
+  transports: [new q.Console({})]
+}), j = (e) => {
+  t.error(e);
+}, z = (e) => new Promise((g, h) => {
+  Q(e, (S) => {
+    if (S) return h(S);
+    g();
+  });
+}), x = async (...e) => {
+  const g = e.map((F) => F.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", "), h = X(`Installing packages: ${g}`).start(), S = e.join(" ");
+  await z(`npm install ${S}`), h.succeed(`Installed packages: ${g}`);
+}, Y = () => K(o(process.cwd(), "node_modules", ".bin", "prettier"));
+async function J(e) {
+  try {
+    if (!Y()) return;
+    await z(`./node_modules/.bin/prettier --write "${e}"`), t.info(`Formatted ${e} with Prettier`);
+  } catch (g) {
+    t.error(`Error formatting ${e} with Prettier:`, g);
+  }
+}
+async function dt() {
+  const e = new W();
+  e.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
+  const g = {
+    // Core files
+    "salty.config.ts": import("../salty.config-D9ANEDiH.js"),
+    "saltygen/index.css": import("../index-D_732b92.js"),
+    // React
+    "react/react-styled-file.ts": import("../react-styled-file-CGVf5n1B.js")
+  }, h = async (i, s) => {
+    const { default: l } = await g[i], p = G(l, s);
+    return { fileName: i, content: p };
+  }, S = async () => {
+    const i = o(process.cwd(), ".saltyrc");
+    return await y(i, "utf-8").then(JSON.parse).catch(() => ({}));
+  }, F = async (i) => {
+    const s = await y(i, "utf-8").then(JSON.parse).catch(() => {
+    });
+    if (!s) throw "Could not read package.json file!";
+    return s;
+  }, L = async () => {
+    const i = new URL("../package.json", import.meta.url);
+    return F(i);
+  }, N = await (async () => (await S()).defaultProject)(), k = await L(), b = {
+    core: `@salty-css/core@${k.version}`,
+    react: `@salty-css/react@${k.version}`,
+    eslintPluginCore: `@salty-css/eslint-plugin-core@${k.version}`,
+    vite: `@salty-css/vite@${k.version}`
+  };
+  e.command("init [directory]").description("Initialize a new Salty-CSS project.").option("-d, --dir <dir>", "Project directory to initialize the project in.").option("--css-file <css-file>", "Existing CSS file where to import the generated CSS. Path must be relative to the given project directory.").option("--skip-install", "Skip installing dependencies.").action(async function(i) {
+    t.info("Initializing a new Salty-CSS project!");
+    const { dir: s = i, cssFile: l, skipInstall: p } = this.opts();
+    if (!s) return j("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");
+    p || (await x(b.core, b.react), await x(`-D ${b.eslintPluginCore}`));
+    const f = process.cwd(), d = o(f, s), P = await Promise.all([h("salty.config.ts"), h("saltygen/index.css")]);
+    await _(d, { recursive: !0 });
+    const v = P.map(async ({ fileName: n, content: c }) => {
+      const m = o(d, n);
+      if (await y(m, "utf-8").catch(() => {
+      }) !== void 0) {
+        t.debug("File already exists: " + m);
+        return;
+      }
+      const A = n.split("/").slice(0, -1).join("/");
+      A && await _(o(d, A), { recursive: !0 }), t.info("Writing file: " + m), await w(m, c), await J(m);
+    });
+    await Promise.all(v);
+    const r = U(f, d), a = o(f, ".saltyrc"), u = await y(a, "utf-8").catch(() => {
+    });
+    if (u === void 0) {
+      t.info("Creating file: " + a);
+      const c = JSON.stringify({
+        defaultProject: r,
+        projects: [r]
+      }, null, 2);
+      await w(a, c);
+    } else {
+      t.info("Edit file: " + a);
+      const n = JSON.parse(u), c = new Set((n == null ? void 0 : n.projects) || []);
+      c.add(r), n.projects = [...c];
+      const m = JSON.stringify(n, null, 2);
+      await w(a, m);
+    }
+    const I = o(f, ".gitignore"), $ = await y(I, "utf-8").catch(() => {
+    });
+    if ($ !== void 0 && ($.includes("saltygen") || (t.info("Edit file: " + I), await w(I, $ + `
+
+# Salty-CSS
+saltygen
+`))), l) {
+      const n = o(d, l), c = await y(n, "utf-8").catch(() => {
+      });
+      if (c !== void 0 && !c.includes("saltygen")) {
+        const D = o(n, ".."), T = `@import '${U(D, o(d, "saltygen/index.css"))}';`;
+        t.info("Edit file: " + n), await w(n, T + `
+` + c), await J(n);
+      }
+    }
+    const C = o(d, "vite.config.ts"), E = await y(C, "utf-8").catch(() => {
+    });
+    if (E !== void 0 && !E.includes("saltyPlugin")) {
+      t.info("Edit file: " + C);
+      const c = `import { saltyPlugin } from '@salty-css/vite';
+`, D = E.replace(/(plugins: \[)/, `$1
+  saltyPlugin(__dirname),`);
+      t.info("Installing @salty-css/vite"), p || await x(`-D ${b.vite}`), t.info("Adding Salty-CSS plugin to Vite config..."), await w(C, c + D), await J(C);
+    }
+  }), e.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>", "Project directory to build the project in.").action(async function(i = N) {
+    t.info("Building the Salty-CSS project...");
+    const { dir: s = i } = this.opts();
+    if (!s) return j("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");
+    const l = o(process.cwd(), s);
+    await M(l);
+  }), e.command("generate [file] [directory]").alias("g").description("Generate a new component file.").option("-f, --file <file>", "File to generate.").option("-d, --dir <dir>", "Project directory to generate the file in.").option("-t, --tag <tag>", "HTML tag of the component.", "div").option("-n, --name <name>", "Name of the component.").option("-c, --className <className>", "CSS class of the component.").action(async function(i, s = N) {
+    const { file: l = i, dir: p = s, tag: f, name: d, className: P } = this.opts();
+    if (!l) return j("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");
+    if (!p) return j("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");
+    const v = o(process.cwd(), p), r = o(v, l), a = H(r);
+    a.ext || (a.ext = ".ts"), a.name.endsWith(".css") || (a.name = a.name + ".css"), a.base = a.name + a.ext;
+    const u = B(a);
+    if (await y(u, "utf-8").catch(() => {
+    }) !== void 0) {
+      t.error("File already exists:", u);
+      return;
+    }
+    t.info("Generating a new file: " + u);
+    const $ = R(d || a.base.replace(/\.css\.\w+$/, "")), { content: C } = await h("react/react-styled-file.ts", { tag: f, name: $, className: P });
+    await w(u, C), await J(u);
+  }), e.command("update").alias("up").description("Update Salty-CSS packages to the latest version.").option("--legacy-peer-deps <legacyPeerDeps>", "Use legacy peer dependencies (not recommended).", !1).action(async function(i, s = N) {
+    const { legacyPeerDeps: l } = this.opts(), p = o(process.cwd(), "package.json"), f = await F(p).catch((r) => j(r));
+    if (!f) return;
+    const d = { ...f.dependencies, ...f.devDependencies }, P = Object.keys(d).filter((r) => r === "salty-css" || r.startsWith("@salty-css/"));
+    if (!P.length)
+      return j(
+        "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + p
+      );
+    const v = P.map((r) => `${r}@${k.version}`);
+    l ? (t.warn("Using legacy peer dependencies to update packages."), await x(...v, "--legacy-peer-deps")) : await x(...v), t.info("Salty-CSS packages updated successfully!");
+  }), e.parseAsync(process.argv);
+}
+export {
+  dt as main
+};

package/bin/prettier.d.ts

@@ -0,0 +1 @@
+export declare function formatWithPrettier(filePath: string): Promise<void>;

package/compiler/index.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("esbuild"),B=require("child_process"),P=require("../dash-case-DKzpenwY.cjs"),o=require("path"),r=require("fs"),K=require("fs/promises"),V=require("../parse-templates-W0YfTmOT.cjs");function G(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const R=G(z),N=t=>o.join(t,"./saltygen"),_=["salty","css","styles","styled"],q=(t=[])=>new RegExp(`\\.(${[..._,...t].join("|")})\\.`),O=(t,e=[])=>q(e).test(t),J=async t=>{const e=N(t),n=o.join(t,"salty.config.ts"),s=o.join(e,"salty.config.js");await R.build({entryPoints:[n],minify:!0,treeShaking:!0,bundle:!0,outfile:s,format:"esm",external:["react"]});const a=Date.now(),{config:w}=await import(`${s}?t=${a}`);return w},M=async t=>{const e=await J(t),n=new Set,s=(d,y=[])=>d?Object.entries(d).flatMap(([p,c])=>{if(!c)return;if(typeof c=="object")return s(c,[...y,p]);const C=[...y,p].join(".");n.add(`"${C}"`);const x=[...y.map(P.dashCase),P.dashCase(p)].join("-"),{result:D}=V.parseValueTokens(c);return`--${x}: ${D};`}):[],a=d=>d?Object.entries(d).flatMap(([y,p])=>{const c=s(p);return y==="base"?c.join(""):`${y} { ${c.join("")} }`}):[],w=d=>d?Object.entries(d).flatMap(([y,p])=>Object.entries(p).flatMap(([c,C])=>{const x=s(C,[y]),D=`.${y}-${c}, [data-${y}="${c}"]`,k=x.join("");return`${D} { ${k} }`})):[],j=s(e.variables),S=a(e.responsiveVariables),l=w(e.conditionalVariables),b=N(t),f=o.join(b,"css/variables.css"),i=`:root { ${j.join("")} ${S.join("")} } ${l.join("")}`;r.writeFileSync(f,i);const g=o.join(b,"types/css-tokens.d.ts"),m=`type VariableTokens = ${[...n].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;r.writeFileSync(g,m);const u=o.join(b,"css/global.css"),h=V.parseStyles(e.global,"");r.writeFileSync(u,h);const F=o.join(b,"css/templates.css"),v=V.parseTemplates(e.templates);r.writeFileSync(F,v)},T=async(t,e)=>{const n=P.toHash(t),s=o.join(e,"js",n+".js");await R.build({entryPoints:[t],minify:!0,treeShaking:!0,bundle:!0,outfile:s,format:"esm",target:["es2022"],keepNames:!0,external:["react"]});const a=Date.now();return await import(`${s}?t=${a}`)},E=async t=>{const e=N(t),n=o.join(e,"salty.config.js"),{config:s}=await import(n);return s},A=async t=>{try{const e=[],n=[],s=N(t),a=o.join(s,"index.css");(()=>{r.existsSync(s)&&B.execSync("rm -rf "+s),r.mkdirSync(s),r.mkdirSync(o.join(s,"css")),r.mkdirSync(o.join(s,"types"))})(),await M(t);const j=await E(t);async function S(i,g){const $=r.statSync(i);if($.isDirectory()){const m=r.readdirSync(i);await Promise.all(m.map(u=>S(o.join(i,u),o.join(g,u))))}else if($.isFile()&&O(i)){const u=await T(i,s),h=[];Object.entries(u).forEach(([y,p])=>{if(p.isKeyframes&&p.css){const k=`${p.animationName}.css`,H=`css/${k}`,I=o.join(s,H);e.push(k),r.writeFileSync(I,p.css);return}if(!p.generator)return;const c=p.generator._withBuildContext({name:y,config:j}),C=`${c.hash}-${c.priority}.css`;n[c.priority]||(n[c.priority]=[]),n[c.priority].push(C),h.push(C);const x=`css/${C}`,D=o.join(s,x);r.writeFileSync(D,c.css)});const F=h.map(y=>`@import url('./${y}');`).join(`
+`),v=P.toHash(i,6),d=o.join(s,`css/${v}.css`);r.writeFileSync(d,F)}}await S(t,s);const l=e.map(i=>`@import url('./css/${i}');`).join(`
+`);let f=`@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
+
+${["@import url('./css/variables.css');","@import url('./css/global.css');","@import url('./css/templates.css');"].join(`
+`)}
+${l}`;if(j.importStrategy!=="component"){const i=n.flat().map(g=>`@import url('./css/${g}');`).join(`
+`);f+=i}r.writeFileSync(a,f)}catch(e){console.error(e)}},L=async(t,e)=>{try{const n=[],s=o.join(t,"./saltygen"),a=o.join(s,"index.css");if(O(e)){const j=await E(t),S=await T(e,s);Object.entries(S).forEach(([g,$])=>{if(!$.generator)return;const m=$.generator._withBuildContext({name:g,config:j}),u=`${m.hash}-${m.priority}.css`,h=`css/${u}`,F=o.join(s,h);n.push(u),r.writeFileSync(F,m.css)});const l=r.readFileSync(a,"utf8").split(`
+`),b=n.map(g=>`@import url('../saltygen/css/${g}');`),i=[...new Set([...l,...b])].join(`
+`);r.writeFileSync(a,i)}}catch(n){console.error(n)}},U=async(t,e)=>{try{const n=o.join(t,"./saltygen");if(O(e)){const a=r.readFileSync(e,"utf8");a.replace(/^(?!export\s)const\s.*/gm,f=>`export ${f}`)!==a&&await K.writeFile(e,a);const j=await E(t),S=await T(e,n);let l=a;Object.entries(S).forEach(([f,i])=>{var F;if(i.isKeyframes){console.log("value",i);return}if(!i.generator)return;const g=i.generator._withBuildContext({name:f,config:j}),$=new RegExp(`${f}[=\\s]+[^()]+styled\\(([^,]+),`,"g").exec(a);if(!$)return console.error("Could not find the original declaration");const m=(F=$.at(1))==null?void 0:F.trim(),u=`${f} = styled(${m}, "${g.classNames}", "${g._callerName}", ${JSON.stringify(g.props)});`,h=new RegExp(`${f}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`,"g");l=l.replace(h,u)});const b=P.toHash(e,6);return j.importStrategy==="component"&&(l=`import '../../saltygen/css/${b}.css';
+${l}`),l=l.replace("{ styled }","{ styledClient as styled }"),l=l.replace("@salty-css/react/styled","@salty-css/react/styled-client"),l}}catch(n){console.error(n)}};exports.compileSaltyFile=T;exports.generateConfigStyles=M;exports.generateCss=A;exports.generateFile=L;exports.isSaltyFile=O;exports.minimizeFile=U;exports.saltyFileExtensions=_;exports.saltyFileRegExp=q;

package/{dist/compiler → compiler}/index.d.ts

@@ -1,8 +1,8 @@
 import { StyleComponentGenerator } from '../generator/style-generator';
-import * as winston from 'winston';
-export declare const logger: winston.Logger;
-export declare const isSaltyFile: (file: string) => boolean;
-export declare const generateVariables: (dirname: string) => Promise<void>;
+export declare const saltyFileExtensions: string[];
+export declare const saltyFileRegExp: (additional?: string[]) => RegExp;
+export declare const isSaltyFile: (file: string, additional?: string[]) => boolean;
+export declare const generateConfigStyles: (dirname: string) => Promise<void>;
 export declare const compileSaltyFile: (sourceFilePath: string, outputDirectory: string) => Promise<{
     [key: string]: {
         generator: StyleComponentGenerator;

package/compiler/index.js

@@ -0,0 +1,174 @@
+import * as I from "esbuild";
+import { execSync as H } from "child_process";
+import { t as T, d as R } from "../dash-case-DMQMcCO6.js";
+import { join as o } from "path";
+import { writeFileSync as $, existsSync as K, mkdirSync as V, statSync as z, readdirSync as G, readFileSync as M } from "fs";
+import { writeFile as J } from "fs/promises";
+import { p as q, a as A, b as L } from "../parse-templates-D4p3pgQR.js";
+const N = (s) => o(s, "./saltygen"), U = ["salty", "css", "styles", "styled"], W = (s = []) => new RegExp(`\\.(${[...U, ...s].join("|")})\\.`), v = (s, e = []) => W(e).test(s), X = async (s) => {
+  const e = N(s), n = o(s, "salty.config.ts"), t = o(e, "salty.config.js");
+  await I.build({
+    entryPoints: [n],
+    minify: !0,
+    treeShaking: !0,
+    bundle: !0,
+    outfile: t,
+    format: "esm",
+    external: ["react"]
+  });
+  const c = Date.now(), { config: S } = await import(`${t}?t=${c}`);
+  return S;
+}, Y = async (s) => {
+  const e = await X(s), n = /* @__PURE__ */ new Set(), t = (u, l = []) => u ? Object.entries(u).flatMap(([p, r]) => {
+    if (!r) return;
+    if (typeof r == "object") return t(r, [...l, p]);
+    const x = [...l, p].join(".");
+    n.add(`"${x}"`);
+    const C = [...l.map(R), R(p)].join("-"), { result: D } = L(r);
+    return `--${C}: ${D};`;
+  }) : [], c = (u) => u ? Object.entries(u).flatMap(([l, p]) => {
+    const r = t(p);
+    return l === "base" ? r.join("") : `${l} { ${r.join("")} }`;
+  }) : [], S = (u) => u ? Object.entries(u).flatMap(([l, p]) => Object.entries(p).flatMap(([r, x]) => {
+    const C = t(x, [l]), D = `.${l}-${r}, [data-${l}="${r}"]`, P = C.join("");
+    return `${D} { ${P} }`;
+  })) : [], d = t(e.variables), w = c(e.responsiveVariables), a = S(e.conditionalVariables), b = N(s), f = o(b, "css/variables.css"), i = `:root { ${d.join("")} ${w.join("")} } ${a.join("")}`;
+  $(f, i);
+  const y = o(b, "types/css-tokens.d.ts"), m = `type VariableTokens = ${[...n].join("|")}; type PropertyValueToken = \`{\${VariableTokens}}\``;
+  $(y, m);
+  const g = o(b, "css/global.css"), F = q(e.global, "");
+  $(g, F);
+  const j = o(b, "css/templates.css"), k = A(e.templates);
+  $(j, k);
+}, E = async (s, e) => {
+  const n = T(s), t = o(e, "js", n + ".js");
+  await I.build({
+    entryPoints: [s],
+    minify: !0,
+    treeShaking: !0,
+    bundle: !0,
+    outfile: t,
+    format: "esm",
+    target: ["es2022"],
+    keepNames: !0,
+    external: ["react"]
+  });
+  const c = Date.now();
+  return await import(`${t}?t=${c}`);
+}, O = async (s) => {
+  const e = N(s), n = o(e, "salty.config.js"), { config: t } = await import(n);
+  return t;
+}, ot = async (s) => {
+  try {
+    const e = [], n = [], t = N(s), c = o(t, "index.css");
+    (() => {
+      K(t) && H("rm -rf " + t), V(t), V(o(t, "css")), V(o(t, "types"));
+    })(), await Y(s);
+    const d = await O(s);
+    async function w(i, y) {
+      const h = z(i);
+      if (h.isDirectory()) {
+        const m = G(i);
+        await Promise.all(m.map((g) => w(o(i, g), o(y, g))));
+      } else if (h.isFile() && v(i)) {
+        const g = await E(i, t), F = [];
+        Object.entries(g).forEach(([l, p]) => {
+          if (p.isKeyframes && p.css) {
+            const P = `${p.animationName}.css`, _ = `css/${P}`, B = o(t, _);
+            e.push(P), $(B, p.css);
+            return;
+          }
+          if (!p.generator) return;
+          const r = p.generator._withBuildContext({
+            name: l,
+            config: d
+          }), x = `${r.hash}-${r.priority}.css`;
+          n[r.priority] || (n[r.priority] = []), n[r.priority].push(x), F.push(x);
+          const C = `css/${x}`, D = o(t, C);
+          $(D, r.css);
+        });
+        const j = F.map((l) => `@import url('./${l}');`).join(`
+`), k = T(i, 6), u = o(t, `css/${k}.css`);
+        $(u, j);
+      }
+    }
+    await w(s, t);
+    const a = e.map((i) => `@import url('./css/${i}');`).join(`
+`);
+    let f = `@layer l0, l1, l2, l3, l4, l5, l6, l7, l8;
+
+${["@import url('./css/variables.css');", "@import url('./css/global.css');", "@import url('./css/templates.css');"].join(`
+`)}
+${a}`;
+    if (d.importStrategy !== "component") {
+      const i = n.flat().map((y) => `@import url('./css/${y}');`).join(`
+`);
+      f += i;
+    }
+    $(c, f);
+  } catch (e) {
+    console.error(e);
+  }
+}, it = async (s, e) => {
+  try {
+    const n = [], t = o(s, "./saltygen"), c = o(t, "index.css");
+    if (v(e)) {
+      const d = await O(s), w = await E(e, t);
+      Object.entries(w).forEach(([y, h]) => {
+        if (!h.generator) return;
+        const m = h.generator._withBuildContext({
+          name: y,
+          config: d
+        }), g = `${m.hash}-${m.priority}.css`, F = `css/${g}`, j = o(t, F);
+        n.push(g), $(j, m.css);
+      });
+      const a = M(c, "utf8").split(`
+`), b = n.map((y) => `@import url('../saltygen/css/${y}');`), i = [.../* @__PURE__ */ new Set([...a, ...b])].join(`
+`);
+      $(c, i);
+    }
+  } catch (n) {
+    console.error(n);
+  }
+}, rt = async (s, e) => {
+  try {
+    const n = o(s, "./saltygen");
+    if (v(e)) {
+      const c = M(e, "utf8");
+      c.replace(/^(?!export\s)const\s.*/gm, (f) => `export ${f}`) !== c && await J(e, c);
+      const d = await O(s), w = await E(e, n);
+      let a = c;
+      Object.entries(w).forEach(([f, i]) => {
+        var j;
+        if (i.isKeyframes) {
+          console.log("value", i);
+          return;
+        }
+        if (!i.generator) return;
+        const y = i.generator._withBuildContext({
+          name: f,
+          config: d
+        }), h = new RegExp(`${f}[=\\s]+[^()]+styled\\(([^,]+),`, "g").exec(c);
+        if (!h)
+          return console.error("Could not find the original declaration");
+        const m = (j = h.at(1)) == null ? void 0 : j.trim(), g = `${f} = styled(${m}, "${y.classNames}", "${y._callerName}", ${JSON.stringify(y.props)});`, F = new RegExp(`${f}[=\\s]+[^()]+styled\\(([^,]+),[^;]+;`, "g");
+        a = a.replace(F, g);
+      });
+      const b = T(e, 6);
+      return d.importStrategy === "component" && (a = `import '../../saltygen/css/${b}.css';
+${a}`), a = a.replace("{ styled }", "{ styledClient as styled }"), a = a.replace("@salty-css/react/styled", "@salty-css/react/styled-client"), a;
+    }
+  } catch (n) {
+    console.error(n);
+  }
+};
+export {
+  E as compileSaltyFile,
+  Y as generateConfigStyles,
+  ot as generateCss,
+  it as generateFile,
+  v as isSaltyFile,
+  rt as minimizeFile,
+  U as saltyFileExtensions,
+  W as saltyFileRegExp
+};

package/{dist/config → config}/config-types.d.ts

@@ -30,11 +30,11 @@ export interface SaltyConfig {
      * - `root` will import the css file from the root of the project.
      * - `component` will import the css file from the component's directory.
      */
-    importStrategy: 'root' | 'component';
+    importStrategy?: 'root' | 'component';
     /**
      * Base variables that can be used in all styles as they are applied globally to :root.
      */
-    variables: CssVariables;
+    variables?: CssVariables;
     /**
      * Variables that are defined for different media queries.
      */
@@ -46,7 +46,7 @@ export interface SaltyConfig {
     /**
      * The global styles that are imported in the root of the project.
      */
-    global: CssStyles;
+    global?: CssStyles;
     /**
      * The templates that can be used in styles to create reusable css.
      */

package/dash-case-DKzpenwY.cjs

@@ -0,0 +1 @@
+"use strict";const n=e=>String.fromCharCode(e+(e>25?39:97)),i=(e,r)=>{let t="",a;for(a=Math.abs(e);a>52;a=a/52|0)t=n(a%52)+t;return t=n(a%52)+t,t.length<r?t=t.padStart(r,"a"):t.length>r&&(t=t.slice(-r)),t},o=(e,r)=>{let t=r.length;for(;t;)e=e*33^r.charCodeAt(--t);return e},c=(e,r=3)=>{const t=o(5381,JSON.stringify(e))>>>0;return i(t,r)};function s(e){return e?typeof e!="string"?s(String(e)):e.replace(/\s/g,"-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g,(r,t)=>(t>0?"-":"")+r.toLowerCase()):""}exports.dashCase=s;exports.toHash=c;

package/{dist/util/index.js → dash-case-DMQMcCO6.js}

@@ -6,14 +6,14 @@ const n = (e) => String.fromCharCode(e + (e > 25 ? 39 : 97)), o = (e, r) => {
   let t = r.length;
   for (; t; ) e = e * 33 ^ r.charCodeAt(--t);
   return e;
-}, s = (e, r = 3) => {
+}, c = (e, r = 3) => {
   const t = i(5381, JSON.stringify(e)) >>> 0;
   return o(t, r);
 };
-function c(e) {
-  return e ? typeof e != "string" ? String(e) : e.replace(/\s/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (r, t) => (t > 0 ? "-" : "") + r.toLowerCase()) : "";
+function s(e) {
+  return e ? typeof e != "string" ? s(String(e)) : e.replace(/\s/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (r, t) => (t > 0 ? "-" : "") + r.toLowerCase()) : "";
 }
 export {
-  c as dashCase,
-  s as toHash
+  s as d,
+  c as t
 };

package/generator/index.cjs

@@ -0,0 +1 @@
+"use strict";var m=Object.defineProperty;var l=(a,t,s)=>t in a?m(a,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):a[t]=s;var c=(a,t,s)=>l(a,typeof t!="symbol"?t+"":t,s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../dash-case-DKzpenwY.cjs"),p=require("../parse-templates-W0YfTmOT.cjs");class g{constructor(t,s){c(this,"_callerName");c(this,"_context");this.tagName=t,this.params=s}get hash(){return u.toHash(this.params.base||this.params)}get priority(){var t;return typeof this.tagName=="function"||typeof this.tagName=="object"?(((t=this.tagName.generator)==null?void 0:t.priority)||0)+1:0}get classNames(){const t=[this.hash],{className:s}=this.params;return s&&t.push(s),t.join(" ")}get cssClassName(){return this.hash}get cssDisplayNameVar(){return`--${this.hash}-display-name: ${this._callerName};`}get templateKeys(){var t;return(t=this._context)!=null&&t.config.templates?p.getTemplateKeys(this._context.config.templates):[]}get css(){var e;const{base:t={},variants:s={},compoundVariants:r=[]}=this.params,i={...t,variants:s,compoundVariants:r};return p.parseStyles(i,`.${this.cssClassName}`,this.priority,(e=this._context)==null?void 0:e.config)}get props(){const{element:t}=this.params,s=this.params.variants?Object.keys(this.params.variants).map(e=>{var n;const o=(n=this.params.defaultVariants)==null?void 0:n[e];return o!==void 0?`${e}=${String(o)}`:e}):void 0,r=new Set([]),i=/\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));return i&&i.forEach((e,o,n)=>{const h=n.at(1);h&&r.add(h)}),{element:t,variantKeys:s,propValueKeys:[...r]}}_withBuildContext(t){this._context=t;const{name:s,config:r}=t;return this._callerName=s,this}}exports.StyleComponentGenerator=g;

package/generator/index.js

@@ -0,0 +1,61 @@
+var h = Object.defineProperty;
+var m = (e, t, s) => t in e ? h(e, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[t] = s;
+var c = (e, t, s) => m(e, typeof t != "symbol" ? t + "" : t, s);
+import { t as l } from "../dash-case-DMQMcCO6.js";
+import { g, p as u } from "../parse-templates-D4p3pgQR.js";
+class d {
+  constructor(t, s) {
+    c(this, "_callerName");
+    c(this, "_context");
+    this.tagName = t, this.params = s;
+  }
+  get hash() {
+    return l(this.params.base || this.params);
+  }
+  get priority() {
+    var t;
+    return typeof this.tagName == "function" || typeof this.tagName == "object" ? (((t = this.tagName.generator) == null ? void 0 : t.priority) || 0) + 1 : 0;
+  }
+  get classNames() {
+    const t = [this.hash], { className: s } = this.params;
+    return s && t.push(s), t.join(" ");
+  }
+  get cssClassName() {
+    return this.hash;
+  }
+  get cssDisplayNameVar() {
+    return `--${this.hash}-display-name: ${this._callerName};`;
+  }
+  get templateKeys() {
+    var t;
+    return (t = this._context) != null && t.config.templates ? g(this._context.config.templates) : [];
+  }
+  get css() {
+    var a;
+    const { base: t = {}, variants: s = {}, compoundVariants: r = [] } = this.params, i = { ...t, variants: s, compoundVariants: r };
+    return u(i, `.${this.cssClassName}`, this.priority, (a = this._context) == null ? void 0 : a.config);
+  }
+  get props() {
+    const { element: t } = this.params, s = this.params.variants ? Object.keys(this.params.variants).map((a) => {
+      var n;
+      const o = (n = this.params.defaultVariants) == null ? void 0 : n[a];
+      return o !== void 0 ? `${a}=${String(o)}` : a;
+    }) : void 0, r = /* @__PURE__ */ new Set([]), i = /\{props\.([\w\d]+)\}/gi.exec(JSON.stringify(this.params.base));
+    return i && i.forEach((a, o, n) => {
+      const p = n.at(1);
+      p && r.add(p);
+    }), {
+      element: t,
+      variantKeys: s,
+      propValueKeys: [...r]
+    };
+  }
+  _withBuildContext(t) {
+    this._context = t;
+    const { name: s, config: r } = t;
+    return this._callerName = s, this;
+  }
+}
+export {
+  d as StyleComponentGenerator
+};

package/{dist/generator → generator}/style-generator.d.ts

@@ -1,14 +1,18 @@
-import { GeneratorOptions, Styles, Tag } from '../types';
+import { StyledParams, Tag } from '../types';
+export interface GeneratorProps {
+    element?: string;
+    variantKeys?: string[];
+    propValueKeys?: string[];
+}
 export declare class StyleComponentGenerator {
     tagName: Tag<any>;
-    styles: Styles;
-    private options;
+    params: StyledParams;
     _callerName: string | undefined;
     _context: {
         name: string;
         config: any;
     } | undefined;
-    constructor(tagName: Tag<any>, styles: Styles, options: GeneratorOptions);
+    constructor(tagName: Tag<any>, params: StyledParams);
     get hash(): string;
     get priority(): number;
     get classNames(): string;
@@ -16,10 +20,7 @@ export declare class StyleComponentGenerator {
     get cssDisplayNameVar(): string;
     get templateKeys(): string[];
     get css(): string;
-    get props(): {
-        element: string | undefined;
-        variantKeys: string[] | undefined;
-    };
+    get props(): GeneratorProps;
     _withBuildContext(context: {
         name: string;
         config: any;

package/index-84Wroia-.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="/* Empty */";exports.default=e;

package/index-D_732b92.js

@@ -0,0 +1,4 @@
+const t = "/* Empty */";
+export {
+  t as default
+};