@salty-css/core 0.0.1-alpha.29 → 0.0.1-alpha.292

package/types/index.d.ts

@@ -1,36 +1,44 @@
-import { AllHTMLAttributes, ReactDOM, ReactNode } from 'react';
-import { StyleComponentGenerator } from '../generator';
-import { OrString } from './util-types';
+import { ReactNode } from 'react';
+import { NeverObj, OrAny, OrString } from './util-types';
+import { StyledGenerator } from '../generators';
+import type * as CSS from 'csstype';
 export type CreateElementProps = {
     extend?: Tag<any>;
     children?: ReactNode;
     className?: string;
     element?: string;
-    passVariantProps?: boolean;
-    style?: any;
+    passProps?: boolean | string | string[];
+    style?: CssProperties | {
+        [key: string]: PropertyValueToken | NeverObj;
+    };
     /** vks = Variant key set */
     _vks?: Set<string>;
 };
 export type StyledComponentProps = Record<string, unknown> & CreateElementProps;
 type FnComponent<PROPS extends StyledComponentProps> = {
-    (props: PROPS): ReactNode;
-    generator?: StyleComponentGenerator;
+    (props: OrAny | PROPS): ReactNode;
+    generator?: StyledGenerator;
 };
-export type Tag<PROPS extends StyledComponentProps> = OrString | keyof ReactDOM | FnComponent<PROPS>;
-export type CompoundVariant = {
-    [key: PropertyKey]: any;
-    css: CssStyles;
+export type Tag<PROPS extends StyledComponentProps> = OrString | keyof HTMLElementTagNameMap | FnComponent<PROPS>;
+type CSSPropertyValueFunction = (params?: any) => any;
+export type CssProperties = {
+    [key in keyof CSS.Properties]: CSS.Properties[key] | PropertyValueToken | CSSPropertyValueFunction | NeverObj;
 };
-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 CssPropertyKeys = keyof CssProperties;
+export type StyleValue<K extends string> = K extends CssPropertyKeys ? CssProperties[K] : never;
+type InvalidVariantKeys = '' | 'css';
 type VariantOptions = {
     [key in InvalidVariantKeys]?: never;
 };
+export type CompoundVariant = {
+    [key: PropertyKey]: string | boolean | undefined;
+} | {
+    css: CSSinJS;
+};
 type Variants = {
     variants?: VariantOptions & {
         [key: PropertyKey]: {
-            [key: string]: Styles;
+            [key: PropertyKey]: CSSinJS;
         };
     };
     defaultVariants?: {
@@ -38,26 +46,49 @@ type Variants = {
     };
     compoundVariants?: CompoundVariant[];
 };
-type VariantPropValue<T> = T extends 'true' ? 'true' | true : T;
-export type VariantProps<STYLES extends StyledParams> = STYLES['variants'] extends undefined ? object : {
-    [K in keyof STYLES['variants']]?: VariantPropValue<keyof STYLES['variants'][K]> | '';
+type BooleanVariantValue = 'true' | 'false' | boolean;
+type VariantPropValue<T> = T extends 'true' ? BooleanVariantValue : T extends 'false' ? BooleanVariantValue : T extends boolean ? BooleanVariantValue : T | '';
+type PickType<T, K extends AllKeys<T>> = T extends {
+    [k in K]?: any;
+} ? T[K] : undefined;
+type AllKeys<T> = T extends any ? keyof T : never;
+export type Merge<T> = {
+    [k in AllKeys<T>]?: PickType<T, k>;
 };
+export type VariantProps<STYLES extends StyledParams, B = STYLES['variants'] extends undefined ? object : STYLES['variants'], C = STYLES['compoundVariants'] extends CompoundVariant[] ? Merge<STYLES['compoundVariants'][number]> : object> = Merge<{
+    [K in keyof B]?: K extends 'css' ? never : VariantPropValue<keyof B[K]>;
+} | {
+    [K in keyof C]?: K extends 'css' ? never : VariantPropValue<C[K]>;
+}>;
 type CssValuePropKey = `props-${string}`;
 export type ValueProps = {
     [key: CssValuePropKey]: string;
 };
-export type ParentComponentProps<TAG extends Tag<any>> = TAG extends (props: infer P) => ReactNode ? P : unknown;
+export type ParentComponentProps<TAG extends Tag<any>> = TAG extends (props: infer P) => ReactNode ? P : object;
 type StylePropertyValue = Record<never, never> & unknown;
+export type CSSinJS = CssProperties | StylePropertyValue | TemplateTokens | CssPseudos;
 export type CssStyles = {
-    [key in StyleKeys | OrString]?: StyleValue<key> | StylePropertyValue | PropertyValueToken | CssStyles;
+    [key in OrString]?: CSSinJS | CssStyles;
 };
 export type Styles = CssStyles & Variants;
+export type MediaQueryStyles = {
+    [key in MediaQueryKeys]?: CssProperties | CssStyles | CssPseudos | TemplateTokens | MediaQueryStyles;
+};
 export interface GeneratorOptions {
-    className?: string;
+    className?: string | string[];
     displayName?: string;
     element?: string;
+    passProps?: boolean | string | string[];
+    defaultProps?: Record<PropertyKey, unknown>;
+    priority?: number;
 }
+export interface BaseStyles extends CssProperties, CssStyles, CssPseudos, TemplateTokens, MediaQueryStyles {
+}
+type Pseudos = CSS.Pseudos | `&${CSS.Pseudos}`;
+type CssPseudos = {
+    [P in Pseudos]?: CssStyles;
+};
 export interface StyledParams extends GeneratorOptions, Variants {
-    base?: CssStyles;
+    base?: BaseStyles;
 }
 export {};

package/util/dot-case.d.ts

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

package/util/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../dash-case-DKzpenwY.cjs"),t=require("../pascal-case-iWoaJWwT.cjs");function s(e){return e?typeof e!="string"?s(String(e)):e.replace(/\s/g,"-").replace(/-([a-z])/g,r=>r[1].toUpperCase()):""}exports.dashCase=a.dashCase;exports.toHash=a.toHash;exports.pascalCase=t.pascalCase;exports.camelCase=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("../dash-case-BJEkFEGQ.cjs"),t=require("../pascal-case-iWoaJWwT.cjs");function s(e){return e?typeof e!="string"?s(String(e)):e.replace(/\s/g,"-").replace(/-([a-z])/g,r=>r[1].toUpperCase()):""}exports.dashCase=a.dashCase;exports.toHash=a.toHash;exports.pascalCase=t.pascalCase;exports.camelCase=s;

package/util/index.js

@@ -1,4 +1,4 @@
-import { d as o, t as s } from "../dash-case-DMQMcCO6.js";
+import { d as o, t as s } from "../dash-case-DBThphLm.js";
 import { p as f } from "../pascal-case-BQpR5PdN.js";
 function r(e) {
   return e ? typeof e != "string" ? r(String(e)) : e.replace(/\s/g, "-").replace(/-([a-z])/g, (a) => a[1].toUpperCase()) : "";

package/util/module-type.d.ts

@@ -0,0 +1 @@
+export declare const detectCurrentModuleType: (dirname: string) => Promise<"esm" | "cjs">;

package/viewport-clamp-BOc-8Oph.js

@@ -0,0 +1,7 @@
+const p = (e) => (t) => {
+  const { screenSize: n, axis: i = "horizontal", minMultiplier: a = 0.5, maxMultiplier: r = 1.5 } = e, o = Math.round(t / n * 1e4) / 100, l = i === "vertical" ? "vh" : "vw", c = Math.round(a * t), s = Math.round(r * t);
+  return `clamp(${c}px, ${o}${l}, ${s}px)`;
+};
+export {
+  p as d
+};

package/viewport-clamp-kY8JqYzm.cjs

@@ -0,0 +1 @@
+"use strict";const p=e=>t=>{const{screenSize:i,axis:n="horizontal",minMultiplier:r=.5,maxMultiplier:a=1.5}=e,o=Math.round(t/i*1e4)/100,l=n==="vertical"?"vh":"vw",c=Math.round(r*t),s=Math.round(a*t);return`clamp(${c}px, ${o}${l}, ${s}px)`};exports.defineViewportClamp=p;

package/config/config-types.d.ts

@@ -1,59 +0,0 @@
-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/generator/index.cjs

@@ -1 +0,0 @@
-"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.d.ts

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

package/generator/index.js

@@ -1,61 +0,0 @@
-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/generator/parse-modifiers.d.ts

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

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

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

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

package/generator/parser-types.d.ts

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

package/generator/style-generator.d.ts

@@ -1,28 +0,0 @@
-import { StyledParams, Tag } from '../types';
-export interface GeneratorProps {
-    element?: string;
-    variantKeys?: string[];
-    propValueKeys?: string[];
-}
-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(): GeneratorProps;
-    _withBuildContext(context: {
-        name: string;
-        config: any;
-    }): this;
-}

package/parse-templates-D4p3pgQR.js

@@ -1,92 +0,0 @@
-import { d as O } from "./dash-case-DMQMcCO6.js";
-const N = (t, r) => {
-  if (typeof t != "string") return { result: t };
-  if (!r) return { result: t };
-  const e = [];
-  return Object.values(r).forEach((n) => {
-    const { pattern: o, transform: c } = n;
-    t = t.replace(o, (h) => {
-      const { value: i, css: m } = c(h);
-      return m && e.push(m), i;
-    });
-  }), { result: t, additionalCss: e };
-}, P = (t) => typeof t != "string" ? { result: t } : /\{[^{}]+\}/g.test(t) ? { result: t.replace(/\{([^{}]+)\}/g, (...n) => `var(--${O(n[1].replaceAll(".", "-"))})`) } : { result: t }, d = (t, r, e, n) => {
-  if (!t) return "";
-  const o = [], c = Object.entries(t).reduce((i, [m, s]) => {
-    const p = m.trim();
-    if (typeof s == "function" && (s = s()), typeof s == "object") {
-      if (!s) return i;
-      if (p === "variants")
-        return Object.entries(s).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 s.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(s, 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(s, $, e);
-      return o.push(a), i;
-    }
-    if (n != null && n.templates && n.templates[p]) {
-      const a = s.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 s == "number") return S(s);
-    if (typeof s != "string")
-      if ("toString" in s) s = s.toString();
-      else return i;
-    const { modifiers: k } = n || {}, T = function* () {
-      yield P(s), yield N(s, k);
-    }();
-    for (const { result: $, additionalCss: a = [] } of T)
-      s = $, a.forEach((u) => {
-        const f = d(u, "");
-        E(f, "");
-      });
-    return S(s);
-  }, "");
-  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(`
-`);
-}, _ = (t, r = []) => {
-  if (!t) return "";
-  const e = [], n = {};
-  if (Object.entries(t).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 = (t) => Object.keys(t);
-export {
-  _ as a,
-  P as b,
-  A as g,
-  d as p
-};

package/parse-templates-W0YfTmOT.cjs

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