@salty-css/core 0.0.1-alpha.1 → 0.0.1-alpha.11

package/README.md

@@ -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/compiler/index.cjs

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

package/compiler/index.d.ts

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

package/compiler/index.js

@@ -0,0 +1,182 @@
+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);
+  }
+};
+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
+};

package/config/config-types.d.ts

@@ -0,0 +1,59 @@
+import { CssStyles } from '../types';
+type CssTemplate = CssStyles | {
+    [key: PropertyKey]: CssTemplate;
+};
+export type CssVariables = Record<string, unknown>;
+export interface CssResponsiveVariables {
+    [key: string]: CssVariables;
+}
+export interface CssConditionalVariables {
+    [key: PropertyKey]: {
+        [key: PropertyKey]: CssVariables;
+    };
+}
+export interface CssTemplates {
+    [key: PropertyKey]: {
+        [key: PropertyKey]: CssTemplate;
+    };
+}
+export interface CssModifier {
+    pattern: RegExp;
+    transform: (regexMatch: string) => {
+        css?: CssStyles;
+        value: string;
+    };
+}
+export type CssModifiers = Record<string, CssModifier>;
+export interface SaltyConfig {
+    /**
+     * The import strategy to use when importing css files.
+     * - `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';
+    /**
+     * Base variables that can be used in all styles as they are applied globally to :root.
+     */
+    variables?: CssVariables;
+    /**
+     * Variables that are defined for different media queries.
+     */
+    responsiveVariables?: CssResponsiveVariables;
+    /**
+     * Variables that are defined for different parent selectors (classes or data attributes).
+     */
+    conditionalVariables?: CssConditionalVariables;
+    /**
+     * The global styles that are imported in the root of the project.
+     */
+    global?: CssStyles;
+    /**
+     * The templates that can be used in styles to create reusable css.
+     */
+    templates?: CssTemplates;
+    /**
+     * The modifiers that can transform css values.
+     */
+    modifiers?: CssModifiers;
+}
+export {};

package/config/define-config.d.ts

@@ -0,0 +1,2 @@
+import { SaltyConfig } from './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 n=e=>e;exports.defineConfig=n;

package/config/index.d.ts

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

package/config/index.js

@@ -0,0 +1,4 @@
+const n = (e) => e;
+export {
+  n as defineConfig
+};

package/css/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=e=>`{${e}}`;exports.token=t;

package/css/index.d.ts

@@ -0,0 +1 @@
+export declare const token: <T extends VariableTokens>(token: T) => string;

package/css/index.js

@@ -0,0 +1,4 @@
+const t = (o) => `{${o}}`;
+export {
+  t as token
+};

package/eslint/index.cjs

@@ -0,0 +1 @@
+"use strict";const l=require("../compiler/index.cjs"),c={meta:{type:"problem",docs:{description:"Ensure `variants` are not nested inside `base` in styled calls",category:"Errors",recommended:!0},messages:{nestedVariants:"`variants` should not be nested inside `base`."}},create(r){return l.isSaltyFile(r.filename)?{CallExpression:o=>{try{const{callee:s,arguments:d}=o;if(!(s.type==="Identifier"&&s.name==="styled"))return;const t=d[0];if(!t||!(t.type==="ObjectExpression"))return;const n=t.properties.find(e=>e.type==="Property"&&e.key.type==="Identifier"&&e.key.name==="base");if(!n)return;const{value:a}=n;if(!(a.type==="ObjectExpression"))return;const i=a.properties.find(e=>e.type==="Property"&&e.key.type==="Identifier"&&e.key.name==="variants");if(!i)return;r.report({node:i,messageId:"nestedVariants"})}catch(s){console.log("ESlint error",s);return}}}:{}}},y={rules:{"no-variants-in-base":c}};module.exports=y;

package/eslint/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    rules: {
+        'no-variants-in-base': import("eslint").Rule.RuleModule;
+    };
+};
+export default _default;

package/eslint/index.js

