@salty-css/core 0.0.1-alpha.30 → 0.0.1-alpha.301

package/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

@@ -1 +1,16 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=e=>e;exports.defineConfig=n;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const factories_index = require("../factories/index.cjs");
+const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
+const defineConfig = (config) => {
+  return config;
+};
+exports.GlobalStylesFactory = factories_index.GlobalStylesFactory;
+exports.VariablesFactory = factories_index.VariablesFactory;
+exports.defineGlobalStyles = factories_index.defineGlobalStyles;
+exports.defineMediaQuery = factories_index.defineMediaQuery;
+exports.defineVariables = factories_index.defineVariables;
+exports.TemplateFactory = defineTemplates.TemplateFactory;
+exports.TemplatesFactory = defineTemplates.TemplatesFactory;
+exports.defineTemplates = defineTemplates.defineTemplates;
+exports.defineConfig = defineConfig;

package/config/index.d.ts

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

package/config/index.js

@@ -1,4 +1,16 @@
-const n = (e) => e;
+import { GlobalStylesFactory, VariablesFactory, defineGlobalStyles, defineMediaQuery, defineVariables } from "../factories/index.js";
+import { T, a, d } from "../define-templates-CVhhgPnd.js";
+const defineConfig = (config) => {
+  return config;
+};
 export {
-  n as defineConfig
+  GlobalStylesFactory,
+  T as TemplateFactory,
+  a as TemplatesFactory,
+  VariablesFactory,
+  defineConfig,
+  defineGlobalStyles,
+  defineMediaQuery,
+  d as defineTemplates,
+  defineVariables
 };

package/css/index.cjs

@@ -1 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=e=>`{${e}}`;exports.token=t;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const css_keyframes = require("./keyframes.cjs");
+const css_media = require("./media.cjs");
+const css_token = require("./token.cjs");
+const css_merge = require("./merge.cjs");
+exports.keyframes = css_keyframes.keyframes;
+exports.MediaQueryFactory = css_media.MediaQueryFactory;
+exports.media = css_media.media;
+exports.token = css_token.token;
+exports.mergeFactories = css_merge.mergeFactories;
+exports.mergeObjects = css_merge.mergeObjects;

package/css/index.d.ts

@@ -1 +1,4 @@
-export declare const token: <T extends VariableTokens>(token: T) => string;
+export * from './keyframes';
+export * from './media';
+export * from './token';
+export * from './merge';

package/css/index.js

@@ -1,4 +1,12 @@
-const t = (o) => `{${o}}`;
+import { keyframes } from "./keyframes.js";
+import { MediaQueryFactory, media } from "./media.js";
+import { token } from "./token.js";
+import { mergeFactories, mergeObjects } from "./merge.js";
 export {
-  t as token
+  MediaQueryFactory,
+  keyframes,
+  media,
+  mergeFactories,
+  mergeObjects,
+  token
 };

package/css/keyframes.cjs

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const parseStyles = require("../parse-styles-D-p_guRO.cjs");
+const dashCase = require("../dash-case-Cz8wwE9a.cjs");
+const keyframes = ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes2 }) => {
+  const modifyKeyframes = async (params = {}) => {
+    const animationName = _name || dashCase.toHash(keyframes2);
+    const fn = async () => {
+      const {
+        duration = "500ms",
+        easing = "ease-in-out",
+        delay = "0s",
+        iterationCount = "1",
+        direction = "normal",
+        fillMode = "forwards",
+        playState = "running"
+      } = { ..._params, ...params };
+      const animation = `${animationName} ${duration} ${easing} ${delay} ${iterationCount} ${direction} ${fillMode} ${playState}`;
+      if (!appendInitialStyles) return animation;
+      const startingFrom = keyframes2.from || keyframes2["0%"];
+      if (!startingFrom) return animation;
+      const startStyles = await parseStyles.parseAndJoinStyles(startingFrom, "");
+      return `${animation};${startStyles}`;
+    };
+    const entries = Object.entries(keyframes2);
+    const promises = entries.map(async ([key, value]) => {
+      if (!value) return "";
+      const styles = await parseStyles.parseAndJoinStyles(value, "");
+      const keyStr = typeof key === "number" ? `${key}%` : key;
+      return `${keyStr}{${styles}}`;
+    });
+    const resolved = await Promise.all(promises);
+    const keyframesCss = resolved.join("");
+    const css = `@keyframes ${animationName} {${keyframesCss}}`;
+    Object.assign(fn, {
+      toString: fn,
+      isKeyframes: true,
+      animationName,
+      css,
+      keyframes: keyframes2
+    });
+    return fn;
+  };
+  Object.assign(modifyKeyframes, {
+    _shouldResolve: true
+  });
+  return modifyKeyframes;
+};
+exports.keyframes = keyframes;

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,49 @@
+import { p as parseAndJoinStyles } from "../parse-styles-CqBQc3eQ.js";
+import { t as toHash } from "../dash-case-NMk0mXyT.js";
+const keyframes = ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes2 }) => {
+  const modifyKeyframes = async (params = {}) => {
+    const animationName = _name || toHash(keyframes2);
+    const fn = async () => {
+      const {
+        duration = "500ms",
+        easing = "ease-in-out",
+        delay = "0s",
+        iterationCount = "1",
+        direction = "normal",
+        fillMode = "forwards",
+        playState = "running"
+      } = { ..._params, ...params };
+      const animation = `${animationName} ${duration} ${easing} ${delay} ${iterationCount} ${direction} ${fillMode} ${playState}`;
+      if (!appendInitialStyles) return animation;
+      const startingFrom = keyframes2.from || keyframes2["0%"];
+      if (!startingFrom) return animation;
+      const startStyles = await parseAndJoinStyles(startingFrom, "");
+      return `${animation};${startStyles}`;
+    };
+    const entries = Object.entries(keyframes2);
+    const promises = entries.map(async ([key, value]) => {
+      if (!value) return "";
+      const styles = await parseAndJoinStyles(value, "");
+      const keyStr = typeof key === "number" ? `${key}%` : key;
+      return `${keyStr}{${styles}}`;
+    });
+    const resolved = await Promise.all(promises);
+    const keyframesCss = resolved.join("");
+    const css = `@keyframes ${animationName} {${keyframesCss}}`;
+    Object.assign(fn, {
+      toString: fn,
+      isKeyframes: true,
+      animationName,
+      css,
+      keyframes: keyframes2
+    });
+    return fn;
+  };
+  Object.assign(modifyKeyframes, {
+    _shouldResolve: true
+  });
+  return modifyKeyframes;
+};
+export {
+  keyframes
+};

