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

package/bin/main.js

@@ -0,0 +1,263 @@
+import { Command as ot } from "commander";
+import { existsSync as Q, watch as rt } from "fs";
+import { mkdir as q, readFile as S, writeFile as C } from "fs/promises";
+import { join as a, relative as z, parse as ct, format as et } from "path";
+import { render as lt } from "ejs";
+import { l as e, a as h, g as K, i as dt, b as ft } from "../index-CituHO0U.js";
+import { p as pt } from "../pascal-case-BQpR5PdN.js";
+import { exec as gt } from "child_process";
+import ut from "ora";
+import { c as yt } from "../should-restart-C6VJ-qaY.js";
+const st = (u) => new Promise((v, k) => {
+  gt(u, ($) => {
+    if ($) return k($);
+    v();
+  });
+}), E = async (...u) => {
+  const v = u.map((J) => J.replace("-D", "").split("@").slice(0, -1).join("@").trim()).join(", "), k = ut(`Installing packages: ${v}`).start(), $ = u.join(" ");
+  await st(`npm install ${$}`), k.succeed(`Installed packages: ${v}`);
+}, mt = () => Q(a(process.cwd(), "node_modules", ".bin", "prettier"));
+async function j(u) {
+  try {
+    if (!mt()) return;
+    await st(`./node_modules/.bin/prettier --write "${u}"`), e.info(`Formatted ${u} with Prettier`);
+  } catch (v) {
+    e.error(`Error formatting ${u} with Prettier:`, v);
+  }
+}
+async function Jt() {
+  const u = new ot();
+  u.name("salty-css").description("Salty-CSS CLI tool to help with annoying configuration tasks.");
+  const v = {
+    // Core files
+    "salty.config.ts": import("../salty.config-BhBY_oOk.js"),
+    "saltygen/index.css": import("../index-D_732b92.js"),
+    // React
+    "react/react-styled-file.ts": import("../react-styled-file-CGVf5n1B.js"),
+    "react/react-vanilla-file.ts": import("../react-vanilla-file-CCXbsjIb.js")
+  }, k = async (s, i) => {
+    const { default: d } = await v[s], l = lt(d, i);
+    return { fileName: s, content: l };
+  }, $ = async () => {
+    const s = a(process.cwd(), ".saltyrc.json");
+    return await S(s, "utf-8").then(JSON.parse).catch(() => ({}));
+  }, J = a(process.cwd(), "package.json"), O = async (s = J) => {
+    const i = await S(s, "utf-8").then(JSON.parse).catch(() => {
+    });
+    if (!i) throw "Could not read package.json file!";
+    return i;
+  }, nt = async (s, i = J) => {
+    typeof s == "object" && (s = JSON.stringify(s, null, 2)), await C(i, s);
+  }, X = async () => {
+    const s = new URL("../package.json", import.meta.url);
+    return O(s);
+  }, Y = await (async () => (await $()).defaultProject)(), N = await X(), A = {
+    core: `@salty-css/core@${N.version}`,
+    react: `@salty-css/react@${N.version}`,
+    eslintConfigCore: `@salty-css/eslint-config-core@${N.version}`,
+    vite: `@salty-css/vite@${N.version}`,
+    next: `@salty-css/next@${N.version}`
+  }, G = (s) => {
+    const i = s === "." ? "" : s, d = process.cwd();
+    return a(d, i);
+  };
+  u.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(s = ".") {
+    if (!await O().catch(() => {
+    })) return h("Salty CSS project must be initialized in a directory with a package.json file.");
+    e.info("Initializing a new Salty-CSS project!");
+    const { dir: d = s, cssFile: l, skipInstall: p } = this.opts();
+    if (!d) return h("Project directory must be provided. Add it as the first argument after init command or use the --dir option.");
+    p || await E(A.core, A.react);
+    const r = process.cwd(), o = G(d), T = await Promise.all([k("salty.config.ts"), k("saltygen/index.css")]);
+    await q(o, { recursive: !0 });
+    const y = T.map(async ({ fileName: t, content: g }) => {
+      const c = a(o, t);
+      if (await S(c, "utf-8").catch(() => {
+      }) !== void 0) {
+        e.debug("File already exists: " + c);
+        return;
+      }
+      const b = t.split("/").slice(0, -1).join("/");
+      b && await q(a(o, b), { recursive: !0 }), e.info("Creating file: " + c), await C(c, g), await j(c);
+    });
+    await Promise.all(y);
+    const w = z(r, o) || ".", m = a(r, ".saltyrc.json"), f = await S(m, "utf-8").catch(() => {
+    });
+    if (f === void 0) {
+      e.info("Creating file: " + m);
+      const g = JSON.stringify({
+        $schema: "./node_modules/@salty-css/core/.saltyrc.schema.json",
+        info: "This file is used to define projects and their configurations for Salty CSS cli. Do not delete, modify or add this file to .gitignore.",
+        defaultProject: w,
+        projects: [
+          {
+            dir: w,
+            framework: "react"
+          }
+        ]
+      }, null, 2);
+      await C(m, g), await j(m);
+    } else {
+      const t = JSON.parse(f), g = (t == null ? void 0 : t.projects) || [];
+      if (g.findIndex((n) => n.dir === w) === -1) {
+        g.push({ dir: w, framework: "react" }), t.projects = [...g];
+        const n = JSON.stringify(t, null, 2);
+        n !== f && (e.info("Edit file: " + m), await C(m, n), await j(m));
+      }
+    }
+    const P = a(r, ".gitignore"), H = await S(P, "utf-8").catch(() => {
+    });
+    H !== void 0 && (H.includes("saltygen") || (e.info("Edit file: " + P), await C(P, H + `
+
+# Salty-CSS
+saltygen
+`)));
+    const F = ["src", "public", "assets", "styles", "css", "app"], M = ["styles", "css", "app", "pages"], B = ["index", "styles", "main", "app", "global", "globals"], U = [".css", ".scss", ".sass"], D = await (async () => {
+      if (l) return l;
+      for (const t of F)
+        for (const g of B)
+          for (const c of U) {
+            const n = a(o, t, g + c);
+            if (await S(n, "utf-8").catch(() => {
+            }) !== void 0) return z(o, n);
+            for (const L of M) {
+              const R = a(o, t, L, g + c);
+              if (await S(R, "utf-8").catch(() => {
+              }) !== void 0) return z(o, R);
+            }
+          }
+    })();
+    if (D) {
+      const t = a(o, D), g = await S(t, "utf-8").catch(() => {
+      });
+      if (g !== void 0 && !g.includes("saltygen")) {
+        const n = a(t, ".."), L = `@import '${z(n, a(o, "saltygen/index.css"))}';`;
+        e.info("Adding global import statement to CSS file: " + t), await C(t, L + `
+` + g), await j(t);
+      }
+    } else
+      e.warn("Could not find a CSS file to import the generated CSS. Please add it manually.");
+    const at = {
+      projectJs: a(o, "eslint.config.js"),
+      rootJs: a(r, "eslint.config.js"),
+      projectMjs: a(o, "eslint.config.mjs"),
+      rootMjs: a(r, "eslint.config.mjs"),
+      projectJson: a(o, ".eslintrc.json"),
+      rootJson: a(r, ".eslintrc.json")
+    }, x = Object.values(at).find((t) => Q(t));
+    if (x) {
+      p || await E(A.eslintConfigCore);
+      const t = await S(x, "utf-8").catch(() => {
+      });
+      if (!t) return h("Could not read ESLint config file.");
+      if (!t.includes("salty-css"))
+        if (e.info("Edit file: " + x), x.endsWith("js")) {
+          let n = `import saltyCss from "@salty-css/eslint-config-core/flat";
+${t}`;
+          t.includes("typescript-eslint") ? n.includes(".config(") ? n = n.replace(".config(", ".config(saltyCss,") : e.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually.") : n.includes("export default [") ? n = n.replace("export default [", "export default [ saltyCss,") : n.includes("eslintConfig = [") ? n = n.replace("eslintConfig = [", "eslintConfig = [ saltyCss,") : e.warn("Could not find the correct place to add the Salty-CSS config for ESLint. Please add it manually."), await C(x, n), await j(x);
+        } else {
+          const c = JSON.parse(t);
+          c.extends || (c.extends = []), c.extends.push("@salty-css/core");
+          const n = JSON.stringify(c, null, 2);
+          await C(x, n), await j(x);
+        }
+    }
+    const W = a(o, "vite.config.ts"), V = await S(W, "utf-8").catch(() => {
+    });
+    if (V !== void 0 && !V.includes("saltyPlugin")) {
+      e.info("Edit file: " + W);
+      const g = `import { saltyPlugin } from '@salty-css/vite';
+`, n = V.replace(/(plugins: \[)/, `$1
+  saltyPlugin(__dirname),`);
+      p || await E(`-D ${A.vite}`), e.info("Adding Salty-CSS plugin to Vite config..."), await C(W, g + n), await j(W);
+    }
+    const _ = ["next.config.js", "next.config.cjs", "next.config.ts", "next.config.mjs"].map((t) => a(o, t)).find((t) => Q(t));
+    if (_) {
+      let t = await S(_, "utf-8").catch(() => {
+      });
+      if (t !== void 0 && !t.includes("withSaltyCss")) {
+        let c = !1;
+        /\splugins([^=]*)=[^[]\[/.test(t) && !c && (t = t.replace(/\splugins([^=]*)=[^[]\[/, (R, I) => ` plugins${I}= [withSaltyCss,`), c = !0);
+        const b = t.includes("module.exports"), L = b ? `const { withSaltyCss } = require('@salty-css/next');
+` : `import { withSaltyCss } from '@salty-css/next';
+`;
+        b && !c ? (t = t.replace(/module.exports = ([^;]+)/, (R, I) => `module.exports = withSaltyCss(${I})`), c = !0) : c || (t = t.replace(/export default ([^;]+)/, (R, I) => `export default withSaltyCss(${I})`)), p || await E(`-D ${A.next}`), e.info("Adding Salty-CSS plugin to Next.js config..."), await C(_, L + t), await j(_);
+      }
+    }
+    const it = await O().catch(() => h("Could not read package.json file.")).then((t) => (t.scripts || (t.scripts = {}), t.scripts.prepare ? t.scripts.prepare.includes("salty-css") || (e.info("Edit file: " + J), t.scripts.prepare = t.scripts.prepare + " && npx salty-css build") : (e.info("Edit file: " + J), t.scripts.prepare = "npx salty-css build"), t));
+    await nt(it), e.info("Running the build to generate initial CSS..."), await K(o), e.info("🎉 Salty CSS project initialized successfully!"), e.info("Next steps:"), e.info("1. Configure variables and templates in `salty.config.ts`"), e.info("2. Create a new component with `npx salty-css generate [component-name]`"), e.info("3. Run `npx salty-css build` to generate the CSS"), e.info("4. Read about the features in the documentation: https://salty-css.dev"), e.info("5. Star the project on GitHub: https://github.com/margarita-form/salty-css ⭐");
+  }), u.command("build [directory]").alias("b").description("Build the Salty-CSS project.").option("-d, --dir <dir>", "Project directory to build the project in.").option("--watch", "Watch for changes and rebuild the project.").action(async function(s = Y) {
+    e.info("Building the Salty-CSS project...");
+    const { dir: i = s, watch: d } = this.opts();
+    if (!i) return h("Project directory must be provided. Add it as the first argument after build command or use the --dir option.");
+    const l = G(i);
+    await K(l), d && (e.info("Watching for changes in the project directory..."), rt(l, { recursive: !0 }, async (p, r) => {
+      await yt(r) ? await K(l, !1, !1) : dt(r) && await ft(l, r);
+    }));
+  }), u.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.").option("-r, --reactComponent", "Generate a React component as well.").action(async function(s, i = Y) {
+    const { file: d = s, dir: l = i, tag: p, name: r, className: o, reactComponent: T = !1 } = this.opts();
+    if (!d) return h("File to generate must be provided. Add it as the first argument after generate command or use the --file option.");
+    if (!l) return h("Project directory must be provided. Add it as the second argument after generate command or use the --dir option.");
+    const y = G(l), w = d.split("/").slice(0, -1).join("/");
+    w && await q(a(y, w), { recursive: !0 });
+    const m = a(y, d), f = ct(m);
+    f.ext || (f.ext = ".ts"), f.name.endsWith(".css") || (f.name = f.name + ".css"), f.base = f.name + f.ext;
+    const P = et(f);
+    if (await S(P, "utf-8").catch(() => {
+    }) !== void 0) {
+      e.error("File already exists:", P);
+      return;
+    }
+    let F = pt(r || f.base.replace(/\.css\.\w+$/, ""));
+    if (T) {
+      const B = F + "Component";
+      F = F + "Wrapper";
+      const U = f.base.replace(/\.css\.\w+$/, ""), { content: tt } = await k("react/react-vanilla-file.ts", { tag: p, componentName: B, styledComponentName: F, className: o, fileName: U });
+      f.name = U.replace(/\.css$/, ""), f.ext = ".tsx", f.base = f.name + f.ext;
+      const D = et(f);
+      e.info("Generating a new file: " + D), await C(D, tt), await j(D);
+    }
+    const { content: M } = await k("react/react-styled-file.ts", { tag: p, name: F, className: o });
+    e.info("Generating a new file: " + P), await C(P, M), await j(P);
+  });
+  const Z = async () => {
+    const s = a(process.cwd(), "package.json"), i = await O(s).catch((p) => h(p));
+    if (!i) return h("Could not read package.json file.");
+    const d = { ...i.dependencies, ...i.devDependencies }, l = Object.entries(d).filter(([p]) => p === "salty-css" || p.startsWith("@salty-css/"));
+    return l.length ? l : h(
+      "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + s
+    );
+  };
+  u.command("update [version]").alias("up").description("Update Salty-CSS packages to the latest or specified version.").option("-v, --version <version>", "Version to update to.").option("--legacy-peer-deps <legacyPeerDeps>", "Use legacy peer dependencies (not recommended).", !1).action(async function(s = "latest") {
+    const { legacyPeerDeps: i, version: d = s } = this.opts(), l = await Z();
+    if (!l) return h("Could not update Salty-CSS packages as any were found in package.json.");
+    const p = l.map(([y]) => d === "@" ? `${y}@${N.version}` : `${y}@${d.replace(/^@/, "")}`);
+    i ? (e.warn("Using legacy peer dependencies to update packages."), await E(...p, "--legacy-peer-deps")) : await E(...p);
+    const r = await Z();
+    if (!r) return h("Something went wrong while reading the updated packages.");
+    const o = r.reduce((y, [w, m]) => (y[m] || (y[m] = []), y[m].push(w), y), {});
+    if (Object.keys(o).length === 1) {
+      const w = Object.keys(o)[0].replace(/^\^/, "");
+      e.info(`Updated to all Salty CSS packages successfully to ${w}`);
+    } else
+      for (const [y, w] of Object.entries(o)) {
+        const m = y.replace(/^\^/, "");
+        e.info(`Updated to ${m}: ${w.join(", ")}`);
+      }
+  }), u.option("-v, --version", "Show the current version of Salty-CSS.").action(async function() {
+    const s = await X();
+    e.info("CLI is running: " + s.version);
+    const i = a(process.cwd(), "package.json"), d = await O(i).catch((r) => h(r));
+    if (!d) return;
+    const l = { ...d.dependencies, ...d.devDependencies }, p = Object.keys(l).filter((r) => r === "salty-css" || r.startsWith("@salty-css/"));
+    if (!p.length)
+      return h(
+        "No Salty-CSS packages found in package.json. Make sure you are running update command in the same directory! Used package.json path: " + i
+      );
+    for (const r of p)
+      e.info(`${r}: ${l[r]}`);
+  }), u.parseAsync(process.argv);
+}
+export {
+  Jt as main
+};

package/bin/prettier.d.ts

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

package/cache/resolve-dynamic-config-cache.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("fs/promises"),r=require("path"),t=require("../helpers-CC5pFyba.cjs"),i=async()=>{const o=t.getCorePackageRoot(),c=r.join(o,"cache/config-cache.json"),e=await n.readFile(c,"utf8");if(!e)throw new Error("Could not find config cache file");return JSON.parse(e)};exports.resolveDynamicConfigCache=i;

package/cache/resolve-dynamic-config-cache.d.ts

@@ -0,0 +1 @@
+export declare const resolveDynamicConfigCache: () => Promise<any>;

package/cache/resolve-dynamic-config-cache.js

@@ -0,0 +1,11 @@
+import { readFile as r } from "fs/promises";
+import { join as t } from "path";
+import { g as n } from "../helpers-nHqH4L9L.js";
+const s = async () => {
+  const e = n(), c = t(e, "cache/config-cache.json"), o = await r(c, "utf8");
+  if (!o) throw new Error("Could not find config cache file");
+  return JSON.parse(o);
+};
+export {
+  s as resolveDynamicConfigCache
+};

package/compiler/get-files.d.ts

@@ -0,0 +1,3 @@
+export declare const getSaltyRcPath: (dirname: string) => string;
+export declare const getPackageJsonPath: (dirname: string) => string;
+export declare const getPackageJson: (dirname: string) => Promise<any>;

package/compiler/get-function-range.d.ts

@@ -0,0 +1 @@
+export declare const getFunctionRange: (contents: string, name: string) => Promise<[number, number]>;

package/compiler/helpers.d.ts

@@ -0,0 +1,2 @@
+export declare const getCorePackageRoot: () => string;
+export declare const resolveExportValue: <T>(value: unknown, maxLevel?: number, _level?: number) => Promise<T>;

package/compiler/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("esbuild");require("child_process");require("../dash-case-BJEkFEGQ.cjs");require("path");require("fs");require("fs/promises");require("../parse-styles-B1E0JeC7.cjs");require("../parsers/index.cjs");const e=require("../index-ol1Q_xul.cjs");require("../css/merge.cjs");require("../define-templates-Cunsb_Tr.cjs");require("../helpers-CC5pFyba.cjs");exports.compileSaltyFile=e.compileSaltyFile;exports.generateConfigStyles=e.generateConfigStyles;exports.generateCss=e.generateCss;exports.generateFile=e.generateFile;exports.isSaltyFile=e.isSaltyFile;exports.minimizeFile=e.minimizeFile;exports.saltyFileExtensions=e.saltyFileExtensions;exports.saltyFileRegExp=e.saltyFileRegExp;

package/compiler/index.d.ts

@@ -0,0 +1,24 @@
+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, configFiles: Set<string>) => Promise<void>;
+export declare const compileSaltyFile: (dirname: string, sourceFilePath: string, outputDirectory: string) => Promise<{
+    contents: {
+        [key: string]: {
+            generator: any;
+            isClassName?: boolean;
+            isMedia?: boolean;
+            isGlobalDefine?: boolean;
+            isDefineVariables?: boolean;
+            isDefineTemplates?: boolean;
+            isKeyframes?: boolean;
+            animationName?: string;
+            css?: Promise<string>;
+            styles?: any;
+        };
+    };
+    outputFilePath: string;
+}>;
+export declare const generateCss: (dirname: string, prod?: boolean, clean?: boolean) => Promise<void>;
+export declare const generateFile: (dirname: string, file: string, prod?: boolean) => Promise<void>;
+export declare const minimizeFile: (dirname: string, file: string, prod?: boolean) => Promise<string | undefined>;

package/compiler/index.js

@@ -0,0 +1,22 @@
+import "esbuild";
+import "child_process";
+import "../dash-case-DBThphLm.js";
+import "path";
+import "fs";
+import "fs/promises";
+import "../parse-styles-y_-drahL.js";
+import "../parsers/index.js";
+import { e as y, d as x, g as S, b as c, i as f, m as C, s as E, c as b } from "../index-CituHO0U.js";
+import "../css/merge.js";
+import "../define-templates-4A2yHcMF.js";
+import "../helpers-nHqH4L9L.js";
+export {
+  y as compileSaltyFile,
+  x as generateConfigStyles,
+  S as generateCss,
+  c as generateFile,
+  f as isSaltyFile,
+  C as minimizeFile,
+  E as saltyFileExtensions,
+  b as saltyFileRegExp
+};

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

@@ -1,2 +1,2 @@
-import { SaltyConfig } from './config-types';
+import { SaltyConfig } from '../types/config-types';
 export declare const defineConfig: <T extends SaltyConfig>(config: T) => T;

package/config/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../factories/index.cjs"),a=require("../define-templates-Cunsb_Tr.cjs"),i=t=>t;exports.GlobalStylesFactory=e.GlobalStylesFactory;exports.VariablesFactory=e.VariablesFactory;exports.defineGlobalStyles=e.defineGlobalStyles;exports.defineMediaQuery=e.defineMediaQuery;exports.defineVariables=e.defineVariables;exports.TemplateFactory=a.TemplateFactory;exports.TemplatesFactory=a.TemplatesFactory;exports.defineTemplates=a.defineTemplates;exports.defineConfig=i;

package/config/index.d.ts

@@ -0,0 +1,3 @@
+export * from './define-config';
+export * from '../factories';
+export * from '../types/config-types';

package/config/index.js

@@ -0,0 +1,14 @@
+import { GlobalStylesFactory as o, VariablesFactory as l, defineGlobalStyles as s, defineMediaQuery as i, defineVariables as f } from "../factories/index.js";
+import { T as d, a as y, d as p } from "../define-templates-4A2yHcMF.js";
+const a = (e) => e;
+export {
+  o as GlobalStylesFactory,
+  d as TemplateFactory,
+  y as TemplatesFactory,
+  l as VariablesFactory,
+  a as defineConfig,
+  s as defineGlobalStyles,
+  i as defineMediaQuery,
+  p as defineTemplates,
+  f as defineVariables
+};

package/css/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./keyframes.cjs"),e=require("./media.cjs"),t=require("./token.cjs"),r=require("./merge.cjs");exports.keyframes=s.keyframes;exports.MediaQueryFactory=e.MediaQueryFactory;exports.media=e.media;exports.token=t.token;exports.mergeFactories=r.mergeFactories;exports.mergeObjects=r.mergeObjects;

package/css/index.d.ts

@@ -0,0 +1,4 @@
+export * from './keyframes';
+export * from './media';
+export * from './token';
+export * from './merge';

package/css/index.js

@@ -0,0 +1,12 @@
+import { keyframes as o } from "./keyframes.js";
+import { MediaQueryFactory as t, media as a } from "./media.js";
+import { token as p } from "./token.js";
+import { mergeFactories as c, mergeObjects as i } from "./merge.js";
+export {
+  t as MediaQueryFactory,
+  o as keyframes,
+  a as media,
+  c as mergeFactories,
+  i as mergeObjects,
+  p as token
+};

package/css/keyframes.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../parse-styles-B1E0JeC7.cjs"),O=require("../dash-case-BJEkFEGQ.cjs"),h=({animationName:l,params:y,appendInitialStyles:$,...t})=>{const i=async(d={})=>{const n=l||O.toHash(t),r=async()=>{const{duration:s="500ms",easing:e="ease-in-out",delay:o="0s",iterationCount:c="1",direction:g="normal",fillMode:b="forwards",playState:j="running"}={...y,...d},a=`${n} ${s} ${e} ${o} ${c} ${g} ${b} ${j}`;if(!$)return a;const m=t.from||t["0%"];if(!m)return a;const w=await u.parseAndJoinStyles(m,"");return`${a};${w}`},f=Object.entries(t).map(async([s,e])=>{if(!e)return"";const o=await u.parseAndJoinStyles(e,"");return`${typeof s=="number"?`${s}%`:s}{${o}}`}),S=(await Promise.all(f)).join(""),p=`@keyframes ${n} {${S}}`;return Object.assign(r,{toString:r,isKeyframes:!0,animationName:n,css:p,keyframes:t}),r};return Object.assign(i,{_shouldResolve:!0}),i};exports.keyframes=h;

package/css/keyframes.d.ts

@@ -0,0 +1,22 @@
+import { CssStyles, StyleValue } from '../types';
+type KeyframeKeys = number | 'from' | 'to' | `${number}%`;
+type Keyframes = {
+    [key in KeyframeKeys]?: CssStyles;
+};
+interface KeyframesConfig {
+    animationName?: string;
+    appendInitialStyles?: boolean;
+    params?: KeyframesParams;
+}
+interface KeyframesParams {
+    duration?: string;
+    delay?: string;
+    iterationCount?: string | number;
+    easing?: StyleValue<'animationTimingFunction'>;
+    direction?: StyleValue<'animationDirection'>;
+    fillMode?: StyleValue<'animationFillMode'>;
+    playState?: StyleValue<'animationPlayState'>;
+}
+type KeyframesProps = Keyframes & KeyframesConfig;
+export declare const keyframes: ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes }: KeyframesProps) => (params?: KeyframesParams) => Promise<() => Promise<string>>;
+export {};

package/css/keyframes.js

@@ -0,0 +1,39 @@
+import { p as $ } from "../parse-styles-y_-drahL.js";
+import { t as O } from "../dash-case-DBThphLm.js";
+const N = ({ animationName: u, params: f, appendInitialStyles: l, ...t }) => {
+  const i = async (y = {}) => {
+    const r = u || O(t), e = async () => {
+      const {
+        duration: s = "500ms",
+        easing: n = "ease-in-out",
+        delay: o = "0s",
+        iterationCount: c = "1",
+        direction: S = "normal",
+        fillMode: b = "forwards",
+        playState: j = "running"
+      } = { ...f, ...y }, a = `${r} ${s} ${n} ${o} ${c} ${S} ${b} ${j}`;
+      if (!l) return a;
+      const m = t.from || t["0%"];
+      if (!m) return a;
+      const w = await $(m, "");
+      return `${a};${w}`;
+    }, d = Object.entries(t).map(async ([s, n]) => {
+      if (!n) return "";
+      const o = await $(n, "");
+      return `${typeof s == "number" ? `${s}%` : s}{${o}}`;
+    }), p = (await Promise.all(d)).join(""), g = `@keyframes ${r} {${p}}`;
+    return Object.assign(e, {
+      toString: e,
+      isKeyframes: !0,
+      animationName: r,
+      css: g,
+      keyframes: t
+    }), e;
+  };
+  return Object.assign(i, {
+    _shouldResolve: !0
+  }), i;
+};
+export {
+  N as keyframes
+};

package/css/media.cjs

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var o=(s,e,t)=>e in s?a(s,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):s[e]=t;var i=(s,e,t)=>o(s,typeof e!="symbol"?e+"":e,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class r{constructor(e="@media"){i(this,"next",e=>{const t=new String(e);return Object.assign(t,{get isMedia(){return!0},get and(){return new r(`${e} and`)},get or(){return new r(`${e},`)}}),t});this.base=e}custom(e){return this.next(`${this.base} ${e}`)}minWidth(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (min-width: ${t})`;return this.next(n)}maxWidth(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (max-width: ${t})`;return this.next(n)}minHeight(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (min-height: ${t})`;return this.next(n)}maxHeight(e){const t=typeof e=="number"?`${e}px`:e,n=`${this.base} (max-height: ${t})`;return this.next(n)}get portrait(){const e=`${this.base} (orientation: portrait)`;return this.next(e)}get landscape(){const e=`${this.base} (orientation: landscape)`;return this.next(e)}prefersColorScheme(e){const t=`${this.base} (prefers-color-scheme: ${e})`;return this.next(t)}get dark(){return this.prefersColorScheme("dark")}get light(){return this.prefersColorScheme("light")}get print(){const e=`${this.base} print`;return this.next(e)}get screen(){const e=`${this.base} screen`;return this.next(e)}get speech(){const e=`${this.base} speech`;return this.next(e)}get all(){const e=`${this.base} all`;return this.next(e)}get not(){const e=`${this.base} not`;return this.next(e)}get reducedMotion(){const e=`${this.base} (prefers-reduced-motion: reduce)`;return this.next(e)}}const u=new r;exports.MediaQueryFactory=r;exports.media=u;

package/css/media.d.ts

@@ -0,0 +1,87 @@
+import { OrString, OrNumber } from '../types/util-types';
+export declare class MediaQueryFactory {
+    private base;
+    constructor(base?: string);
+    private next;
+    custom(value: string): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    minWidth(width: OrString | OrNumber): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    maxWidth(width: OrString | OrNumber): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    minHeight(height: OrString | OrNumber): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    maxHeight(height: OrString | OrNumber): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get portrait(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get landscape(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    prefersColorScheme(scheme: 'dark' | 'light' | OrString): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get dark(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get light(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get print(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get screen(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get speech(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get all(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get not(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+    get reducedMotion(): string & {
+        isMedia: boolean;
+        and: MediaQueryFactory;
+        or: MediaQueryFactory;
+    };
+}
+export declare const media: MediaQueryFactory;

package/css/media.js

@@ -0,0 +1,88 @@
+var a = Object.defineProperty;
+var o = (s, t, e) => t in s ? a(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var i = (s, t, e) => o(s, typeof t != "symbol" ? t + "" : t, e);
+class r {
+  constructor(t = "@media") {
+    i(this, "next", (t) => {
+      const e = new String(t);
+      return Object.assign(e, {
+        get isMedia() {
+          return !0;
+        },
+        get and() {
+          return new r(`${t} and`);
+        },
+        get or() {
+          return new r(`${t},`);
+        }
+      }), e;
+    });
+    this.base = t;
+  }
+  custom(t) {
+    return this.next(`${this.base} ${t}`);
+  }
+  minWidth(t) {
+    const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (min-width: ${e})`;
+    return this.next(n);
+  }
+  maxWidth(t) {
+    const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (max-width: ${e})`;
+    return this.next(n);
+  }
+  minHeight(t) {
+    const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (min-height: ${e})`;
+    return this.next(n);
+  }
+  maxHeight(t) {
+    const e = typeof t == "number" ? `${t}px` : t, n = `${this.base} (max-height: ${e})`;
+    return this.next(n);
+  }
+  get portrait() {
+    const t = `${this.base} (orientation: portrait)`;
+    return this.next(t);
+  }
+  get landscape() {
+    const t = `${this.base} (orientation: landscape)`;
+    return this.next(t);
+  }
+  prefersColorScheme(t) {
+    const e = `${this.base} (prefers-color-scheme: ${t})`;
+    return this.next(e);
+  }
+  get dark() {
+    return this.prefersColorScheme("dark");
+  }
+  get light() {
+    return this.prefersColorScheme("light");
+  }
+  get print() {
+    const t = `${this.base} print`;
+    return this.next(t);
+  }
+  get screen() {
+    const t = `${this.base} screen`;
+    return this.next(t);
+  }
+  get speech() {
+    const t = `${this.base} speech`;
+    return this.next(t);
+  }
+  get all() {
+    const t = `${this.base} all`;
+    return this.next(t);
+  }
+  get not() {
+    const t = `${this.base} not`;
+    return this.next(t);
+  }
+  get reducedMotion() {
+    const t = `${this.base} (prefers-reduced-motion: reduce)`;
+    return this.next(t);
+  }
+}
+const u = new r();
+export {
+  r as MediaQueryFactory,
+  u as media
+};