@@ -0,0 +1,48 @@
+import { isSaltyFile as l } from "../compiler/index.js";
+const y = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Ensure `variants` are not nested inside `base` in styled calls",
+      category: "Errors",
+      recommended: !0
+    },
+    messages: {
+      nestedVariants: "`variants` should not be nested inside `base`."
+    }
+  },
+  create(r) {
+    return l(r.filename) ? {
+      CallExpression: (o) => {
+        try {
+          const { callee: s, arguments: d } = o;
+          if (!(s.type === "Identifier" && s.name === "styled")) return;
+          const t = d[0];
+          if (!t || !(t.type === "ObjectExpression")) return;
+          const n = t.properties.find((e) => e.type === "Property" && e.key.type === "Identifier" && e.key.name === "base");
+          if (!n) return;
+          const { value: a } = n;
+          if (!(a.type === "ObjectExpression")) return;
+          const i = a.properties.find(
+            (e) => e.type === "Property" && e.key.type === "Identifier" && e.key.name === "variants"
+          );
+          if (!i) return;
+          r.report({
+            node: i,
+            messageId: "nestedVariants"
+          });
+        } catch (s) {
+          console.log("ESlint error", s);
+          return;
+        }
+      }
+    } : {};
+  }
+}, b = {
+  rules: {
+    "no-variants-in-base": y
+  }
+};
+export {
+  b as default
+};

package/eslint/rules/no-variants-in-base.d.ts

@@ -0,0 +1,2 @@
+import { Rule } from 'eslint';
+export declare const noVariantsInBase: Rule.RuleModule;

package/generator/index.cjs

@@ -0,0 +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;

package/generator/index.d.ts

@@ -0,0 +1 @@
+export * from './style-generator';

package/generator/index.js

@@ -0,0 +1,52 @@
+import { toHash as i } from "../util/index.js";
+import { g as n, p as o } from "../parse-templates-BOSK0Tb6.js";
+class p {
+  constructor(t, s) {
+    this.tagName = t, this.params = s;
+  }
+  get hash() {
+    return i(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 ? 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);
+  }
+  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;
+    return {
+      element: t,
+      variantKeys: s
+    };
+  }
+  _withBuildContext(t) {
+    this._context = t;
+    const { name: s, config: a } = t;
+    return this._callerName = s, this;
+  }
+}
+export {
+  p as StyleComponentGenerator
+};

package/generator/parse-modifiers.d.ts

@@ -0,0 +1,3 @@
+import { CssModifiers } from '../config/config-types';
+import { ValueParserReturnValue } from './parser-types';
+export declare const parseValueModifiers: (value: string, modifiers?: CssModifiers) => ValueParserReturnValue;

package/generator/parse-styles.d.ts

@@ -0,0 +1,2 @@
+import { SaltyConfig } from '../config/config-types';
+export declare const parseStyles: <T extends object>(styles: T, currentClass: string, layer?: number, config?: SaltyConfig | undefined) => string;

package/generator/parse-templates.d.ts

@@ -0,0 +1,2 @@
+export declare const parseTemplates: <T extends object>(obj: T, path?: PropertyKey[]) => string;
+export declare const getTemplateKeys: <T extends object>(templates: T) => string[];

package/generator/parse-tokens.d.ts

@@ -0,0 +1,2 @@
+import { ValueParserReturnValue } from './parser-types';
+export declare const parseValueTokens: (value: string) => ValueParserReturnValue;

package/generator/parser-types.d.ts

@@ -0,0 +1,4 @@
+export interface ValueParserReturnValue {
+    result: string;
+    additionalCss?: Object[];
+}

package/generator/style-generator.d.ts

@@ -0,0 +1,26 @@
+import { StyledParams, Tag } from '../types';
+export declare class StyleComponentGenerator {
+    tagName: Tag<any>;
+    params: StyledParams;
+    _callerName: string | undefined;
+    _context: {
+        name: string;
+        config: any;
+    } | undefined;
+    constructor(tagName: Tag<any>, params: StyledParams);
+    get hash(): string;
+    get priority(): number;
+    get classNames(): string;
+    get cssClassName(): string;
+    get cssDisplayNameVar(): string;
+    get templateKeys(): string[];
+    get css(): string;
+    get props(): {
+        element: string | undefined;
+        variantKeys: string[] | undefined;
+    };
+    _withBuildContext(context: {
+        name: string;
+        config: any;
+    }): this;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/core",
-  "version": "0.0.1-alpha.1",
+  "version": "0.0.1-alpha.11",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -15,36 +15,43 @@
     "url": "https://github.com/margarita-form/salty-css/issues"
   },
   "files": [
-    "dist",
+    "**/*",
     "!**/*.tsbuildinfo"
   ],
   "nx": {
+    "sourceRoot": "libs/core/src",
     "name": "core"
   },