package/css/media.cjs

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

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,93 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class MediaQueryFactory {
+  constructor(base = "@media") {
+    __publicField(this, "next", (value) => {
+      const str = new String(value);
+      Object.assign(str, {
+        get isMedia() {
+          return true;
+        },
+        get and() {
+          return new MediaQueryFactory(`${value} and`);
+        },
+        get or() {
+          return new MediaQueryFactory(`${value},`);
+        }
+      });
+      return str;
+    });
+    this.base = base;
+  }
+  custom(value) {
+    return this.next(`${this.base} ${value}`);
+  }
+  minWidth(width) {
+    const _width = typeof width === "number" ? `${width}px` : width;
+    const value = `${this.base} (min-width: ${_width})`;
+    return this.next(value);
+  }
+  maxWidth(width) {
+    const _width = typeof width === "number" ? `${width}px` : width;
+    const value = `${this.base} (max-width: ${_width})`;
+    return this.next(value);
+  }
+  minHeight(height) {
+    const _height = typeof height === "number" ? `${height}px` : height;
+    const value = `${this.base} (min-height: ${_height})`;
+    return this.next(value);
+  }
+  maxHeight(height) {
+    const _height = typeof height === "number" ? `${height}px` : height;
+    const value = `${this.base} (max-height: ${_height})`;
+    return this.next(value);
+  }
+  get portrait() {
+    const value = `${this.base} (orientation: portrait)`;
+    return this.next(value);
+  }
+  get landscape() {
+    const value = `${this.base} (orientation: landscape)`;
+    return this.next(value);
+  }
+  prefersColorScheme(scheme) {
+    const value = `${this.base} (prefers-color-scheme: ${scheme})`;
+    return this.next(value);
+  }
+  get dark() {
+    return this.prefersColorScheme("dark");
+  }
+  get light() {
+    return this.prefersColorScheme("light");
+  }
+  get print() {
+    const value = `${this.base} print`;
+    return this.next(value);
+  }
+  get screen() {
+    const value = `${this.base} screen`;
+    return this.next(value);
+  }
+  get speech() {
+    const value = `${this.base} speech`;
+    return this.next(value);
+  }
+  get all() {
+    const value = `${this.base} all`;
+    return this.next(value);
+  }
+  get not() {
+    const value = `${this.base} not`;
+    return this.next(value);
+  }
+  get reducedMotion() {
+    const value = `${this.base} (prefers-reduced-motion: reduce)`;
+    return this.next(value);
+  }
+}
+const media = new MediaQueryFactory();
+export {
+  MediaQueryFactory,
+  media
+};

package/css/merge.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const mergeObjects = (...styles) => {
+  return styles.flat().reduce((acc, style) => {
+    if (style == null ? void 0 : style._current) return { ...acc, ...style._current };
+    return { ...acc, ...style };
+  }, {});
+};
+const mergeFactories = (...factories) => {
+  return factories.flat().reduce((acc, factory) => {
+    return { ...acc, ...factory._children };
+  }, {});
+};
+exports.mergeFactories = mergeFactories;
+exports.mergeObjects = mergeObjects;

package/css/merge.d.ts

