@salty-css/core 0.1.0-refactor-add-additional-paths-to-config-cache.1 → 0.1.0

package/css/index.cjs

@@ -4,13 +4,9 @@ const css_keyframes = require("./keyframes.cjs");
 const css_media = require("./media.cjs");
 const css_token = require("./token.cjs");
 const css_merge = require("./merge.cjs");
-const css_dynamicStyles = require("./dynamic-styles.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;
-exports.getDynamicStylesClassName = css_dynamicStyles.getDynamicStylesClassName;
-exports.getDynamicStylesCss = css_dynamicStyles.getDynamicStylesCss;
-exports.initializeDynamicStyles = css_dynamicStyles.initializeDynamicStyles;

package/css/index.d.ts

@@ -2,4 +2,3 @@ export * from './keyframes';
 export * from './media';
 export * from './token';
 export * from './merge';
-export * from './dynamic-styles';

package/css/index.js

@@ -2,12 +2,8 @@ import { keyframes } from "./keyframes.js";
 import { MediaQueryFactory, media } from "./media.js";
 import { token } from "./token.js";
 import { mergeFactories, mergeObjects } from "./merge.js";
-import { getDynamicStylesClassName, getDynamicStylesCss, initializeDynamicStyles } from "./dynamic-styles.js";
 export {
   MediaQueryFactory,
-  getDynamicStylesClassName,
-  getDynamicStylesCss,
-  initializeDynamicStyles,
   keyframes,
   media,
   mergeFactories,

package/css/keyframes.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-C54MOrPg.cjs");
-const toHash = require("../to-hash-C05Y906F.cjs");
+const parseStyles = require("../parse-styles-BbI-2wdn.cjs");
+const toHash = require("../to-hash-DT2ImSPA.cjs");
 const keyframes = ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes2 }) => {
   const modifyKeyframes = async (params = {}) => {
     const animationName = _name || toHash.toHash(keyframes2);

package/css/keyframes.js

@@ -1,5 +1,5 @@
-import { p as parseAndJoinStyles } from "../parse-styles-CLMTHo2H.js";
-import { t as toHash } from "../to-hash-DAN2LcHK.js";
+import { p as parseAndJoinStyles } from "../parse-styles-BgVqQAni.js";
+import { t as toHash } from "../to-hash-DSoCPs8D.js";
 const keyframes = ({ animationName: _name, params: _params, appendInitialStyles, ...keyframes2 }) => {
   const modifyKeyframes = async (params = {}) => {
     const animationName = _name || toHash(keyframes2);

package/factories/define-font.d.ts

@@ -0,0 +1,28 @@
+import { DefineFontOptions } from '../types/font-types';
+export interface FontCss {
+    /** `@import url(...)` lines that must sit at the top of the stylesheet, before any `@layer`. */
+    imports: string[];
+    /** Body that goes inside the `@layer fonts { ... }` wrapper. */
+    body: string;
+}
+export declare class FontFactory {
+    readonly _options: DefineFontOptions;
+    readonly variable: string;
+    readonly fontFamily: string;
+    readonly className: string;
+    constructor(_options: DefineFontOptions);
+    get isDefineFont(): true;
+    /** Acts as a string equal to the resolved font-family value. */
+    toString(): string;
+    /** Inline-style helper: spread onto a React `style` prop. */
+    get style(): Record<string, string>;
+    /** Build the CSS pieces written to `_fonts.css`. */
+    _toCss(): FontCss;
+}
+/**
+ * Define a custom font that is registered globally as `@font-face` and exposed
+ * as a CSS variable. The returned object stringifies to its `font-family`
+ * value, and exposes `.variable`, `.fontFamily`, `.className`, and `.style`
+ * for use in styles and components.
+ */
+export declare const defineFont: (options: DefineFontOptions) => FontFactory;

package/factories/define-import.d.ts

@@ -0,0 +1,14 @@
+export interface ImportSpecOptions {
+    url: string;
+    media?: string;
+    supports?: string;
+}
+export type ImportSpec = string | ImportSpecOptions;
+export declare class ImportFactory {
+    _current: ImportSpec[];
+    _path?: string;
+    constructor(_current: ImportSpec[]);
+    get isDefineImport(): boolean;
+    _setPath(path: string): this;
+}
+export declare const defineImport: (...specs: ImportSpec[]) => ImportFactory;

package/factories/index.cjs

@@ -1,7 +1,129 @@
 "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" });
+const toHash = require("../to-hash-DT2ImSPA.cjs");
 const css_media = require("../css/media.cjs");
 const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
+const FONT_FORMAT_BY_EXTENSION = {
+  woff2: "woff2",
+  woff: "woff",
+  ttf: "truetype",
+  otf: "opentype",
+  eot: "embedded-opentype",
+  svg: "svg",
+  ttc: "collection"
+};
+const detectFontFormat = (url) => {
+  const cleaned = url.split("?")[0].split("#")[0];
+  const dot = cleaned.lastIndexOf(".");
+  if (dot === -1) return void 0;
+  const ext = cleaned.slice(dot + 1).toLowerCase();
+  return FONT_FORMAT_BY_EXTENSION[ext];
+};
+const toFontSrc = (entry) => {
+  if (typeof entry === "string") return { url: entry, format: detectFontFormat(entry) };
+  return entry;
+};
+const normalizeSources = (src) => {
+  if (Array.isArray(src)) return src.map(toFontSrc);
+  return [toFontSrc(src)];
+};
+const normalizeVariable = (variable) => {
+  const trimmed = variable.trim();
+  const stripped = trimmed.replace(/^--/, "");
+  if (!stripped) throw new Error(`defineFont: invalid \`variable\` value "${variable}".`);
+  return `--${toHash.dashCase(stripped)}`;
+};
+const deriveVariable = (options) => {
+  const hashSource = [options.name, options.fallback, "variants" in options ? options.variants : void 0, "import" in options ? options.import : void 0];
+  return `--font-${toHash.dashCase(options.name)}-${toHash.toHash(hashSource, 6)}`;
+};
+const quoteFamily = (name) => {
+  if (/^["'].*["']$/.test(name)) return name;
+  if (/\s/.test(name)) return `"${name}"`;
+  return name;
+};
+const buildFontFamilyValue = (name, fallback) => {
+  const head = quoteFamily(name);
+  if (!fallback || fallback.length === 0) return head;
+  return [head, fallback].join(", ");
+};
+const formatSrc = (src) => {
+  const parts = [`url("${src.url}")`];
+  if (src.format) parts.push(`format("${src.format}")`);
+  if (src.tech) parts.push(`tech(${src.tech})`);
+  return parts.join(" ");
+};
+const variantToFontFace = (name, variant, defaultDisplay) => {
+  const sources = normalizeSources(variant.src);
+  if (sources.length === 0) {
+    throw new Error(`defineFont(${name}): variant must declare at least one \`src\`.`);
+  }
+  const lines = [`font-family: ${quoteFamily(name)};`, `src: ${sources.map(formatSrc).join(", ")};`, `font-display: ${variant.display ?? defaultDisplay};`];
+  if (variant.weight !== void 0) lines.push(`font-weight: ${variant.weight};`);
+  if (variant.style !== void 0) lines.push(`font-style: ${variant.style};`);
+  if (variant.stretch !== void 0) lines.push(`font-stretch: ${variant.stretch};`);
+  if (variant.unicodeRange !== void 0) lines.push(`unicode-range: ${variant.unicodeRange};`);
+  if (variant.ascentOverride !== void 0) lines.push(`ascent-override: ${variant.ascentOverride};`);
+  if (variant.descentOverride !== void 0) lines.push(`descent-override: ${variant.descentOverride};`);
+  if (variant.lineGapOverride !== void 0) lines.push(`line-gap-override: ${variant.lineGapOverride};`);
+  if (variant.sizeAdjust !== void 0) lines.push(`size-adjust: ${variant.sizeAdjust};`);
+  return `@font-face { ${lines.join(" ")} }`;
+};
+class FontFactory {
+  constructor(_options) {
+    __publicField(this, "variable");
+    __publicField(this, "fontFamily");
+    __publicField(this, "className");
+    this._options = _options;
+    if (!_options || !_options.name) {
+      throw new Error("defineFont: `name` is required.");
+    }
+    if ("variants" in _options && "import" in _options && _options.import !== void 0 && _options.variants !== void 0) {
+      throw new Error("defineFont: provide either `variants` or `import`, not both.");
+    }
+    if (!("variants" in _options && _options.variants) && !("import" in _options && _options.import)) {
+      throw new Error("defineFont: must provide either `variants` or `import`.");
+    }
+    this.variable = _options.variable ? normalizeVariable(_options.variable) : deriveVariable(_options);
+    this.fontFamily = buildFontFamilyValue(_options.name, _options.fallback);
+    this.className = `font-${toHash.dashCase(_options.name)}`;
+  }
+  get isDefineFont() {
+    return true;
+  }
+  /** Acts as a string equal to the resolved font-family value. */
+  toString() {
+    return this.fontFamily;
+  }
+  /** Inline-style helper: spread onto a React `style` prop. */
+  get style() {
+    return {
+      fontFamily: this.fontFamily,
+      [this.variable]: this.fontFamily
+    };
+  }
+  /** Build the CSS pieces written to `_fonts.css`. */
+  _toCss() {
+    const imports = [];
+    const blocks = [];
+    if ("import" in this._options && this._options.import) {
+      imports.push(`@import url("${this._options.import}");`);
+    } else if ("variants" in this._options && this._options.variants) {
+      const display = this._options.display ?? "swap";
+      for (const variant of this._options.variants) {
+        blocks.push(variantToFontFace(this._options.name, variant, display));
+      }
+    }
+    blocks.push(`:root { ${this.variable}: ${this.fontFamily}; }`, `.${this.className} { font-family: var(${this.variable}); }`);
+    return { imports, body: blocks.join(" ") };
+  }
+}
+const defineFont = (options) => {
+  return new FontFactory(options);
+};
 class GlobalStylesFactory {
   constructor(_current) {
     this._current = _current;
@@ -13,6 +135,20 @@ class GlobalStylesFactory {
 const defineGlobalStyles = (styles) => {
   return new GlobalStylesFactory(styles);
 };
+class ImportFactory {
+  constructor(_current) {
+    __publicField(this, "_path");
+    this._current = _current;
+  }
+  get isDefineImport() {
+    return true;
+  }
+  _setPath(path) {
+    this._path = path;
+    return this;
+  }
+}
+const defineImport = (...specs) => new ImportFactory(specs);
 const defineMediaQuery = (mediaFactory) => {
   return mediaFactory(css_media.media);
 };
@@ -30,8 +166,12 @@ const defineVariables = (variables) => {
 exports.TemplateFactory = defineTemplates.TemplateFactory;
 exports.TemplatesFactory = defineTemplates.TemplatesFactory;
 exports.defineTemplates = defineTemplates.defineTemplates;
+exports.FontFactory = FontFactory;
 exports.GlobalStylesFactory = GlobalStylesFactory;
+exports.ImportFactory = ImportFactory;
 exports.VariablesFactory = VariablesFactory;
+exports.defineFont = defineFont;
 exports.defineGlobalStyles = defineGlobalStyles;
+exports.defineImport = defineImport;
 exports.defineMediaQuery = defineMediaQuery;
 exports.defineVariables = defineVariables;

package/factories/index.d.ts

@@ -1,4 +1,6 @@
+export * from './define-font';
 export * from './define-global-styles';
+export * from './define-import';
 export * from './define-media-query';
 export * from './define-variables';
 export * from './define-templates';

package/factories/index.js

@@ -1,5 +1,127 @@
+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);
+import { d as dashCase, t as toHash } from "../to-hash-DSoCPs8D.js";
 import { media } from "../css/media.js";
 import { T, a, d } from "../define-templates-CVhhgPnd.js";
+const FONT_FORMAT_BY_EXTENSION = {
+  woff2: "woff2",
+  woff: "woff",
+  ttf: "truetype",
+  otf: "opentype",
+  eot: "embedded-opentype",
+  svg: "svg",
+  ttc: "collection"
+};
+const detectFontFormat = (url) => {
+  const cleaned = url.split("?")[0].split("#")[0];
+  const dot = cleaned.lastIndexOf(".");
+  if (dot === -1) return void 0;
+  const ext = cleaned.slice(dot + 1).toLowerCase();
+  return FONT_FORMAT_BY_EXTENSION[ext];
+};
+const toFontSrc = (entry) => {
+  if (typeof entry === "string") return { url: entry, format: detectFontFormat(entry) };
+  return entry;
+};
+const normalizeSources = (src) => {
+  if (Array.isArray(src)) return src.map(toFontSrc);
+  return [toFontSrc(src)];
+};
+const normalizeVariable = (variable) => {
+  const trimmed = variable.trim();
+  const stripped = trimmed.replace(/^--/, "");
+  if (!stripped) throw new Error(`defineFont: invalid \`variable\` value "${variable}".`);
+  return `--${dashCase(stripped)}`;
+};
+const deriveVariable = (options) => {
+  const hashSource = [options.name, options.fallback, "variants" in options ? options.variants : void 0, "import" in options ? options.import : void 0];
+  return `--font-${dashCase(options.name)}-${toHash(hashSource, 6)}`;
+};
+const quoteFamily = (name) => {
+  if (/^["'].*["']$/.test(name)) return name;
+  if (/\s/.test(name)) return `"${name}"`;
+  return name;
+};
+const buildFontFamilyValue = (name, fallback) => {
+  const head = quoteFamily(name);
+  if (!fallback || fallback.length === 0) return head;
+  return [head, fallback].join(", ");
+};
+const formatSrc = (src) => {
+  const parts = [`url("${src.url}")`];
+  if (src.format) parts.push(`format("${src.format}")`);
+  if (src.tech) parts.push(`tech(${src.tech})`);
+  return parts.join(" ");
+};
+const variantToFontFace = (name, variant, defaultDisplay) => {
+  const sources = normalizeSources(variant.src);
+  if (sources.length === 0) {
+    throw new Error(`defineFont(${name}): variant must declare at least one \`src\`.`);
+  }
+  const lines = [`font-family: ${quoteFamily(name)};`, `src: ${sources.map(formatSrc).join(", ")};`, `font-display: ${variant.display ?? defaultDisplay};`];
+  if (variant.weight !== void 0) lines.push(`font-weight: ${variant.weight};`);
+  if (variant.style !== void 0) lines.push(`font-style: ${variant.style};`);
+  if (variant.stretch !== void 0) lines.push(`font-stretch: ${variant.stretch};`);
+  if (variant.unicodeRange !== void 0) lines.push(`unicode-range: ${variant.unicodeRange};`);
+  if (variant.ascentOverride !== void 0) lines.push(`ascent-override: ${variant.ascentOverride};`);
+  if (variant.descentOverride !== void 0) lines.push(`descent-override: ${variant.descentOverride};`);
+  if (variant.lineGapOverride !== void 0) lines.push(`line-gap-override: ${variant.lineGapOverride};`);
+  if (variant.sizeAdjust !== void 0) lines.push(`size-adjust: ${variant.sizeAdjust};`);
+  return `@font-face { ${lines.join(" ")} }`;
+};
+class FontFactory {
+  constructor(_options) {
+    __publicField(this, "variable");
+    __publicField(this, "fontFamily");
+    __publicField(this, "className");
+    this._options = _options;
+    if (!_options || !_options.name) {
+      throw new Error("defineFont: `name` is required.");
+    }
+    if ("variants" in _options && "import" in _options && _options.import !== void 0 && _options.variants !== void 0) {
+      throw new Error("defineFont: provide either `variants` or `import`, not both.");
+    }
+    if (!("variants" in _options && _options.variants) && !("import" in _options && _options.import)) {
+      throw new Error("defineFont: must provide either `variants` or `import`.");
+    }
+    this.variable = _options.variable ? normalizeVariable(_options.variable) : deriveVariable(_options);
+    this.fontFamily = buildFontFamilyValue(_options.name, _options.fallback);
+    this.className = `font-${dashCase(_options.name)}`;
+  }
+  get isDefineFont() {
+    return true;
+  }
+  /** Acts as a string equal to the resolved font-family value. */
+  toString() {
+    return this.fontFamily;
+  }
+  /** Inline-style helper: spread onto a React `style` prop. */
+  get style() {
+    return {
+      fontFamily: this.fontFamily,
+      [this.variable]: this.fontFamily
+    };
+  }
+  /** Build the CSS pieces written to `_fonts.css`. */
+  _toCss() {
+    const imports = [];
+    const blocks = [];
+    if ("import" in this._options && this._options.import) {
+      imports.push(`@import url("${this._options.import}");`);
+    } else if ("variants" in this._options && this._options.variants) {
+      const display = this._options.display ?? "swap";
+      for (const variant of this._options.variants) {
+        blocks.push(variantToFontFace(this._options.name, variant, display));
+      }
+    }
+    blocks.push(`:root { ${this.variable}: ${this.fontFamily}; }`, `.${this.className} { font-family: var(${this.variable}); }`);
+    return { imports, body: blocks.join(" ") };
+  }
+}
+const defineFont = (options) => {
+  return new FontFactory(options);
+};
 class GlobalStylesFactory {
   constructor(_current) {
     this._current = _current;
@@ -11,6 +133,20 @@ class GlobalStylesFactory {
 const defineGlobalStyles = (styles) => {
   return new GlobalStylesFactory(styles);
 };
+class ImportFactory {
+  constructor(_current) {
+    __publicField(this, "_path");
+    this._current = _current;
+  }
+  get isDefineImport() {
+    return true;
+  }
+  _setPath(path) {
+    this._path = path;
+    return this;
+  }
+}
+const defineImport = (...specs) => new ImportFactory(specs);
 const defineMediaQuery = (mediaFactory) => {
   return mediaFactory(media);
 };
@@ -26,11 +162,15 @@ const defineVariables = (variables) => {
   return new VariablesFactory(variables);
 };
 export {
+  FontFactory,
   GlobalStylesFactory,
+  ImportFactory,
   T as TemplateFactory,
   a as TemplatesFactory,
   VariablesFactory,
+  defineFont,
   defineGlobalStyles,
+  defineImport,
   defineMediaQuery,
   d as defineTemplates,
   defineVariables

package/generators/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classNameGenerator = require("../class-name-generator-DB5aQwC_.cjs");
-const dashCase = require("../dash-case-DIwKaYgE.cjs");
+const classNameGenerator = require("../class-name-generator-MtPkBfM_.cjs");
+const toHash = require("../to-hash-DT2ImSPA.cjs");
 class StyledGenerator extends classNameGenerator.StylesGenerator {
   constructor(tagName, _params) {
     super(_params);
@@ -35,7 +35,7 @@ class StyledGenerator extends classNameGenerator.StylesGenerator {
       if (matches) {
         matches.forEach((match) => {
           const value = match.replace(/\{(?:-)?props\.([^}]+)\}/gi, "$1");
-          const dashed = dashCase.dashCase(value);
+          const dashed = toHash.dashCase(value);
           if (value) propValueKeys.add(dashed);
         });
       }

package/generators/index.js

@@ -1,6 +1,6 @@
-import { S as StylesGenerator } from "../class-name-generator-CMWY5KTJ.js";
-import { C } from "../class-name-generator-CMWY5KTJ.js";
-import { d as dashCase } from "../dash-case-DblXvymC.js";
+import { S as StylesGenerator } from "../class-name-generator-CUEoPowv.js";
+import { C } from "../class-name-generator-CUEoPowv.js";
+import { d as dashCase } from "../to-hash-DSoCPs8D.js";
 class StyledGenerator extends StylesGenerator {
   constructor(tagName, _params) {
     super(_params);

package/helpers/color.d.ts

@@ -14,5 +14,11 @@ declare class Color {
     _handleColorMethod(method: keyof ColorInstance): any;
     toString(): string;
 }
+/**
+ * Token references must point to a **static** variable that resolves to a real
+ * CSS color value (e.g. a hex code or named color). Conditional tokens
+ * (`{theme.*}`) and responsive tokens are not in `staticVariables` and will
+ * resolve to `transparent`. `color()` cannot be used inside `defineVariables`.
+ */
 export declare const color: (value: BaseColor) => Color & ColorInstance;
 export {};

package/instances/classname-instance.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classNameGenerator = require("../class-name-generator-DB5aQwC_.cjs");
+const classNameGenerator = require("../class-name-generator-MtPkBfM_.cjs");
 const classNameInstance = (params) => {
   const generator = new classNameGenerator.ClassNameGenerator(params);
   const createClass = (classNameStr) => {

package/instances/classname-instance.js

@@ -1,4 +1,4 @@
-import { C as ClassNameGenerator } from "../class-name-generator-CMWY5KTJ.js";
+import { C as ClassNameGenerator } from "../class-name-generator-CUEoPowv.js";
 const classNameInstance = (params) => {
   const generator = new ClassNameGenerator(params);
   const createClass = (classNameStr) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salty-css/core",
-  "version": "0.1.0-refactor-add-additional-paths-to-config-cache.1",
+  "version": "0.1.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",
@@ -63,10 +63,6 @@
       "import": "./compiler/helpers.js",
       "require": "./compiler/helpers.cjs"
     },
-    "./compiler/copy-config-cache": {
-      "import": "./compiler/copy-config-cache.js",
-      "require": "./compiler/copy-config-cache.cjs"
-    },
     "./factories": {
       "import": "./factories/index.js",
       "require": "./factories/index.cjs"
@@ -91,10 +87,6 @@
       "import": "./css/merge.js",
       "require": "./css/merge.cjs"
     },
-    "./css/dynamic-styles": {
-      "import": "./css/dynamic-styles.js",
-      "require": "./css/dynamic-styles.cjs"
-    },
     "./helpers": {
       "import": "./helpers/index.js",
       "require": "./helpers/index.cjs"
@@ -123,10 +115,6 @@
       "import": "./server/index.js",
       "require": "./server/index.cjs"
     },
-    "./cache/resolve-dynamic-config-cache": {
-      "import": "./cache/resolve-dynamic-config-cache.js",
-      "require": "./cache/resolve-dynamic-config-cache.cjs"
-    },
     "./instances/classname-instance": {
       "import": "./instances/classname-instance.js",
       "require": "./instances/classname-instance.cjs"