+  "peerDependencies": {
+    "esbuild": "0.21.x",
+    "eslint": "^9.x",
+    "react": "^18.x",
+    "winston": ">=3.x"
+  },
   "exports": {
-    ".": {
-      "import": "./index.js",
-      "require": "./index.cjs"
+    "./compiler": {
+      "import": "./compiler/index.js",
+      "require": "./compiler/index.cjs"
     },
-    "./react/styled": {
-      "import": "./react/styled.js",
-      "require": "./react/styled.cjs"
+    "./css": {
+      "import": "./css/index.js",
+      "require": "./css/index.cjs"
     },
-    "./react/styled-client": {
-      "import": "./react/styled-client.js",
-      "require": "./react/styled-client.cjs"
+    "./generator": {
+      "import": "./generator/index.js",
+      "require": "./generator/index.cjs"
     },
-    "./react/css-helpers": {
-      "import": "./react/css-helpers.js",
-      "require": "./react/css-helpers.cjs"
+    "./config": {
+      "import": "./config/index.js",
+      "require": "./config/index.cjs"
     },
-    "./vite": {
-      "import": "./vite/index.js",
-      "require": "./vite/index.cjs"
+    "./types": {
+      "import": "./types/index.js",
+      "require": "./types/index.cjs"
     },
-    "./webpack/salty-loader": {
-      "import": "./webpack/salty-loader.js",
-      "require": "./webpack/salty-loader.cjs"
+    "./util": {
+      "import": "./util/index.js",
+      "require": "./util/index.cjs"
     }
   }
 }

package/parse-templates-BOSK0Tb6.js

@@ -0,0 +1,90 @@
+import { dashCase as O } from "./util/index.js";
+const N = (s, r) => {
+  if (typeof s != "string") return { result: s };
+  if (!r) return { result: s };
+  const e = [];
+  return Object.values(r).forEach((n) => {
+    const { pattern: o, transform: c } = n;
+    s = s.replace(o, (h) => {
+      const { value: i, css: m } = c(h);
+      return m && e.push(m), i;
+    });
+  }), { result: s, additionalCss: e };
+}, P = (s) => typeof s != "string" ? { result: s } : /\{[^{}]+\}/g.test(s) ? { result: s.replace(/\{([^{}]+)\}/g, (...n) => `var(--${O(n[1].replaceAll(".", "-"))})`) } : { result: s }, d = (s, r, e, n) => {
+  const o = [], c = Object.entries(s).reduce((i, [m, t]) => {
+    const p = m.trim();
+    if (typeof t == "function" && (t = t()), typeof t == "object") {
+      if (!t) return i;
+      if (p === "variants")
+        return Object.entries(t).forEach(([u, f]) => {
+          f && Object.entries(f).forEach(([b, j]) => {
+            if (!j) return;
+            const l = `${r}.${u}-${b}`, y = d(j, l, e);
+            o.push(y);
+          });
+        }), i;
+      if (p === "defaultVariants")
+        return i;
+      if (p === "compoundVariants")
+        return t.forEach((u) => {
+          const { css: f, ...b } = u, j = Object.entries(b).reduce((y, [V, W]) => `${y}.${V}-${W}`, r), l = d(f, j, e);
+          o.push(l);
+        }), i;
+      if (p.startsWith("@")) {
+        const u = d(t, r, e), f = `${p} {
+ ${u.replace(`
+`, `
+ `)}
+}`;
+        return o.push(f), i;
+      }
+      const $ = m.includes("&") ? p.replace("&", r) : p.startsWith(":") ? `${r}${p}` : `${r} ${p}`, a = d(t, $, e);
+      return o.push(a), i;
+    }
+    if (n != null && n.templates && n.templates[p]) {
+      const a = t.split(".").reduce((f, b) => f[b], n.templates[p]), u = d(a, "");
+      return `${i}${u}`;
+    }
+    const g = p.startsWith("-") ? p : O(p), E = ($, a = ";") => i = `${i}${$}${a}`, S = ($) => E(`${g}:${$}`);
+    if (typeof t == "number") return S(t);
+    if (typeof t != "string")
+      if ("toString" in t) t = t.toString();
+      else return i;
+    const { modifiers: k } = n || {}, T = function* () {
+      yield P(t), yield N(t, k);
+    }();
+    for (const { result: $, additionalCss: a = [] } of T)
+      t = $, a.forEach((u) => {
+        const f = d(u, "");
+        E(f, "");
+      });
+    return S(t);
+  }, "");
+  if (!c) return o.join(`
+`);
+  if (!r) return c;
+  let h = "";
+  return e !== void 0 ? h = `@layer l${e} { ${r} { ${c} } }` : h = `${r} { ${c} }`, [h, ...o].join(`
+`);
+}, _ = (s, r = []) => {
+  const e = [], n = {};
+  if (Object.entries(s).forEach(([o, c]) => {
+    if (typeof c == "object") {
+      if (!c) return;
+      const h = o.trim(), i = _(c, [...r, h]);
+      e.push(i);
+    } else
+      n[o] = c;
+  }), Object.keys(n).length) {
+    const o = r.map(O).join("-"), c = d(n, `.${o}`);
+    e.push(c);
+  }
+  return e.join(`
+`);
+}, A = (s) => Object.keys(s);
+export {
+  _ as a,
+  P as b,
+  A as g,
+  d as p
+};

package/parse-templates-BY1Xai-_.cjs

@@ -0,0 +1,8 @@
+"use strict";const O=require("./util/index.cjs"),K=(s,e)=>{if(typeof s!="string")return{result:s};if(!e)return{result:s};const r=[];return Object.values(e).forEach(n=>{const{pattern:o,transform:c}=n;s=s.replace(o,a=>{const{value:i,css:l}=c(a);return l&&r.push(l),i})}),{result:s,additionalCss:r}},k=s=>typeof s!="string"?{result:s}:/\{[^{}]+\}/g.test(s)?{result:s.replace(/\{([^{}]+)\}/g,(...n)=>`var(--${O.dashCase(n[1].replaceAll(".","-"))})`)}:{result:s},h=(s,e,r,n)=>{const o=[],c=Object.entries(s).reduce((i,[l,t])=>{const p=l.trim();if(typeof t=="function"&&(t=t()),typeof t=="object"){if(!t)return i;if(p==="variants")return Object.entries(t).forEach(([u,f])=>{f&&Object.entries(f).forEach(([m,j])=>{if(!j)return;const y=`${e}.${u}-${m}`,b=h(j,y,r);o.push(b)})}),i;if(p==="defaultVariants")return i;if(p==="compoundVariants")return t.forEach(u=>{const{css:f,...m}=u,j=Object.entries(m).reduce((b,[_,q])=>`${b}.${_}-${q}`,e),y=h(f,j,r);o.push(y)}),i;if(p.startsWith("@")){const u=h(t,e,r),f=`${p} {
+ ${u.replace(`
+`,`
+ `)}
+}`;return o.push(f),i}const $=l.includes("&")?p.replace("&",e):p.startsWith(":")?`${e}${p}`:`${e} ${p}`,d=h(t,$,r);return o.push(d),i}if(n!=null&&n.templates&&n.templates[p]){const d=t.split(".").reduce((f,m)=>f[m],n.templates[p]),u=h(d,"");return`${i}${u}`}const V=p.startsWith("-")?p:O.dashCase(p),T=($,d=";")=>i=`${i}${$}${d}`,S=$=>T(`${V}:${$}`);if(typeof t=="number")return S(t);if(typeof t!="string")if("toString"in t)t=t.toString();else return i;const{modifiers:g}=n||{},W=function*(){yield k(t),yield K(t,g)}();for(const{result:$,additionalCss:d=[]}of W)t=$,d.forEach(u=>{const f=h(u,"");T(f,"")});return S(t)},"");if(!c)return o.join(`
+`);if(!e)return c;let a="";return r!==void 0?a=`@layer l${r} { ${e} { ${c} } }`:a=`${e} { ${c} }`,[a,...o].join(`
+`)},E=(s,e=[])=>{const r=[],n={};if(Object.entries(s).forEach(([o,c])=>{if(typeof c=="object"){if(!c)return;const a=o.trim(),i=E(c,[...e,a]);r.push(i)}else n[o]=c}),Object.keys(n).length){const o=e.map(O.dashCase).join("-"),c=h(n,`.${o}`);r.push(c)}return r.join(`
+`)},N=s=>Object.keys(s);exports.getTemplateKeys=N;exports.parseStyles=h;exports.parseTemplates=E;exports.parseValueTokens=k;

package/types/index.cjs

@@ -0,0 +1 @@
+"use strict";

package/types/index.d.ts

@@ -0,0 +1,62 @@
+import { AllHTMLAttributes, ReactDOM, ReactNode } from 'react';
+import { StyleComponentGenerator } from '../generator';
+import { OrString } from './util-types';
+export type CreateElementProps = {
+    extend?: Tag<any>;
+    children?: ReactNode;
+    className?: string;
+    element?: string;
+    passVariantProps?: boolean;
+    style?: any;
+    /** vks = Variant key set */
+    _vks?: Set<string>;
+};
+export type StyledComponentProps = Record<string, unknown> & CreateElementProps & CssRuntimeValues;
+type FnComponent<PROPS extends StyledComponentProps> = {
+    (props: PROPS): ReactNode;
+    generator?: StyleComponentGenerator;
+};
+export type Tag<PROPS extends StyledComponentProps> = OrString | keyof ReactDOM | FnComponent<PROPS>;
+export type CompoundVariant = {
+    [key: PropertyKey]: any;
+    css: CssStyles;
+};
+type InvalidVariantKeys = keyof AllHTMLAttributes<HTMLElement>;
+type StyleKeys = keyof Required<AllHTMLAttributes<HTMLElement>>['style'];
+export type StyleValue<K extends string> = K extends StyleKeys ? Required<AllHTMLAttributes<HTMLElement>>['style'][K] : never;
+type VariantOptions = {
+    [key in InvalidVariantKeys]?: never;
+};
+type Variants = {
+    variants?: VariantOptions & {
+        [key: PropertyKey]: {
+            [key: string]: Styles;
+        };
+    };
+    defaultVariants?: {
+        [key: PropertyKey]: any;
+    };
+    compoundVariants?: CompoundVariant[];
+};
+type VariantPropValue<T> = T extends 'true' ? 'true' | true : T;
+export type VariantProps<STYLES extends StyledParams> = STYLES['variants'] extends undefined ? {} : {
+    [K in keyof STYLES['variants']]?: VariantPropValue<keyof STYLES['variants'][K]> | '';
+};
+export type ParentComponentProps<TAG extends Tag<any>> = TAG extends (props: infer P) => ReactNode ? P : unknown;
+export type CssRuntimeValues = {
+    cssValues?: Record<string, unknown>;
+};
+type StylePropertyValue = Record<never, never> & unknown;
+export type CssStyles = {
+    [key in StyleKeys | OrString]?: StyleValue<key> | StylePropertyValue | PropertyValueToken | CssStyles;
+};
+export type Styles = CssStyles & Variants;
+export interface GeneratorOptions {
+    className?: string;
+    displayName?: string;
+    element?: string;
+}
+export interface StyledParams extends GeneratorOptions, Variants {
+    base?: CssStyles;
+}
+export {};

package/types/index.js

@@ -0,0 +1 @@
+

package/types/util-types.d.ts

@@ -0,0 +1,13 @@
+export type CommonRecord<TYPE = unknown> = Record<PropertyKey, TYPE>;
+export type IsUnion<T, U extends T = T> = T extends unknown ? ([U] extends [T] ? false : true) : false;
+export type IsSpecifiedString<T> = T extends string ? (string extends T ? false : true) : false;
+export type NeverObj = Record<never, never>;
+export type OrAny = any & NeverObj;
+export type NotFunction = string | number | boolean | object | null | undefined | CommonRecord;
+export type OrT<T> = T & NeverObj;
+export type OrString = OrT<string>;
+export type OrNumber = OrT<number>;
+export type ReplaceAny<TYPE, WITH = unknown> = TYPE extends any ? WITH : TYPE;
+export type BothTrue<T, U> = T extends true ? (U extends true ? true : false) : false;
+export type EitherTrue<T, U> = T extends true ? true : U extends true ? true : false;
+export type Tail<T extends any[]> = ((...args: T) => any) extends (arg: any, ...rest: infer R) => any ? R : never;

package/util/dash-case.d.ts

@@ -0,0 +1 @@
+export declare function dashCase(str: PropertyKey): string;

package/util/index.cjs

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

package/util/index.d.ts

@@ -0,0 +1,2 @@
+export * from './dash-case';
+export * from './to-hash';

package/util/index.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;
+}, s = (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()) : "";
+}
+export {
+  c as dashCase,
+  s as toHash
+};

package/util/to-hash.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Create unique hash string from any value
+ */
+export declare const toHash: (value: unknown, length?: number) => string;