@salty-css/core 0.0.1-alpha.13 → 0.0.1-alpha.131

package/compiler/index.js

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

package/config/config-types.d.ts

@@ -1,7 +1,6 @@
-import { CssStyles } from '../types';
-type CssTemplate = CssStyles | {
-    [key: PropertyKey]: CssTemplate;
-};
+import { CssProperties, CssStyles } from '../types';
+import { OrString } from '../types/util-types';
+export type GlobalStyles = Record<string, CssProperties>;
 export type CssVariables = Record<string, unknown>;
 export interface CssResponsiveVariables {
     [key: string]: CssVariables;
@@ -11,6 +10,9 @@ export interface CssConditionalVariables {
         [key: PropertyKey]: CssVariables;
     };
 }
+type CssTemplate = CssStyles | {
+    [key: PropertyKey]: CssTemplate;
+};
 export interface CssTemplates {
     [key: PropertyKey]: {
         [key: PropertyKey]: CssTemplate;
@@ -46,7 +48,11 @@ export interface SaltyConfig {
     /**
      * The global styles that are imported in the root of the project.
      */
-    global?: CssStyles;
+    reset?: 'default' | 'none' | GlobalStyles;
+    /**
+     * The global styles that are imported in the root of the project.
+     */
+    global?: GlobalStyles;
     /**
      * The templates that can be used in styles to create reusable css.
      */
@@ -55,5 +61,9 @@ export interface SaltyConfig {
      * The modifiers that can transform css values.
      */
     modifiers?: CssModifiers;
+    /**
+     * Define modules that should not be bundled when generating the css file. This improves the performance of the css generation and can help with issues relared to external packages being imported in an environment that does not support them.
+     */
+    externalModules?: ('react' | 'react-dom' | OrString)[];
 }
 export {};

package/dash-case-BJEkFEGQ.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=5)=>{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/dash-case-DBThphLm.js

@@ -0,0 +1,19 @@
+const n = (e) => String.fromCharCode(e + (e > 25 ? 39 : 97)), o = (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;
+}, i = (e, r) => {
+  let t = r.length;
+  for (; t; ) e = e * 33 ^ r.charCodeAt(--t);
+  return e;
+}, c = (e, r = 5) => {
+  const t = i(5381, JSON.stringify(e)) >>> 0;
+  return o(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()) : "";
+}
+export {
+  s as d,
+  c as t
+};

package/generator/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("../util/index.cjs"),i=require("../parse-templates-BY1Xai-_.cjs");class o{constructor(t,s){this.tagName=t,this.params=s}get hash(){return n.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?i.getTemplateKeys(this._context.config.templates):[]}get css(){var a;const{base:t={},variants:s={},compoundVariants:e=[]}=this.params,r={...t,variants:s,compoundVariants:e};return i.parseStyles(r,`.${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(e=>{var a;const r=(a=this.params.defaultVariants)==null?void 0:a[e];return r!==void 0?`${e}=${String(r)}`:e}):void 0;return{element:t,variantKeys:s}}_withBuildContext(t){this._context=t;const{name:s,config:e}=t;return this._callerName=s,this}}exports.StyleComponentGenerator=o;
+"use strict";var y=Object.defineProperty;var f=(a,t,s)=>t in a?y(a,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):a[t]=s;var c=(a,t,s)=>f(a,typeof t!="symbol"?t+"":t,s);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../dash-case-BJEkFEGQ.cjs"),u=require("../parse-templates-DdYSw-iq.cjs");class N{constructor(t,s){c(this,"_isProd");c(this,"_callerName");c(this,"_context");this.tagName=t,this.params=s}get hash(){return d.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 cssFileName(){return this._callerName?`c_${d.dashCase(this._callerName)}-${this.hash}-${this.priority}.css`:`${this.hash}-${this.priority}.css`}get templateKeys(){var t;return(t=this._context)!=null&&t.config.templates?u.getTemplateKeys(this._context.config.templates):[]}get css(){var n;const{base:t={},variants:s={},compoundVariants:i=[]}=this.params,r={...t,variants:s,compoundVariants:i};return u.parseStyles(r,`.${this.cssClassName}`,this.priority,(n=this._context)==null?void 0:n.config)}get props(){const{element:t,variants:s={},compoundVariants:i=[],defaultVariants:r={},defaultProps:n={},passProps:g}=this.params,h=new Set([]),p=e=>{const o=r[e];o!==void 0?h.add(`${e}=${String(o)}`):h.add(e)};Object.keys(s).forEach(p),i.map(e=>Object.keys(e).forEach(p));const l=new Set([]);if(this.params.base){const e=JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);e&&e.forEach(o=>{const m=o.replace(/\{props\.([\w\d]+)\}/gi,"$1");m&&l.add(m)})}return{element:t,variantKeys:[...h],propValueKeys:[...l],passProps:g,defaultProps:n,attr:{"data-component-name":this._isProd?void 0:this._callerName}}}_withBuildContext(t){this._context=t;const{name:s,config:i,prod:r}=t;return this._isProd=r,this._callerName=s,this}}exports.StyleComponentGenerator=N;

package/generator/index.js

@@ -1,11 +1,17 @@
-import { toHash as i } from "../util/index.js";
-import { g as n, p as o } from "../parse-templates-BOSK0Tb6.js";
-class p {
+var u = Object.defineProperty;
+var f = (a, t, s) => t in a ? u(a, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : a[t] = s;
+var c = (a, t, s) => f(a, typeof t != "symbol" ? t + "" : t, s);
+import { t as g, d as y } from "../dash-case-DBThphLm.js";
+import { g as N, p as _ } from "../parse-templates-DnLWJ7Hc.js";
+class v {
   constructor(t, s) {
+    c(this, "_isProd");
+    c(this, "_callerName");
+    c(this, "_context");
     this.tagName = t, this.params = s;
   }
   get hash() {
-    return i(this.params.base || this.params);
+    return g(this.params.base || this.params);
   }
   get priority() {
     var t;
@@ -21,32 +27,49 @@ class p {
   get cssDisplayNameVar() {
     return `--${this.hash}-display-name: ${this._callerName};`;
   }
+  get cssFileName() {
+    return this._callerName ? `c_${y(this._callerName)}-${this.hash}-${this.priority}.css` : `${this.hash}-${this.priority}.css`;
+  }
   get templateKeys() {
     var t;
-    return (t = this._context) != null && t.config.templates ? n(this._context.config.templates) : [];
+    return (t = this._context) != null && t.config.templates ? N(this._context.config.templates) : [];
   }
   get css() {
-    var e;
-    const { base: t = {}, variants: s = {}, compoundVariants: a = [] } = this.params, r = { ...t, variants: s, compoundVariants: a };
-    return o(r, `.${this.cssClassName}`, this.priority, (e = this._context) == null ? void 0 : e.config);
+    var n;
+    const { base: t = {}, variants: s = {}, compoundVariants: i = [] } = this.params, r = { ...t, variants: s, compoundVariants: i };
+    return _(r, `.${this.cssClassName}`, this.priority, (n = this._context) == null ? void 0 : n.config);
   }
   get props() {
-    const { element: t } = this.params, s = this.params.variants ? Object.keys(this.params.variants).map((a) => {
-      var e;
-      const r = (e = this.params.defaultVariants) == null ? void 0 : e[a];
-      return r !== void 0 ? `${a}=${String(r)}` : a;
-    }) : void 0;
+    const { element: t, variants: s = {}, compoundVariants: i = [], defaultVariants: r = {}, defaultProps: n = {}, passProps: d } = this.params, h = /* @__PURE__ */ new Set([]), p = (e) => {
+      const o = r[e];
+      o !== void 0 ? h.add(`${e}=${String(o)}`) : h.add(e);
+    };
+    Object.keys(s).forEach(p), i.map((e) => Object.keys(e).forEach(p));
+    const m = /* @__PURE__ */ new Set([]);
+    if (this.params.base) {
+      const e = JSON.stringify(this.params.base).match(/\{props\.([\w\d]+)\}/gi);
+      e && e.forEach((o) => {
+        const l = o.replace(/\{props\.([\w\d]+)\}/gi, "$1");
+        l && m.add(l);
+      });
+    }
     return {
       element: t,
-      variantKeys: s
+      variantKeys: [...h],
+      propValueKeys: [...m],
+      passProps: d,
+      defaultProps: n,
+      attr: {
+        "data-component-name": this._isProd ? void 0 : this._callerName
+      }
     };
   }
   _withBuildContext(t) {
     this._context = t;
-    const { name: s, config: a } = t;
-    return this._callerName = s, this;
+    const { name: s, config: i, prod: r } = t;
+    return this._isProd = r, this._callerName = s, this;
   }
 }
 export {
-  p as StyleComponentGenerator
+  v as StyleComponentGenerator
 };

package/generator/parse-templates.d.ts

@@ -1,2 +1,4 @@
 export declare const parseTemplates: <T extends object>(obj: T, path?: PropertyKey[]) => string;
 export declare const getTemplateKeys: <T extends object>(templates: T) => string[];
+export declare const getTemplateTypes: <T extends object>(templates: T) => Record<string, string>;
+export declare const getTemplateTokens: <T extends object>(templates: T, parent?: string, templateTokens?: Set<string>) => string[];

package/generator/style-generator.d.ts

@@ -1,7 +1,18 @@
 import { StyledParams, Tag } from '../types';
+export interface GeneratorProps {
+    element?: string;
+    variantKeys?: string[];
+    propValueKeys?: string[];
+    passProps?: boolean | string | string[];
+    defaultProps?: Record<PropertyKey, unknown>;
+    attr: {
+        [key: string]: any;
+    };
+}
 export declare class StyleComponentGenerator {
     tagName: Tag<any>;
     params: StyledParams;
+    _isProd: boolean | undefined;
     _callerName: string | undefined;
     _context: {
         name: string;
@@ -13,14 +24,13 @@ export declare class StyleComponentGenerator {
     get classNames(): string;
     get cssClassName(): string;
     get cssDisplayNameVar(): string;
+    get cssFileName(): string;
     get templateKeys(): string[];
     get css(): string;
-    get props(): {
-        element: string | undefined;
-        variantKeys: string[] | undefined;
-    };
+    get props(): GeneratorProps;
     _withBuildContext(context: {
         name: string;
         config: any;
+        prod: boolean;
     }): this;
 }

package/index-84Wroia-.cjs

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