@salty-css/core 0.1.0-alpha.22 → 0.1.0-alpha.23

package/README.md

@@ -57,7 +57,6 @@ To get help with problems, [Join Salty CSS Discord server](https://discord.gg/R6
 - [defineVariables](#variables) - create CSS variables (tokens) that can be used in any styling function
 - [defineMediaQuery](#media-queries) - create CSS media queries and use them in any styling function
 - [defineTemplates](#templates) - create reusable templates that can be applied when same styles are used over and over again
-- [defineFont](#custom-fonts) - register custom fonts via `@font-face` (or a remote stylesheet) and expose them as a CSS variable
 - [keyframes](#keyframes-animations) - create CSS keyframes animation that can be used and imported in any styling function
 
 ### Styling helpers & utility
@@ -320,88 +319,6 @@ Example usage:
 styled('div', { base: { textStyle: 'headline.large', card: '20px' } });
 ```
 
-## Custom fonts
-
-Register custom fonts that will be emitted as `@font-face` declarations and exposed as a CSS variable. Mirrors the developer experience of Next.js / Astro font loaders, but generated at build time alongside the rest of your Salty CSS output.
-
-The returned object stringifies to its `font-family` value and exposes helpers for explicit usage:
-
-- `Font.variable` → CSS variable name (e.g. `--font-inter`)
-- `Font.fontFamily` → final `font-family` string with fallbacks
-- `Font.className` → class that sets the variable + applies the font on a subtree
-- `Font.style` → object you can spread on a React `style` prop
-
-```ts
-// /styles/fonts.css.ts
-import { defineFont } from '@salty-css/core/factories';
-
-// 1. Local or self-hosted @font-face sources.
-//    URLs are passed through as-is (use a public-folder path or a CDN URL).
-export const Inter = defineFont({
-  name: 'Inter', // CSS font-family value
-  variable: '--font-inter', // Optional — accepts 'font-inter' too; if omitted we derive `--font-<name>-<hash>` from the inputs
-  display: 'swap', // Optional default applied to variants without their own `display`
-  fallback: ['system-ui', 'sans-serif'], // Optional family fallbacks appended after `name`
-  variants: [
-    {
-      weight: 400,
-      style: 'normal',
-      // Shorthand: pass a string and the `format()` descriptor is auto-detected
-      // from the file extension (woff2, woff, ttf, otf, eot, svg, ttc).
-      src: '/fonts/inter-400.woff2',
-    },
-    {
-      weight: 700,
-      style: 'normal',
-      // Multiple sources can be a string array — first entry is preferred;
-      // the browser picks the first format it supports.
-      src: ['/fonts/inter-700.woff2', '/fonts/inter-700.ttf'],
-    },
-    {
-      weight: 400,
-      style: 'italic',
-      // Use the `{ url, format }` object form when the URL has no recognisable
-      // extension (signed CDN URLs, query-only endpoints, etc.). You can also
-      // mix strings and objects in the same array.
-      src: ['/fonts/inter-400-italic.woff2', { url: 'https://cdn.example.com/inter-italic', format: 'woff' }],
-    },
-  ],
-});
-
-// 2. Remote stylesheet (Google Fonts, etc.). Emits `@import url(...)` and still
-//    registers the CSS variable so usage stays the same as the @font-face flow.
-export const InterCdn = defineFont({
-  name: 'Inter',
-  variable: '--font-inter',
-  import: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap',
-});
-```
-
-Example usage:
-
-```tsx
-import { Inter } from './fonts.css';
-import { styled } from '@salty-css/react/styled';
-
-// Apply the font globally by attaching its className high up in the tree.
-// This sets `--font-inter` on the subtree and applies `font-family: var(--font-inter)`.
-export const App = ({ children }) => <div className={Inter.className}>{children}</div>;
-
-// `Inter` stringifies to its font-family value (with fallbacks), so it can be used directly.
-export const Heading = styled('h1', {
-  base: {
-    fontFamily: `${Inter}`,
-  },
-});
-
-// Or reference the CSS variable explicitly.
-export const Body = styled('p', {
-  base: {
-    fontFamily: `var(${Inter.variable})`,
-  },
-});
-```
-
 ## Keyframes animations
 
 ```ts

package/{class-name-generator-DkByUzHU.js → class-name-generator-CMWY5KTJ.js}

@@ -1,7 +1,7 @@
 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 { p as parseAndJoinStyles } from "./parse-styles-DIqJjXF3.js";
+import { p as parseAndJoinStyles } from "./parse-styles-CLMTHo2H.js";
 import { d as dashCase } from "./dash-case-DblXvymC.js";
 import { t as toHash } from "./to-hash-DAN2LcHK.js";
 class StylesGenerator {

package/{class-name-generator-DVuPkyrS.cjs → class-name-generator-DB5aQwC_.cjs}

@@ -2,7 +2,7 @@
 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);
-const parseStyles = require("./parse-styles-CX1WjafO.cjs");
+const parseStyles = require("./parse-styles-C54MOrPg.cjs");
 const dashCase = require("./dash-case-DIwKaYgE.cjs");
 const toHash = require("./to-hash-C05Y906F.cjs");
 class StylesGenerator {

package/compiler/salty-compiler.cjs

@@ -10,10 +10,10 @@ const promises = require("fs/promises");
 const fs = require("fs");
 const child_process = require("child_process");
 const compiler_helpers = require("./helpers.cjs");
+const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
 const dashCase = require("../dash-case-DIwKaYgE.cjs");
 const toHash = require("../to-hash-C05Y906F.cjs");
-const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
-const parseStyles = require("../parse-styles-CX1WjafO.cjs");
+const parseStyles = require("../parse-styles-C54MOrPg.cjs");
 const css_merge = require("../css/merge.cjs");
 const parsers_index = require("../parsers/index.cjs");
 const compiler_getFiles = require("./get-files.cjs");
@@ -348,7 +348,7 @@ ${currentFile}`;
           });
         }
         const otherGlobalCssFiles = globalCssFiles.map((file) => `@import url('./css/${file}');`).join("\n");
-        const globalCssFilenames = ["_variables.css", "_reset.css", "_global.css", "_templates.css", "_fonts.css"];
+        const globalCssFilenames = ["_variables.css", "_reset.css", "_global.css", "_templates.css"];
         const importsWithData = globalCssFilenames.filter((file) => {
           try {
             const data = fs.readFileSync(path.join(destDir, "css", file), "utf8");
@@ -359,7 +359,7 @@ ${currentFile}`;
         });
         const globalImports = importsWithData.map((file) => `@import url('./css/${file}');`);
         const generatorText = "/*!\n * Generated with Salty CSS (https://salty-css.dev)\n * Do not edit this file directly\n */\n";
-        let cssContent = `${generatorText}@layer reset, global, templates, fonts, l0, l1, l2, l3, l4, l5, l6, l7, l8;
+        let cssContent = `${generatorText}@layer reset, global, templates, l0, l1, l2, l3, l4, l5, l6, l7, l8;
 
 ${globalImports.join(
           "\n"
@@ -405,8 +405,7 @@ ${css}
         mediaQueries: [],
         globalStyles: [],
         variables: [],
-        templates: [],
-        fonts: []
+        templates: []
       };
       await Promise.all(
         [...configFiles].map(async (src) => {
@@ -416,7 +415,6 @@ ${css}
             else if (value.isGlobalDefine) generationResults.globalStyles.push(value);
             else if (value.isDefineVariables) generationResults.variables.push(value);
             else if (value.isDefineTemplates) generationResults.templates.push(value._setPath(`${name};;${outputFilePath}`));
-            else if (value.isDefineFont) generationResults.fonts.push(value);
           });
         })
       );
@@ -518,22 +516,6 @@ ${css}
       const configTemplateFactories = config.templates ? [defineTemplates.defineTemplates(config.templates)._setPath(`config;;${configPath}`)] : [];
       const templateFactories = css_merge.mergeFactories(generationResults.templates, configTemplateFactories);
       configCacheContent.templatePaths = Object.fromEntries(Object.entries(templateFactories).map(([key, faktory]) => [key, faktory._path]));
-      const fontsStylesPath = path.join(destDir, "css/_fonts.css");
-      if (generationResults.fonts.length === 0) {
-        fs.writeFileSync(fontsStylesPath, "");
-      } else {
-        const fontImports = [];
-        const fontBodies = [];
-        for (const font of generationResults.fonts) {
-          const { imports, body } = font._toCss();
-          fontImports.push(...imports);
-          fontBodies.push(body);
-        }
-        const importBlock = fontImports.length ? `${fontImports.join("\n")}
-
-` : "";
-        fs.writeFileSync(fontsStylesPath, `${importBlock}@layer fonts { ${fontBodies.join(" ")} }`);
-      }
       const tsTokensPath = path.join(destDir, "types/css-tokens.d.ts");
       const tsVariableTokens = [...variableTokens].join("|");
       const tsTokensTypes = `

package/compiler/salty-compiler.d.ts

@@ -44,7 +44,6 @@ export declare class SaltyCompiler {
                 isGlobalDefine?: boolean;
                 isDefineVariables?: boolean;
                 isDefineTemplates?: boolean;
-                isDefineFont?: boolean;
                 isKeyframes?: boolean;
                 animationName?: string;
                 css?: Promise<string>;

package/compiler/salty-compiler.js

@@ -8,10 +8,10 @@ import { readFile } from "fs/promises";
 import { readFileSync, existsSync, mkdirSync, statSync, readdirSync, writeFileSync } from "fs";
 import { execSync } from "child_process";
 import { isSaltyFile, resolveExportValue, getCorePackageRoot, saltyFileExtensions } from "./helpers.js";
+import { d as defineTemplates } from "../define-templates-CVhhgPnd.js";
 import { d as dashCase } from "../dash-case-DblXvymC.js";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
-import { d as defineTemplates } from "../define-templates-CVhhgPnd.js";
-import { p as parseAndJoinStyles, b as parseVariableTokens } from "../parse-styles-DIqJjXF3.js";
+import { p as parseAndJoinStyles, b as parseVariableTokens } from "../parse-styles-CLMTHo2H.js";
 import { mergeObjects, mergeFactories } from "../css/merge.js";
 import { parseTemplates, getTemplateTypes } from "../parsers/index.js";
 import { getPackageJson } from "./get-files.js";
@@ -328,7 +328,7 @@ ${currentFile}`;
           });
         }
         const otherGlobalCssFiles = globalCssFiles.map((file) => `@import url('./css/${file}');`).join("\n");
-        const globalCssFilenames = ["_variables.css", "_reset.css", "_global.css", "_templates.css", "_fonts.css"];
+        const globalCssFilenames = ["_variables.css", "_reset.css", "_global.css", "_templates.css"];
         const importsWithData = globalCssFilenames.filter((file) => {
           try {
             const data = readFileSync(join(destDir, "css", file), "utf8");
@@ -339,7 +339,7 @@ ${currentFile}`;
         });
         const globalImports = importsWithData.map((file) => `@import url('./css/${file}');`);
         const generatorText = "/*!\n * Generated with Salty CSS (https://salty-css.dev)\n * Do not edit this file directly\n */\n";
-        let cssContent = `${generatorText}@layer reset, global, templates, fonts, l0, l1, l2, l3, l4, l5, l6, l7, l8;
+        let cssContent = `${generatorText}@layer reset, global, templates, l0, l1, l2, l3, l4, l5, l6, l7, l8;
 
 ${globalImports.join(
           "\n"
@@ -385,8 +385,7 @@ ${css}
         mediaQueries: [],
         globalStyles: [],
         variables: [],
-        templates: [],
-        fonts: []
+        templates: []
       };
       await Promise.all(
         [...configFiles].map(async (src) => {
@@ -396,7 +395,6 @@ ${css}
             else if (value.isGlobalDefine) generationResults.globalStyles.push(value);
             else if (value.isDefineVariables) generationResults.variables.push(value);
             else if (value.isDefineTemplates) generationResults.templates.push(value._setPath(`${name};;${outputFilePath}`));
-            else if (value.isDefineFont) generationResults.fonts.push(value);
           });
         })
       );
@@ -498,22 +496,6 @@ ${css}
       const configTemplateFactories = config.templates ? [defineTemplates(config.templates)._setPath(`config;;${configPath}`)] : [];
       const templateFactories = mergeFactories(generationResults.templates, configTemplateFactories);
       configCacheContent.templatePaths = Object.fromEntries(Object.entries(templateFactories).map(([key, faktory]) => [key, faktory._path]));
-      const fontsStylesPath = join(destDir, "css/_fonts.css");
-      if (generationResults.fonts.length === 0) {
-        writeFileSync(fontsStylesPath, "");
-      } else {
-        const fontImports = [];
-        const fontBodies = [];
-        for (const font of generationResults.fonts) {
-          const { imports, body } = font._toCss();
-          fontImports.push(...imports);
-          fontBodies.push(body);
-        }
-        const importBlock = fontImports.length ? `${fontImports.join("\n")}
-
-` : "";
-        writeFileSync(fontsStylesPath, `${importBlock}@layer fonts { ${fontBodies.join(" ")} }`);
-      }
       const tsTokensPath = join(destDir, "types/css-tokens.d.ts");
       const tsVariableTokens = [...variableTokens].join("|");
       const tsTokensTypes = `

package/config/index.cjs

@@ -5,10 +5,8 @@ const defineTemplates = require("../define-templates-Deq1aCbN.cjs");
 const defineConfig = (config) => {
   return config;
 };
-exports.FontFactory = factories_index.FontFactory;
 exports.GlobalStylesFactory = factories_index.GlobalStylesFactory;
 exports.VariablesFactory = factories_index.VariablesFactory;
-exports.defineFont = factories_index.defineFont;
 exports.defineGlobalStyles = factories_index.defineGlobalStyles;
 exports.defineMediaQuery = factories_index.defineMediaQuery;
 exports.defineVariables = factories_index.defineVariables;

package/config/index.js

@@ -1,16 +1,14 @@
-import { FontFactory, GlobalStylesFactory, VariablesFactory, defineFont, defineGlobalStyles, defineMediaQuery, defineVariables } from "../factories/index.js";
+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 {
-  FontFactory,
   GlobalStylesFactory,
   T as TemplateFactory,
   a as TemplatesFactory,
   VariablesFactory,
   defineConfig,
-  defineFont,
   defineGlobalStyles,
   defineMediaQuery,
   d as defineTemplates,

package/css/dynamic-styles.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-CX1WjafO.cjs");
+const parseStyles = require("../parse-styles-C54MOrPg.cjs");
 const toHash = require("../to-hash-C05Y906F.cjs");
 const cache_resolveDynamicConfigCache = require("../cache/resolve-dynamic-config-cache.cjs");
 const getDynamicStylesClassName = (styles) => {

package/css/dynamic-styles.js

@@ -1,4 +1,4 @@
-import { a as parseStyles } from "../parse-styles-DIqJjXF3.js";
+import { a as parseStyles } from "../parse-styles-CLMTHo2H.js";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
 import { resolveDynamicConfigCache } from "../cache/resolve-dynamic-config-cache.js";
 const getDynamicStylesClassName = (styles) => {

package/css/keyframes.cjs

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

package/css/keyframes.js

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

package/factories/index.cjs

@@ -1,130 +1,7 @@
 "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 dashCase = require("../dash-case-DIwKaYgE.cjs");
-const toHash = require("../to-hash-C05Y906F.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 `--${dashCase.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.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-${dashCase.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;
@@ -153,10 +30,8 @@ const defineVariables = (variables) => {
 exports.TemplateFactory = defineTemplates.TemplateFactory;
 exports.TemplatesFactory = defineTemplates.TemplatesFactory;
 exports.defineTemplates = defineTemplates.defineTemplates;
-exports.FontFactory = FontFactory;
 exports.GlobalStylesFactory = GlobalStylesFactory;
 exports.VariablesFactory = VariablesFactory;
-exports.defineFont = defineFont;
 exports.defineGlobalStyles = defineGlobalStyles;
 exports.defineMediaQuery = defineMediaQuery;
 exports.defineVariables = defineVariables;

package/factories/index.d.ts

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

package/factories/index.js

@@ -1,128 +1,5 @@
-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 } from "../dash-case-DblXvymC.js";
-import { t as toHash } from "../to-hash-DAN2LcHK.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;
@@ -149,12 +26,10 @@ const defineVariables = (variables) => {
   return new VariablesFactory(variables);
 };
 export {
-  FontFactory,
   GlobalStylesFactory,
   T as TemplateFactory,
   a as TemplatesFactory,
   VariablesFactory,
-  defineFont,
   defineGlobalStyles,
   defineMediaQuery,
   d as defineTemplates,

package/generators/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classNameGenerator = require("../class-name-generator-DVuPkyrS.cjs");
+const classNameGenerator = require("../class-name-generator-DB5aQwC_.cjs");
 const dashCase = require("../dash-case-DIwKaYgE.cjs");
 class StyledGenerator extends classNameGenerator.StylesGenerator {
   constructor(tagName, _params) {

package/generators/index.js

@@ -1,5 +1,5 @@
-import { S as StylesGenerator } from "../class-name-generator-DkByUzHU.js";
-import { C } from "../class-name-generator-DkByUzHU.js";
+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";
 class StyledGenerator extends StylesGenerator {
   constructor(tagName, _params) {

package/instances/classname-instance.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classNameGenerator = require("../class-name-generator-DVuPkyrS.cjs");
+const classNameGenerator = require("../class-name-generator-DB5aQwC_.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-DkByUzHU.js";
+import { C as ClassNameGenerator } from "../class-name-generator-CMWY5KTJ.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-alpha.22",
+  "version": "0.1.0-alpha.23",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "typings": "./dist/index.d.ts",

package/{parse-styles-CX1WjafO.cjs → parse-styles-C54MOrPg.cjs}

@@ -146,14 +146,14 @@ const parseStyles = async (styles, currentScope = "", config, omitTemplates = fa
       console.warn(`Template "${_key}" with path of "${value}" was not found in config!`);
       return void 0;
     }
-    if (Array.isArray(value)) {
+    const isVariantArrayKey = _key === "compoundVariants" || _key === "anyOfVariants";
+    if (!isVariantArrayKey && Array.isArray(value)) {
       if (value.length === 0) return void 0;
       return processStyleEntry([key, value.join(", ")]);
     }
     if (typeof value === "object") {
       if (!value) return void 0;
       if (value.isColor) return toString(value.toString());
-      if (value.isDefineFont) return toString(value.toString());
       if (_key === "defaultVariants") return void 0;
       if (_key === "variants") {
         const variantEntries = Object.entries(value);

package/{parse-styles-DIqJjXF3.js → parse-styles-CLMTHo2H.js}

@@ -145,14 +145,14 @@ const parseStyles = async (styles, currentScope = "", config, omitTemplates = fa
       console.warn(`Template "${_key}" with path of "${value}" was not found in config!`);
       return void 0;
     }
-    if (Array.isArray(value)) {
+    const isVariantArrayKey = _key === "compoundVariants" || _key === "anyOfVariants";
+    if (!isVariantArrayKey && Array.isArray(value)) {
       if (value.length === 0) return void 0;
       return processStyleEntry([key, value.join(", ")]);
     }
     if (typeof value === "object") {
       if (!value) return void 0;
       if (value.isColor) return toString(value.toString());
-      if (value.isDefineFont) return toString(value.toString());
       if (_key === "defaultVariants") return void 0;
       if (_key === "variants") {
         const variantEntries = Object.entries(value);

package/parsers/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-CX1WjafO.cjs");
+const parseStyles = require("../parse-styles-C54MOrPg.cjs");
 const dashCase = require("../dash-case-DIwKaYgE.cjs");
 const toHash = require("../to-hash-C05Y906F.cjs");
 const parseTemplates = async (obj, path = []) => {

package/parsers/index.js

@@ -1,5 +1,5 @@
-import { p as parseAndJoinStyles } from "../parse-styles-DIqJjXF3.js";
-import { a, c, d, b, r } from "../parse-styles-DIqJjXF3.js";
+import { p as parseAndJoinStyles } from "../parse-styles-CLMTHo2H.js";
+import { a, c, d, b, r } from "../parse-styles-CLMTHo2H.js";
 import { d as dashCase } from "../dash-case-DblXvymC.js";
 import { t as toHash } from "../to-hash-DAN2LcHK.js";
 const parseTemplates = async (obj, path = []) => {

package/runtime/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const parseStyles = require("../parse-styles-CX1WjafO.cjs");
+const parseStyles = require("../parse-styles-C54MOrPg.cjs");
 const defineRuntime = (config) => {
   const getDynamicStylesCss = async (styles, scope) => {
     const parsed = await parseStyles.parseStyles(styles, scope, config);

package/runtime/index.js

@@ -1,4 +1,4 @@
-import { a as parseStyles } from "../parse-styles-DIqJjXF3.js";
+import { a as parseStyles } from "../parse-styles-CLMTHo2H.js";
 const defineRuntime = (config) => {
   const getDynamicStylesCss = async (styles, scope) => {
     const parsed = await parseStyles(styles, scope, config);

package/types/config-types.d.ts

@@ -1,6 +1,5 @@
 import { BaseStyles, CssStyles, MediaQueryStyles } from '../types';
 import { OrString } from '../types/util-types';
-export * from './font-types';
 export type GlobalStyles = Record<string, BaseStyles>;
 export type CssVariableTokensObject = Record<string, unknown>;
 export interface CssResponsiveVariables {
@@ -92,3 +91,4 @@ export interface CachedConfig {
         [key: string]: string;
     };
 }
+export {};

package/factories/define-font.d.ts

@@ -1,28 +0,0 @@
-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/types/font-types.d.ts

@@ -1,53 +0,0 @@
-export type FontDisplay = 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
-export type FontFormat = 'woff2' | 'woff' | 'truetype' | 'opentype' | 'embedded-opentype' | 'svg' | 'collection';
-export type FontStyle = 'normal' | 'italic' | 'oblique' | (string & {});
-export type FontWeight = number | 'normal' | 'bold' | 'lighter' | 'bolder' | (string & {});
-export interface FontSrc {
-    url: string;
-    format?: FontFormat;
-    /** Optional `tech(...)` descriptor passed straight through to @font-face. */
-    tech?: string;
-}
-export interface FontVariant {
-    weight?: FontWeight;
-    style?: FontStyle;
-    stretch?: string;
-    display?: FontDisplay;
-    unicodeRange?: string;
-    ascentOverride?: string;
-    descentOverride?: string;
-    lineGapOverride?: string;
-    sizeAdjust?: string;
-    /**
-     * One or more font sources. Strings are treated as URLs and the `format()`
-     * descriptor is auto-detected from the file extension when possible. Use
-     * the `{ url, format }` object form for CDN/extensionless URLs where the
-     * format must be set explicitly.
-     */
-    src: string | FontSrc | (string | FontSrc)[];
-}
-interface DefineFontBase {
-    /** CSS `font-family` value users will see in styles. */
-    name: string;
-    /**
-     * CSS variable name. Accepts `--font-inter` or `font-inter`; we normalize.
-     * Optional — when omitted, a deterministic name is derived from the other
-     * inputs as `--font-<name>-<hash>`.
-     */
-    variable?: string;
-    /** Default `font-display` applied to variants that don't set their own. */
-    display?: FontDisplay;
-    /** Family fallback(s) appended after `name` in the generated `font-family` string. */
-    fallback?: string;
-}
-export interface DefineFontVariantsOptions extends DefineFontBase {
-    variants: FontVariant[];
-    import?: never;
-}
-export interface DefineFontImportOptions extends DefineFontBase {
-    /** Remote stylesheet URL (e.g. Google Fonts). Emitted as `@import url(...)`. */
-    import: string;
-    variants?: never;
-}
-export type DefineFontOptions = DefineFontVariantsOptions | DefineFontImportOptions;
-export {};