typestyles 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -67,11 +67,9 @@ function serializeStyle(selector, properties) {
   const declarations = [];
   for (const [prop, value] of Object.entries(properties)) {
     if (value == null) continue;
-    if (prop.startsWith("&")) {
-      const nestedSelector = prop.replace(/&/g, selector);
-      rules.push(
-        ...serializeStyle(nestedSelector, value)
-      );
+    const nestedSelector = resolveNestedSelector(selector, prop);
+    if (nestedSelector) {
+      rules.push(...serializeStyle(nestedSelector, value));
     } else if (prop.startsWith("@")) {
       const innerRules = serializeStyle(selector, value);
       for (const inner of innerRules) {
@@ -82,9 +80,7 @@ function serializeStyle(selector, properties) {
       }
     } else {
       const kebabProp = toKebabCase(prop);
-      declarations.push(
-        `${kebabProp}: ${serializeValue(prop, value)}`
-      );
+      declarations.push(`${kebabProp}: ${serializeValue(prop, value)}`);
     }
   }
   if (declarations.length > 0) {
@@ -95,10 +91,58 @@ function serializeStyle(selector, properties) {
   }
   return rules;
 }
+function resolveNestedSelector(parentSelector, key) {
+  if (key.startsWith("&")) {
+    return key.replace(/&/g, parentSelector);
+  }
+  if (key.startsWith("[")) {
+    const parts = splitSelectorList(key);
+    return parts.map((part) => `${parentSelector}${part.trimStart()}`).join(", ");
+  }
+  return null;
+}
+function splitSelectorList(selector) {
+  const result = [];
+  let current2 = "";
+  let bracketDepth = 0;
+  let parenDepth = 0;
+  let quote = null;
+  for (let i = 0; i < selector.length; i++) {
+    const char = selector[i];
+    const prev = i > 0 ? selector[i - 1] : "";
+    if (quote) {
+      current2 += char;
+      if (char === quote && prev !== "\\") {
+        quote = null;
+      }
+      continue;
+    }
+    if (char === '"' || char === "'") {
+      quote = char;
+      current2 += char;
+      continue;
+    }
+    if (char === "[") bracketDepth++;
+    if (char === "]") bracketDepth = Math.max(0, bracketDepth - 1);
+    if (char === "(") parenDepth++;
+    if (char === ")") parenDepth = Math.max(0, parenDepth - 1);
+    if (char === "," && bracketDepth === 0 && parenDepth === 0) {
+      result.push(current2.trim());
+      current2 = "";
+      continue;
+    }
+    current2 += char;
+  }
+  if (current2.trim()) {
+    result.push(current2.trim());
+  }
+  return result;
+}
 
 // src/sheet.ts
 var STYLE_ELEMENT_ID = "typestyles";
 var insertedRules = /* @__PURE__ */ new Set();
+var RUNTIME_DISABLED = typeof __TYPESTYLES_RUNTIME_DISABLED__ !== "undefined" && __TYPESTYLES_RUNTIME_DISABLED__ === "true";
 var pendingRules = [];
 var allRules = [];
 var flushScheduled = false;
@@ -128,7 +172,7 @@ function flush() {
     ssrBuffer.push(...rules);
     return;
   }
-  if (!isBrowser) return;
+  if (!isBrowser || RUNTIME_DISABLED) return;
   const el = getStyleElement();
   const sheet = el.sheet;
   if (sheet) {
@@ -150,15 +194,16 @@ function scheduleFlush() {
     flush();
     return;
   }
-  if (isBrowser) {
+  if (isBrowser && !RUNTIME_DISABLED) {
     queueMicrotask(flush);
   }
 }
 function insertRule(key, css) {
   if (insertedRules.has(key)) return;
   insertedRules.add(key);
-  pendingRules.push(css);
   allRules.push(css);
+  if (RUNTIME_DISABLED && !ssrBuffer) return;
+  pendingRules.push(css);
   scheduleFlush();
 }
 function insertRules(rules) {
@@ -166,9 +211,11 @@ function insertRules(rules) {
   for (const { key, css } of rules) {
     if (insertedRules.has(key)) continue;
     insertedRules.add(key);
-    pendingRules.push(css);
     allRules.push(css);
-    added = true;
+    if (!RUNTIME_DISABLED || ssrBuffer) {
+      pendingRules.push(css);
+      added = true;
+    }
   }
   if (added) scheduleFlush();
 }
@@ -193,8 +240,97 @@ function flushSync() {
 // src/registry.ts
 var registeredNamespaces = /* @__PURE__ */ new Set();
 
+// src/class-naming.ts
+var defaultConfig = {
+  mode: "semantic",
+  prefix: "ts",
+  scopeId: ""
+};
+var current = { ...defaultConfig };
+function getClassNamingConfig() {
+  return current;
+}
+function configureClassNaming(partial) {
+  current = { ...current, ...partial };
+}
+function resetClassNaming() {
+  current = { ...defaultConfig };
+}
+function stableSerialize(value) {
+  if (value === null) return "null";
+  if (typeof value !== "object") return JSON.stringify(value);
+  if (Array.isArray(value)) return `[${value.map((v) => stableSerialize(v)).join(",")}]`;
+  const entries = Object.entries(value).sort(([a], [b]) => a.localeCompare(b)).map(([k, v]) => `${JSON.stringify(k)}:${stableSerialize(v)}`);
+  return `{${entries.join(",")}}`;
+}
+function hashString(input) {
+  let hash = 2166136261;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return (hash >>> 0).toString(36);
+}
+function sanitizeClassSegment(label) {
+  const normalized = label.trim().toLowerCase().replace(/[^a-z0-9-]/g, "-");
+  return normalized.replace(/-+/g, "-").replace(/^-|-$/g, "") || "style";
+}
+function buildSingleClassName(name, properties) {
+  const cfg = getClassNamingConfig();
+  if (cfg.mode === "semantic") return name;
+  const payload = stableSerialize({
+    ...cfg.scopeId ? { scope: cfg.scopeId } : {},
+    namespace: name,
+    suffix: "",
+    properties
+  });
+  const h = hashString(payload);
+  if (cfg.mode === "atomic") return `${cfg.prefix}-${h}`;
+  return `${cfg.prefix}-${sanitizeClassSegment(name)}-${h}`;
+}
+function buildRecipeClassName(namespace, suffix, properties) {
+  const cfg = getClassNamingConfig();
+  if (cfg.mode === "semantic") return `${namespace}-${suffix}`;
+  const payload = stableSerialize({
+    ...cfg.scopeId ? { scope: cfg.scopeId } : {},
+    namespace,
+    suffix,
+    properties
+  });
+  const h = hashString(payload);
+  if (cfg.mode === "atomic") return `${cfg.prefix}-${h}`;
+  return `${cfg.prefix}-${sanitizeClassSegment(namespace)}-${h}`;
+}
+
 // src/styles.ts
-function createStyles(namespace, definitions) {
+function createClass(name, properties) {
+  if (process.env.NODE_ENV !== "production") {
+    if (registeredNamespaces.has(name)) {
+      console.warn(
+        `[typestyles] styles.class('${name}', ...) called more than once. This will cause class name collisions. Each class name should be unique.`
+      );
+    }
+  }
+  registeredNamespaces.add(name);
+  const className = buildSingleClassName(name, properties);
+  const selector = `.${className}`;
+  const rules = serializeStyle(selector, properties);
+  insertRules(rules);
+  return className;
+}
+function createHashClass(properties, label) {
+  const cfg = getClassNamingConfig();
+  const serialized = cfg.scopeId !== "" ? stableSerialize({ scope: cfg.scopeId, properties }) : stableSerialize(properties);
+  const hash = hashString(serialized);
+  const className = label ? `${cfg.prefix}-${sanitizeClassSegment(label)}-${hash}` : `${cfg.prefix}-${hash}`;
+  const selector = `.${className}`;
+  const rules = serializeStyle(selector, properties);
+  insertRules(rules);
+  return className;
+}
+function createStyles(namespace, baseOrDefinitions, variants) {
+  const definitions = variants !== void 0 ? { base: baseOrDefinitions, ...variants } : baseOrDefinitions;
+  const withBase = variants !== void 0;
   if (process.env.NODE_ENV !== "production") {
     if (registeredNamespaces.has(namespace)) {
       console.warn(
@@ -204,15 +340,20 @@ function createStyles(namespace, definitions) {
   }
   registeredNamespaces.add(namespace);
   const rules = [];
+  const variantToClass = {};
   for (const [variant, properties] of Object.entries(definitions)) {
-    const className = `${namespace}-${variant}`;
+    const props = properties;
+    const className = buildRecipeClassName(namespace, variant, props);
+    variantToClass[variant] = className;
     const selector = `.${className}`;
-    const variantRules = serializeStyle(selector, properties);
+    const variantRules = serializeStyle(selector, props);
     rules.push(...variantRules);
   }
   insertRules(rules);
-  const selectorFn = (...variants) => {
-    return variants.filter(Boolean).map((v) => `${namespace}-${v}`).join(" ");
+  const selectorFn = (...variants2) => {
+    const filtered = variants2.filter(Boolean);
+    const classes = withBase ? ["base", ...filtered.filter((v) => v !== "base")] : filtered;
+    return classes.map((v) => variantToClass[v] ?? "").filter(Boolean).join(" ");
   };
   return selectorFn;
 }
@@ -231,6 +372,82 @@ function compose(...selectors) {
     return classNames.join(" ");
   };
 }
+function createStylesWithUtils(utils) {
+  const apply = (properties) => expandStyleWithUtils(properties, utils);
+  function create(namespace, baseOrDefinitions, variants) {
+    if (variants !== void 0) {
+      const transformedVariants = Object.fromEntries(
+        Object.entries(variants).map(([variant, properties]) => [variant, apply(properties)])
+      );
+      return createStyles(namespace, apply(baseOrDefinitions), transformedVariants);
+    }
+    const transformedDefinitions = Object.fromEntries(
+      Object.entries(
+        baseOrDefinitions
+      ).map(([variant, properties]) => [variant, apply(properties)])
+    );
+    return createStyles(namespace, transformedDefinitions);
+  }
+  return {
+    class: (name, properties) => createClass(name, apply(properties)),
+    hashClass: (properties, label) => createHashClass(apply(properties), label),
+    create,
+    compose
+  };
+}
+function expandStyleWithUtils(properties, utils) {
+  const expanded = {};
+  for (const [key, value] of Object.entries(properties)) {
+    if (value == null) continue;
+    if (key.startsWith("&") || key.startsWith("[") || key.startsWith("@")) {
+      if (isObject(value)) {
+        assignStyleEntry(
+          expanded,
+          key,
+          expandStyleWithUtils(value, utils)
+        );
+      }
+      continue;
+    }
+    if (Object.prototype.hasOwnProperty.call(utils, key)) {
+      const utilFn = utils[key];
+      const utilResult = utilFn(value);
+      const normalized = expandStyleWithUtils(utilResult, utils);
+      for (const [utilKey, utilValue] of Object.entries(normalized)) {
+        assignStyleEntry(expanded, utilKey, utilValue);
+      }
+      continue;
+    }
+    assignStyleEntry(expanded, key, value);
+  }
+  return expanded;
+}
+function assignStyleEntry(target, key, value) {
+  const targetRecord = target;
+  if (isObject(value)) {
+    const existing = targetRecord[key];
+    if (isObject(existing)) {
+      targetRecord[key] = mergeStyleObjects(
+        existing,
+        value
+      );
+      return;
+    }
+    targetRecord[key] = value;
+    return;
+  }
+  targetRecord[key] = value;
+}
+function mergeStyleObjects(base, next) {
+  const merged = { ...base };
+  for (const [key, value] of Object.entries(next)) {
+    assignStyleEntry(merged, key, value);
+  }
+  return merged;
+}
+function isObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
 
 // src/tokens.ts
 var registeredNamespaces2 = /* @__PURE__ */ new Set();
@@ -349,6 +566,15 @@ function alpha(colorValue, opacity, colorSpace = "srgb") {
 
 // src/component.ts
 function createComponent(namespace, config) {
+  if ("slots" in config) {
+    return createSlotComponent(
+      namespace,
+      config
+    );
+  }
+  return createSingleComponent(namespace, config);
+}
+function createSingleComponent(namespace, config) {
   const { base, variants = {}, compoundVariants = [], defaultVariants = {} } = config;
   if (process.env.NODE_ENV !== "production") {
     if (registeredNamespaces.has(namespace)) {
@@ -359,46 +585,169 @@ function createComponent(namespace, config) {
   }
   registeredNamespaces.add(namespace);
   const rules = [];
+  let baseClassName;
+  const variantClassByKey = {};
+  const compoundClassByIndex = [];
   if (base) {
-    rules.push(...serializeStyle(`.${namespace}-base`, base));
+    baseClassName = buildRecipeClassName(namespace, "base", base);
+    rules.push(...serializeStyle(`.${baseClassName}`, base));
   }
   for (const [dimension, options] of Object.entries(variants)) {
     for (const [option, properties] of Object.entries(options)) {
-      const className = `.${namespace}-${dimension}-${option}`;
-      rules.push(...serializeStyle(className, properties));
+      const segment = `${dimension}-${option}`;
+      const className = buildRecipeClassName(namespace, segment, properties);
+      variantClassByKey[segment] = className;
+      rules.push(...serializeStyle(`.${className}`, properties));
     }
   }
   compoundVariants.forEach(
     (cv, index) => {
-      const className = `.${namespace}-compound-${index}`;
-      rules.push(...serializeStyle(className, cv.style));
+      const className = buildRecipeClassName(namespace, `compound-${index}`, cv.style);
+      compoundClassByIndex[index] = className;
+      rules.push(...serializeStyle(`.${className}`, cv.style));
     }
   );
   insertRules(rules);
   return ((selections = {}) => {
     const classes = [];
-    if (base) classes.push(`${namespace}-base`);
+    if (base && baseClassName) classes.push(baseClassName);
     const resolvedSelections = {};
-    for (const dimension of Object.keys(variants)) {
-      resolvedSelections[dimension] = selections[dimension] ?? defaultVariants[dimension];
+    for (const [dimension, options] of Object.entries(variants)) {
+      const optionMap = options;
+      const explicit = selections[dimension];
+      const fallback = defaultVariants[dimension];
+      resolvedSelections[dimension] = normalizeSelection(explicit ?? fallback, optionMap);
     }
-    for (const dimension of Object.keys(variants)) {
+    for (const [dimension, options] of Object.entries(variants)) {
       const selected = resolvedSelections[dimension];
-      if (selected != null && selected !== false) {
-        classes.push(`${namespace}-${dimension}-${String(selected)}`);
+      const optionMap = options;
+      const selectedKey = normalizeSelection(selected, optionMap);
+      if (selectedKey != null) {
+        const variantKey = `${dimension}-${selectedKey}`;
+        const cn = variantClassByKey[variantKey];
+        if (cn) classes.push(cn);
       }
     }
     compoundVariants.forEach(
       (cv, index) => {
-        const matches = Object.entries(cv.variants).every(
-          ([k, v]) => resolvedSelections[k] === v
-        );
-        if (matches) classes.push(`${namespace}-compound-${index}`);
+        const matches = Object.entries(cv.variants).every(([k, expected]) => {
+          const options = variants[k];
+          if (!options) return false;
+          const selected = normalizeSelection(resolvedSelections[k], options);
+          if (selected == null) return false;
+          if (Array.isArray(expected)) {
+            return expected.some((value) => normalizeSelection(value, options) === selected);
+          }
+          return normalizeSelection(expected, options) === selected;
+        });
+        if (matches) {
+          const cn = compoundClassByIndex[index];
+          if (cn) classes.push(cn);
+        }
       }
     );
     return classes.join(" ");
   });
 }
+function normalizeSelection(value, options) {
+  if (value == null) return void 0;
+  if (typeof value === "boolean") {
+    const boolKey = String(value);
+    if (Object.prototype.hasOwnProperty.call(options, boolKey)) return boolKey;
+    if (value === false) return void 0;
+    return boolKey;
+  }
+  return String(value);
+}
+function createSlotComponent(namespace, config) {
+  const { slots, base = {}, variants = {}, compoundVariants = [], defaultVariants = {} } = config;
+  if (process.env.NODE_ENV !== "production") {
+    if (registeredNamespaces.has(namespace)) {
+      console.warn(
+        `[typestyles] styles.component('${namespace}', ...) called more than once. This will cause class name collisions. Each namespace should be unique.`
+      );
+    }
+  }
+  registeredNamespaces.add(namespace);
+  const rules = [];
+  const baseClassBySlot = {};
+  for (const [slot, properties] of Object.entries(base)) {
+    const className = buildRecipeClassName(namespace, slot, properties);
+    baseClassBySlot[slot] = className;
+    rules.push(...serializeStyle(`.${className}`, properties));
+  }
+  const variantClassByKey = {};
+  for (const [dimension, options] of Object.entries(variants)) {
+    for (const [option, slotStyles] of Object.entries(options)) {
+      for (const [slot, properties] of Object.entries(slotStyles)) {
+        const segment = `${slot}-${dimension}-${option}`;
+        const className = buildRecipeClassName(namespace, segment, properties);
+        variantClassByKey[segment] = className;
+        rules.push(...serializeStyle(`.${className}`, properties));
+      }
+    }
+  }
+  const slotCompoundClassByKey = {};
+  compoundVariants.forEach(
+    (cv, index) => {
+      for (const [slot, properties] of Object.entries(cv.style)) {
+        const segment = `${slot}-compound-${index}`;
+        const className = buildRecipeClassName(namespace, segment, properties);
+        slotCompoundClassByKey[`${slot}::${index}`] = className;
+        rules.push(...serializeStyle(`.${className}`, properties));
+      }
+    }
+  );
+  insertRules(rules);
+  return ((selections = {}) => {
+    const classes = Object.fromEntries(slots.map((slot) => [slot, []]));
+    const resolvedSelections = {};
+    for (const [dimension, options] of Object.entries(variants)) {
+      const optionMap = options;
+      const explicit = selections[dimension];
+      const fallback = defaultVariants[dimension];
+      resolvedSelections[dimension] = normalizeSelection(explicit ?? fallback, optionMap);
+    }
+    for (const slot of Object.keys(base)) {
+      const cn = baseClassBySlot[slot];
+      if (cn && classes[slot]) classes[slot].push(cn);
+    }
+    for (const [dimension, options] of Object.entries(variants)) {
+      const optionMap = options;
+      const selected = normalizeSelection(resolvedSelections[dimension], optionMap);
+      if (selected == null) continue;
+      const slotStyles = optionMap[selected];
+      if (!slotStyles) continue;
+      for (const slot of Object.keys(slotStyles)) {
+        const segment = `${slot}-${dimension}-${selected}`;
+        const cn = variantClassByKey[segment];
+        if (cn && classes[slot]) classes[slot].push(cn);
+      }
+    }
+    compoundVariants.forEach(
+      (cv, index) => {
+        const matches = Object.entries(cv.variants).every(([k, expected]) => {
+          const options = variants[k];
+          if (!options) return false;
+          const selected = normalizeSelection(resolvedSelections[k], options);
+          if (selected == null) return false;
+          if (Array.isArray(expected)) {
+            return expected.some((value) => normalizeSelection(value, options) === selected);
+          }
+          return normalizeSelection(expected, options) === selected;
+        });
+        if (!matches) return;
+        for (const slot of Object.keys(cv.style)) {
+          const cn = slotCompoundClassByKey[`${slot}::${index}`];
+          if (cn && classes[slot]) classes[slot].push(cn);
+        }
+      }
+    );
+    return Object.fromEntries(
+      slots.map((slot) => [slot, classes[slot].join(" ")])
+    );
+  });
+}
 
 // src/global.ts
 function globalStyle(selector, properties) {
@@ -435,7 +784,10 @@ function assignVars(vars) {
 // src/index.ts
 var styles = {
   create: createStyles,
+  class: createClass,
+  hashClass: createHashClass,
   component: createComponent,
+  withUtils: createStylesWithUtils,
   compose
 };
 var global = {
@@ -454,13 +806,16 @@ var color = color_exports;
 
 exports.assignVars = assignVars;
 exports.color = color;
+exports.configureClassNaming = configureClassNaming;
 exports.createVar = createVar;
 exports.flushSync = flushSync;
+exports.getClassNamingConfig = getClassNamingConfig;
 exports.getRegisteredCss = getRegisteredCss;
 exports.global = global;
 exports.insertRules = insertRules;
 exports.keyframes = keyframes;
 exports.reset = reset;
+exports.resetClassNaming = resetClassNaming;
 exports.styles = styles;
 exports.tokens = tokens;
 //# sourceMappingURL=index.cjs.map