@@ -0,0 +1,7 @@
+interface StyleFactory {
+    _current: Record<string, any>;
+    _children: Record<string, any>;
+}
+export declare const mergeObjects: <T = any>(...styles: any[]) => T;
+export declare const mergeFactories: <T extends StyleFactory>(...factories: T[][]) => T;
+export {};

package/css/merge.js

@@ -0,0 +1,15 @@
+const mergeObjects = (...styles) => {
+  return styles.flat().reduce((acc, style) => {
+    if (style == null ? void 0 : style._current) return { ...acc, ...style._current };
+    return { ...acc, ...style };
+  }, {});
+};
+const mergeFactories = (...factories) => {
+  return factories.flat().reduce((acc, factory) => {
+    return { ...acc, ...factory._children };
+  }, {});
+};
+export {
+  mergeFactories,
+  mergeObjects
+};

package/css/token.cjs

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

package/css/token.d.ts

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

package/css/token.js

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

package/dash-case-Cz8wwE9a.cjs

@@ -0,0 +1,32 @@
+"use strict";
+const toAlphabeticChar = (code) => String.fromCharCode(code + (code > 25 ? 39 : 97));
+const toAlphabeticName = (code, length) => {
+  let name = "";
+  let x;
+  for (x = Math.abs(code); x > 52; x = x / 52 | 0) name = toAlphabeticChar(x % 52) + name;
+  name = toAlphabeticChar(x % 52) + name;
+  if (name.length < length) {
+    name = name.padStart(length, "a");
+  } else if (name.length > length) {
+    name = name.slice(-length);
+  }
+  return name;
+};
+const toPhash = (h, x) => {
+  let i = x.length;
+  while (i) h = h * 33 ^ x.charCodeAt(--i);
+  return h;
+};
+const toHash = (value, length = 5) => {
+  const numericHash = toPhash(5381, JSON.stringify(value)) >>> 0;
+  return toAlphabeticName(numericHash, length);
+};
+function dashCase(str) {
+  if (!str) return "";
+  if (typeof str !== "string") return dashCase(String(str));
+  return str.replace(/[\s.]/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (s, i) => {
+    return (i > 0 ? "-" : "") + s.toLowerCase();
+  });
+}
+exports.dashCase = dashCase;
+exports.toHash = toHash;

package/dash-case-NMk0mXyT.js

@@ -0,0 +1,33 @@
+const toAlphabeticChar = (code) => String.fromCharCode(code + (code > 25 ? 39 : 97));
+const toAlphabeticName = (code, length) => {
+  let name = "";
+  let x;
+  for (x = Math.abs(code); x > 52; x = x / 52 | 0) name = toAlphabeticChar(x % 52) + name;
+  name = toAlphabeticChar(x % 52) + name;
+  if (name.length < length) {
+    name = name.padStart(length, "a");
+  } else if (name.length > length) {
+    name = name.slice(-length);
+  }
+  return name;
+};
+const toPhash = (h, x) => {
+  let i = x.length;
+  while (i) h = h * 33 ^ x.charCodeAt(--i);
+  return h;
+};
+const toHash = (value, length = 5) => {
+  const numericHash = toPhash(5381, JSON.stringify(value)) >>> 0;
+  return toAlphabeticName(numericHash, length);
+};
+function dashCase(str) {
+  if (!str) return "";
+  if (typeof str !== "string") return dashCase(String(str));
+  return str.replace(/[\s.]/g, "-").replace(/[A-Z](?:(?=[^A-Z])|[A-Z]*(?=[A-Z][^A-Z]|$))/g, (s, i) => {
+    return (i > 0 ? "-" : "") + s.toLowerCase();
+  });
+}
+export {
+  dashCase as d,
+  toHash as t
+};

package/define-templates-CVhhgPnd.js

@@ -0,0 +1,60 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class TemplateFactory {
+  constructor(params) {
+    __publicField(this, "_path");
+    this.params = params;
+  }
+  get _current() {
+    return this.params.template;
+  }
+  get isDefineTemplate() {
+    return true;
+  }
+  _setPath(path) {
+    this._path = path;
+    return this;
+  }
+}
+class TemplatesFactory {
+  constructor(params) {
+    __publicField(this, "_path");
+    __publicField(this, "templates", []);
+    this.params = params;
+    Object.entries(params).forEach(([name, template]) => {
+      this.templates.push(
+        new TemplateFactory({
+          name,
+          template
+        })
+      );
+    });
+  }
+  get _current() {
+    return this.params;
+  }
+  get _children() {
+    return Object.fromEntries(
+      this.templates.map((template) => {
+        return [template.params.name, template];
+      })
+    );
+  }
+  get isDefineTemplates() {
+    return true;
+  }
+  _setPath(path) {
+    this._path = path;
+    this.templates.forEach((template) => template._setPath(path));
+    return this;
+  }
+}
+const defineTemplates = (templates) => {
+  return new TemplatesFactory(templates);
+};
+export {
+  TemplateFactory as T,
+  TemplatesFactory as a,
+  defineTemplates as d
+};