@makeswift/runtime 0.28.10-canary.9 → 0.29.0-canary.19

package/dist/cjs/runtimes/react/css-runtime/hooks/use-style.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-style.ts"],"sourcesContent":["import { generateClassName } from '../utils'\nimport { CSSObject } from '@emotion/serialize'\nimport React from 'react'\nimport clsx from 'clsx'\nimport { useStylesContext } from './use-styles-context'\nimport { toCssStatements } from '../serialize-css'\nimport { MakeswiftStyle } from '../components/makeswift-style'\n\n/**\n * Generates a css class name and corresponding style element based on the provided\n * styles object.\n *\n * This is intended to be used for \"uncontrolled\" (not editable in Makeswift) styles\n * such as those defined inline in builtin components.\n */\nexport function useStyle(style: CSSObject) {\n  const { classNamePrefix, stylesRegistry } = useStylesContext()\n  const className = generateClassName({\n    data: JSON.stringify(style),\n    classNamePrefix,\n  })\n  let styleData = stylesRegistry.getUncontrolledClassStyles().get(className)\n  if (styleData == null) {\n    const { css } = toCssStatements(style, className)\n    styleData = {\n      className,\n      css,\n      cssObject: style,\n    }\n    stylesRegistry.setUncontrolledClassStyle(styleData)\n  }\n  const styleElement = React.createElement(MakeswiftStyle, {\n    key: className,\n    href: className,\n    css: styleData.css,\n  })\n  return {\n    className,\n    styleElement,\n  }\n}\n\n/**\n * Supplements `useStyle` by providing call sites with a similarly-shaped successor to Emotion's `cx`\n * utility, which was used heavily by builtin components to \"compose\" class names through the following\n * pattern:\n *\n * ```tsx\n * const className = cx(\n *   useStyle({ color: 'red' }),\n *   'class-name-A',\n *   'class-name-B',\n *   useStyle({ fontSize: 16 }),\n * )\n * ```\n *\n * The new pattern using `composeStyles` looks like:\n *\n * ```tsx\n * const { className, styleElements } = composeStyles(\n *   useStyle({ color: 'red' }),\n *   'class-name-A',\n *   'class-name-B',\n *   useStyle({ fontSize: 16 }),\n * )\n * ```\n *\n * Followed by rendering `styleElements` alongside the element\n * where they're used:\n *\n * ```tsx\n * return (\n *  <>\n *   {styleElements}\n *   <div\n *     {...props}\n *     className={className}>\n *   />\n *  </>\n * )\n * ```\n */\nexport function composeStyles(...args: Array<string | ReturnType<typeof useStyle> | undefined>) {\n  const classNames: string[] = []\n  const styleElements: React.ReactElement[] = []\n  args.forEach(arg => {\n    if (arg == null) return\n    if (typeof arg === 'string') {\n      classNames.push(arg)\n    } else {\n      classNames.push(arg.className)\n      styleElements.push(arg.styleElement)\n    }\n  })\n  const combinedClassName = clsx(classNames)\n  return {\n    className: combinedClassName,\n    styleElements,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAElC,mBAAkB;AAClB,kBAAiB;AACjB,gCAAiC;AACjC,2BAAgC;AAChC,6BAA+B;AASxB,SAAS,SAAS,OAAkB;AACzC,QAAM,EAAE,iBAAiB,eAAe,QAAI,4CAAiB;AAC7D,QAAM,gBAAY,gCAAkB;AAAA,IAClC,MAAM,KAAK,UAAU,KAAK;AAAA,IAC1B;AAAA,EACF,CAAC;AACD,MAAI,YAAY,eAAe,2BAA2B,EAAE,IAAI,SAAS;AACzE,MAAI,aAAa,MAAM;AACrB,UAAM,EAAE,IAAI,QAAI,sCAAgB,OAAO,SAAS;AAChD,gBAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IACb;AACA,mBAAe,0BAA0B,SAAS;AAAA,EACpD;AACA,QAAM,eAAe,aAAAA,QAAM,cAAc,uCAAgB;AAAA,IACvD,KAAK;AAAA,IACL,MAAM;AAAA,IACN,KAAK,UAAU;AAAA,EACjB,CAAC;AACD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AA0CO,SAAS,iBAAiB,MAA+D;AAC9F,QAAM,aAAuB,CAAC;AAC9B,QAAM,gBAAsC,CAAC;AAC7C,OAAK,QAAQ,SAAO;AAClB,QAAI,OAAO;AAAM;AACjB,QAAI,OAAO,QAAQ,UAAU;AAC3B,iBAAW,KAAK,GAAG;AAAA,IACrB,OAAO;AACL,iBAAW,KAAK,IAAI,SAAS;AAC7B,oBAAc,KAAK,IAAI,YAAY;AAAA,IACrC;AAAA,EACF,CAAC;AACD,QAAM,wBAAoB,YAAAC,SAAK,UAAU;AACzC,SAAO;AAAA,IACL,WAAW;AAAA,IACX;AAAA,EACF;AACF;","names":["React","clsx"]}

package/dist/cjs/runtimes/react/css-runtime/hooks/use-styles-context.js

@@ -0,0 +1,39 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_styles_context_exports = {};
+__export(use_styles_context_exports, {
+  useStylesContext: () => useStylesContext
+});
+module.exports = __toCommonJS(use_styles_context_exports);
+var import_react = require("react");
+var import_styles_context_provider = require("../components/styles-context-provider");
+function useStylesContext() {
+  const context = (0, import_react.useContext)(import_styles_context_provider.StylesContext);
+  if (!context) {
+    throw new Error(
+      "Styles context not found. Did you attempt to render Makeswift content without a <RootStyleRegistry> ancestor?"
+    );
+  }
+  return context;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStylesContext
+});
+//# sourceMappingURL=use-styles-context.js.map

package/dist/cjs/runtimes/react/css-runtime/hooks/use-styles-context.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-styles-context.ts"],"sourcesContent":["import { useContext } from 'react'\nimport { StylesContext, StylesContextValue } from '../components/styles-context-provider'\n\nexport function useStylesContext(): StylesContextValue {\n  const context = useContext(StylesContext)\n  if (!context) {\n    throw new Error(\n      'Styles context not found. Did you attempt to render Makeswift content without a <RootStyleRegistry> ancestor?',\n    )\n  }\n  return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAC3B,qCAAkD;AAE3C,SAAS,mBAAuC;AACrD,QAAM,cAAU,yBAAW,4CAAa;AACxC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}

package/dist/cjs/runtimes/react/css-runtime/serialize-css.js

@@ -0,0 +1,51 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var serialize_css_exports = {};
+__export(serialize_css_exports, {
+  processCss: () => processCss,
+  toCssStatements: () => toCssStatements,
+  toRawCss: () => toRawCss
+});
+module.exports = __toCommonJS(serialize_css_exports);
+var import_serialize = require("@emotion/serialize");
+var import_stylis = require("stylis");
+function toCssStatements(stylesObject, className) {
+  const { content: rawCssContent, contentHash } = toRawCss([stylesObject]);
+  const classNameRawCss = `.${className} {${rawCssContent}}`;
+  const css = processCss({ content: classNameRawCss });
+  return { css, contentHash };
+}
+function processCss({ content }) {
+  const cssElementTree = (0, import_stylis.compile)(content);
+  return (0, import_stylis.serialize)(cssElementTree, (0, import_stylis.middleware)([import_stylis.prefixer, import_stylis.stringify]));
+}
+function toRawCss(styles) {
+  const emotionSerializationResult = (0, import_serialize.serializeStyles)(styles);
+  return {
+    content: emotionSerializationResult.styles,
+    contentHash: emotionSerializationResult.name
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  processCss,
+  toCssStatements,
+  toRawCss
+});
+//# sourceMappingURL=serialize-css.js.map

package/dist/cjs/runtimes/react/css-runtime/serialize-css.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/serialize-css.ts"],"sourcesContent":["import { CSSObject, serializeStyles as emotionSerializeStyles } from '@emotion/serialize'\nimport { serialize, compile, stringify, prefixer, middleware } from 'stylis'\n\n/**\n * Creates a css string from the styles object and provided class name.\n *\n * The output of this function is the \"final\" css that is intended to be used directly\n * as `<style>` content, constructible stylesheet content, etc.\n *\n * For \"controlled\" styles, this represents the last step in the conversion of:\n *    Makeswift prop data -> JS styles object -> css string\n *\n * For \"uncontrolled\" styles, this is used to convert an inline JS styles object\n * into a css string.\n */\nexport function toCssStatements(\n  stylesObject: CSSObject,\n  className: string,\n): { css: string; contentHash: string } {\n  const { content: rawCssContent, contentHash } = toRawCss([stylesObject])\n  const classNameRawCss = `.${className} {${rawCssContent}}`\n  const css = processCss({ content: classNameRawCss })\n  return { css, contentHash }\n}\n\n/**\n * This is a layer in the css pipeline that uses a css preprocessor\n * to apply select transformations to \"raw\" css input.\n *\n * Converts the inputted css content into an abstract syntax tree for manipulation\n * (performing unnesting, applying vendor prefixes, etc.). Re-serializes and returns\n * the transformed css string.\n */\nexport function processCss({ content }: { content: string }): string {\n  const cssElementTree = compile(content)\n  return serialize(cssElementTree, middleware([prefixer, stringify]))\n}\n\n/**\n * Uses Emotion's `serializeStyles` function to create a css string\n * which is returned along with a content hash.\n *\n * The resulting css content is \"raw\" in the sense that it hasn't been passed\n * through our css preprocessing layer.\n */\nexport function toRawCss(styles: Array<CSSObject>): { content: string; contentHash: string } {\n  const emotionSerializationResult = emotionSerializeStyles(styles)\n  return {\n    content: emotionSerializationResult.styles,\n    contentHash: emotionSerializationResult.name,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAqE;AACrE,oBAAoE;AAc7D,SAAS,gBACd,cACA,WACsC;AACtC,QAAM,EAAE,SAAS,eAAe,YAAY,IAAI,SAAS,CAAC,YAAY,CAAC;AACvE,QAAM,kBAAkB,IAAI,SAAS,KAAK,aAAa;AACvD,QAAM,MAAM,WAAW,EAAE,SAAS,gBAAgB,CAAC;AACnD,SAAO,EAAE,KAAK,YAAY;AAC5B;AAUO,SAAS,WAAW,EAAE,QAAQ,GAAgC;AACnE,QAAM,qBAAiB,uBAAQ,OAAO;AACtC,aAAO,yBAAU,oBAAgB,0BAAW,CAAC,wBAAU,uBAAS,CAAC,CAAC;AACpE;AASO,SAAS,SAAS,QAAoE;AAC3F,QAAM,iCAA6B,iBAAAA,iBAAuB,MAAM;AAChE,SAAO;AAAA,IACL,SAAS,2BAA2B;AAAA,IACpC,aAAa,2BAA2B;AAAA,EAC1C;AACF;","names":["emotionSerializeStyles"]}

package/dist/cjs/runtimes/react/css-runtime/style-element-updater.js

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var style_element_updater_exports = {};
+__export(style_element_updater_exports, {
+  StyleElementUpdater: () => StyleElementUpdater
+});
+module.exports = __toCommonJS(style_element_updater_exports);
+class StyleElementUpdater {
+  constructor() {
+  }
+  apply({ className, css }) {
+    const styleElement = this.findStyleElement(className);
+    if (styleElement) {
+      styleElement.textContent = css;
+    }
+  }
+  findStyleElement(className) {
+    const matchingStyleElements = document.querySelectorAll(
+      `style[data-href="${className}"]`
+    );
+    if (matchingStyleElements.length === 0) {
+      console.warn(
+        `Attempted to remove stale style rules for an editable Makeswift class '${className}', but found no corresponding style element`
+      );
+      return null;
+    }
+    if (matchingStyleElements.length > 1) {
+      console.warn(
+        `Attempted to remove stale style rules for an editable Makeswift class '${className}', but found multiple corresponding style elements`
+      );
+      return null;
+    }
+    return matchingStyleElements[0];
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StyleElementUpdater
+});
+//# sourceMappingURL=style-element-updater.js.map

package/dist/cjs/runtimes/react/css-runtime/style-element-updater.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/style-element-updater.ts"],"sourcesContent":["import { BrowserStyleApplier } from './types'\n\nexport class StyleElementUpdater implements BrowserStyleApplier {\n  constructor() {}\n\n  apply({ className, css }: { className: string; css: string }): void {\n    const styleElement = this.findStyleElement(className)\n    if (styleElement) {\n      styleElement.textContent = css\n    }\n  }\n\n  private findStyleElement(className: string): HTMLStyleElement | null {\n    const matchingStyleElements = document.querySelectorAll<HTMLStyleElement>(\n      `style[data-href=\"${className}\"]`,\n    )\n    if (matchingStyleElements.length === 0) {\n      console.warn(\n        `Attempted to remove stale style rules for an editable Makeswift class '${className}', but found no corresponding style element`,\n      )\n      return null\n    }\n    if (matchingStyleElements.length > 1) {\n      console.warn(\n        `Attempted to remove stale style rules for an editable Makeswift class '${className}', but found multiple corresponding style elements`,\n      )\n      return null\n    }\n    return matchingStyleElements[0]\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEO,MAAM,oBAAmD;AAAA,EAC9D,cAAc;AAAA,EAAC;AAAA,EAEf,MAAM,EAAE,WAAW,IAAI,GAA6C;AAClE,UAAM,eAAe,KAAK,iBAAiB,SAAS;AACpD,QAAI,cAAc;AAChB,mBAAa,cAAc;AAAA,IAC7B;AAAA,EACF;AAAA,EAEQ,iBAAiB,WAA4C;AACnE,UAAM,wBAAwB,SAAS;AAAA,MACrC,oBAAoB,SAAS;AAAA,IAC/B;AACA,QAAI,sBAAsB,WAAW,GAAG;AACtC,cAAQ;AAAA,QACN,0EAA0E,SAAS;AAAA,MACrF;AACA,aAAO;AAAA,IACT;AACA,QAAI,sBAAsB,SAAS,GAAG;AACpC,cAAQ;AAAA,QACN,0EAA0E,SAAS;AAAA,MACrF;AACA,aAAO;AAAA,IACT;AACA,WAAO,sBAAsB,CAAC;AAAA,EAChC;AACF;","names":[]}

package/dist/cjs/runtimes/react/css-runtime/styles-registry.js

@@ -0,0 +1,283 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styles_registry_exports = {};
+__export(styles_registry_exports, {
+  StylesRegistry: () => StylesRegistry
+});
+module.exports = __toCommonJS(styles_registry_exports);
+var import_utils = require("./utils");
+var import_types = require("./types");
+class StylesRegistry {
+  // Keyed by class name
+  uncontrolledClassStyles;
+  // Outer map keyed by namespace, inner map keyed by class name
+  namespaceControlledStyles;
+  // Keyed by keyframes name
+  keyframes;
+  // Keyed by content hash
+  cssResets;
+  // Keyed by content hash
+  baseStyles;
+  // Keyed by class name
+  controlledStylesInitialData;
+  controlledStyleWriteListeners;
+  constructor() {
+    this.uncontrolledClassStyles = /* @__PURE__ */ new Map();
+    this.namespaceControlledStyles = /* @__PURE__ */ new Map();
+    this.keyframes = /* @__PURE__ */ new Map();
+    this.cssResets = /* @__PURE__ */ new Map();
+    this.baseStyles = /* @__PURE__ */ new Map();
+    this.controlledStyleWriteListeners = /* @__PURE__ */ new Set();
+    this.controlledStylesInitialData = /* @__PURE__ */ new Map();
+  }
+  /*
+    Getters
+  */
+  getUncontrolledClassStyles() {
+    return this.uncontrolledClassStyles;
+  }
+  getControlledStyles(namespace) {
+    return this.getOrCreateControlledStylesMapForNamespace(namespace);
+  }
+  getKeyframes() {
+    return this.keyframes;
+  }
+  getCssResets() {
+    return this.cssResets;
+  }
+  getBaseStyles() {
+    return this.baseStyles;
+  }
+  /*
+    Setters
+  */
+  setControlledStyle({
+    namespace,
+    className,
+    data
+  }) {
+    const namespaceControlledStyleData = this.getOrCreateControlledStylesMapForNamespace(namespace);
+    const previousData = namespaceControlledStyleData.get(className);
+    if (previousData != null && previousData.contentHash === data.contentHash) {
+      return;
+    }
+    namespaceControlledStyleData.set(className, data);
+    let initialData = this.controlledStylesInitialData.get(className);
+    if (initialData == null) {
+      initialData = data;
+      this.controlledStylesInitialData.set(className, data);
+    }
+    this.notifyOnControlledStyleWrite({
+      className,
+      currentData: data,
+      initialData
+    });
+  }
+  setUncontrolledClassStyle(data) {
+    this.uncontrolledClassStyles.set(data.className, data);
+  }
+  setKeyframes(data) {
+    this.keyframes.set(data.keyframesName, data);
+  }
+  setCssReset(data) {
+    this.cssResets.set(data.contentHash, data);
+  }
+  setBaseStyles(data) {
+    this.baseStyles.set(data.contentHash, data);
+  }
+  /*
+    Serialization
+  */
+  /**
+   * Creates an HTML string containing `<style>` elements for the contents of the
+   * registry, ordered by precedence (lower precedences first).
+   *
+   * This is intended to be used server-side in scenarios where we can't
+   * depend on React's hoisting behavior to place `<style>` elements in the page
+   * `<head>`.
+   *
+   * When using this for SSR, the `RootStyleRegistry` should be configured so that
+   * it does not render `<style>` elements alongside components (to avoid creating
+   * duplicates).
+   *
+   * There's an argument for providing these as an array of raw style data so
+   * that applications which render multiple React roots can deduplicate styles
+   * between them.
+   */
+  serializeToHtmlStyleTags() {
+    return this.serializeToStyleProps().map((stylePropsForPrecedence) => (0, import_utils.styleTagHtml)(stylePropsForPrecedence)).join("");
+  }
+  /**
+   * Returns an array of `MakeswiftStyle` component props for the contents of the
+   * registry, ordered by precedence (lower precedences first).
+   *
+   * It might be desirable in some cases to avoid filtering out empty data, since
+   * an empty `<style>` tag in the page `<head>` can still serve as an anchor to
+   * which client-side React can hoist `<style>`s added after page load.
+   */
+  serializeToStyleProps(includeEmpty = false) {
+    const resetPrecedenceStylesProps = this.getPropsForResetPrecedenceStyles();
+    const mediumPrecedenceStylesProps = this.getPropsForMediumPrecedenceStyles();
+    const highPrecedenceStylesProps = this.getPropsForHighPrecedenceStyles();
+    const perPrecedenceProps = [
+      resetPrecedenceStylesProps,
+      mediumPrecedenceStylesProps,
+      highPrecedenceStylesProps,
+      ...this.getPropsForCustomPrecedenceStyles()
+    ];
+    return includeEmpty ? perPrecedenceProps : perPrecedenceProps.filter((props) => props.href.length > 0);
+  }
+  /*
+    Subscriptions
+  */
+  subscribeToControlledStyleWrites(listener) {
+    this.controlledStyleWriteListeners.add(listener);
+    const unsubscribe = () => {
+      this.controlledStyleWriteListeners.delete(listener);
+    };
+    return unsubscribe;
+  }
+  notifyOnControlledStyleWrite({
+    className,
+    currentData,
+    initialData
+  }) {
+    if (this.controlledStyleWriteListeners.size > 0) {
+      queueMicrotask(() => {
+        for (const listener of this.controlledStyleWriteListeners) {
+          try {
+            listener({ className, currentData, initialData });
+          } catch (e) {
+            console.error(`Error notifying listener for className ${className}:`, e);
+          }
+        }
+      });
+    }
+  }
+  /*
+    Helpers
+  */
+  getOrCreateControlledStylesMapForNamespace(namespace) {
+    let namespaceControlledStyles = this.namespaceControlledStyles.get(namespace);
+    if (namespaceControlledStyles == null) {
+      namespaceControlledStyles = /* @__PURE__ */ new Map();
+      this.namespaceControlledStyles.set(namespace, namespaceControlledStyles);
+    }
+    return namespaceControlledStyles;
+  }
+  getAllControlledStyles() {
+    const result = /* @__PURE__ */ new Map();
+    const controlledStyleNamespaces = Array.from(this.namespaceControlledStyles.keys());
+    for (const namespace of controlledStyleNamespaces) {
+      const namespaceControlledStyles = this.namespaceControlledStyles.get(namespace);
+      if (namespaceControlledStyles == null)
+        continue;
+      for (const [className, data] of namespaceControlledStyles.entries()) {
+        result.set(className, data);
+      }
+    }
+    return result;
+  }
+  getPropsForResetPrecedenceStyles() {
+    const cssResets = this.getCssResets();
+    const hrefValues = new Array();
+    const allCss = new Array();
+    for (const [contentHash, cssResetData] of cssResets.entries()) {
+      hrefValues.push(`makeswift-css-reset-${contentHash}`);
+      allCss.push(cssResetData.css);
+    }
+    const combinedHref = hrefValues.join(" ");
+    const combinedCss = allCss.join("");
+    return {
+      href: combinedHref,
+      css: combinedCss,
+      precedence: import_types.MakeswiftStylePrecedence.RESET
+    };
+  }
+  getPropsForMediumPrecedenceStyles() {
+    const styles = this.getUncontrolledClassStyles();
+    const keyframes = this.getKeyframes();
+    const hrefValues = new Array();
+    const allCss = new Array();
+    for (const [className, uncontrolledStyleData] of styles.entries()) {
+      hrefValues.push(className);
+      allCss.push(uncontrolledStyleData.css);
+    }
+    for (const [keyframesName, keyframesData] of keyframes.entries()) {
+      hrefValues.push(keyframesName);
+      allCss.push(keyframesData.css);
+    }
+    const combinedHref = hrefValues.join(" ");
+    const combinedCss = allCss.join("");
+    return {
+      href: combinedHref,
+      css: combinedCss,
+      precedence: import_types.MakeswiftStylePrecedence.MEDIUM
+    };
+  }
+  getPropsForHighPrecedenceStyles() {
+    const baseStyles = this.getBaseStyles();
+    const hrefValues = new Array();
+    const allCss = new Array();
+    for (const [contentHash, baseStylesData] of baseStyles.entries()) {
+      hrefValues.push(`makeswift-base-styles-${contentHash}`);
+      allCss.push(baseStylesData.css);
+    }
+    const combinedHref = hrefValues.join(" ");
+    const combinedCss = allCss.join("");
+    return {
+      href: combinedHref,
+      css: combinedCss,
+      precedence: import_types.MakeswiftStylePrecedence.HIGH
+    };
+  }
+  getPropsForCustomPrecedenceStyles() {
+    const controlledStyles = this.getAllControlledStyles();
+    const customPrecedenceValues = /* @__PURE__ */ new Set();
+    const customPrecedenceToHrefValues = /* @__PURE__ */ new Map();
+    const customPrecedenceToCss = /* @__PURE__ */ new Map();
+    for (const [className, controlledStyleData] of controlledStyles.entries()) {
+      const precedence = (0, import_utils.getControlledStylePrecedence)(controlledStyleData);
+      customPrecedenceValues.add(precedence);
+      const hrefValues = customPrecedenceToHrefValues.get(precedence) ?? [];
+      const css = customPrecedenceToCss.get(precedence) ?? [];
+      hrefValues.push(className);
+      css.push(controlledStyleData.css);
+      customPrecedenceToHrefValues.set(precedence, hrefValues);
+      customPrecedenceToCss.set(precedence, css);
+    }
+    return Array.from(customPrecedenceValues.values()).map((customPrecedenceValue) => {
+      const hrefValues = customPrecedenceToHrefValues.get(customPrecedenceValue) ?? [];
+      const allCss = customPrecedenceToCss.get(customPrecedenceValue) ?? [];
+      const combinedHref = hrefValues.join(" ");
+      const combinedCss = allCss.join("");
+      const propsForCustomPrecedence = {
+        href: combinedHref,
+        css: combinedCss,
+        precedence: customPrecedenceValue
+      };
+      return propsForCustomPrecedence;
+    });
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StylesRegistry
+});
+//# sourceMappingURL=styles-registry.js.map

package/dist/cjs/runtimes/react/css-runtime/styles-registry.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/styles-registry.ts"],"sourcesContent":["import { getControlledStylePrecedence, styleTagHtml } from './utils'\nimport {\n  BaseStylesData,\n  ClassStyleData,\n  ControlledStyleData,\n  CssResetData,\n  KeyframesData,\n  MakeswiftStylePrecedence,\n  OnControlledStyleDataWrite,\n} from './types'\nimport { ComponentProps } from 'react'\nimport { MakeswiftStyle } from './components/makeswift-style'\n\nexport class StylesRegistry {\n  // Keyed by class name\n  private uncontrolledClassStyles: Map<string, ClassStyleData>\n\n  // Outer map keyed by namespace, inner map keyed by class name\n  private namespaceControlledStyles: Map<string, Map<string, ControlledStyleData>>\n\n  // Keyed by keyframes name\n  private keyframes: Map<string, KeyframesData>\n\n  // Keyed by content hash\n  private cssResets: Map<string, CssResetData>\n\n  // Keyed by content hash\n  private baseStyles: Map<string, BaseStylesData>\n\n  // Keyed by class name\n  private controlledStylesInitialData: Map<string, ControlledStyleData>\n  private controlledStyleWriteListeners: Set<OnControlledStyleDataWrite>\n\n  constructor() {\n    this.uncontrolledClassStyles = new Map()\n    this.namespaceControlledStyles = new Map()\n    this.keyframes = new Map()\n    this.cssResets = new Map()\n    this.baseStyles = new Map()\n    this.controlledStyleWriteListeners = new Set()\n    this.controlledStylesInitialData = new Map()\n  }\n\n  /*\n    Getters\n  */\n\n  getUncontrolledClassStyles(): ReadonlyMap<string, ClassStyleData> {\n    return this.uncontrolledClassStyles\n  }\n\n  getControlledStyles(namespace: string): ReadonlyMap<string, ControlledStyleData> {\n    return this.getOrCreateControlledStylesMapForNamespace(namespace)\n  }\n\n  getKeyframes(): ReadonlyMap<string, KeyframesData> {\n    return this.keyframes\n  }\n\n  getCssResets(): ReadonlyMap<string, CssResetData> {\n    return this.cssResets\n  }\n\n  getBaseStyles(): ReadonlyMap<string, BaseStylesData> {\n    return this.baseStyles\n  }\n\n  /*\n    Setters\n  */\n\n  setControlledStyle({\n    namespace,\n    className,\n    data,\n  }: {\n    namespace: string\n    className: string\n    data: ControlledStyleData\n  }) {\n    const namespaceControlledStyleData = this.getOrCreateControlledStylesMapForNamespace(namespace)\n\n    const previousData = namespaceControlledStyleData.get(className)\n    if (previousData != null && previousData.contentHash === data.contentHash) {\n      return\n    }\n\n    namespaceControlledStyleData.set(className, data)\n\n    let initialData = this.controlledStylesInitialData.get(className)\n    if (initialData == null) {\n      initialData = data\n      this.controlledStylesInitialData.set(className, data)\n    }\n    this.notifyOnControlledStyleWrite({\n      className,\n      currentData: data,\n      initialData,\n    })\n  }\n\n  setUncontrolledClassStyle(data: ClassStyleData) {\n    this.uncontrolledClassStyles.set(data.className, data)\n  }\n\n  setKeyframes(data: KeyframesData) {\n    this.keyframes.set(data.keyframesName, data)\n  }\n\n  setCssReset(data: CssResetData) {\n    this.cssResets.set(data.contentHash, data)\n  }\n\n  setBaseStyles(data: BaseStylesData) {\n    this.baseStyles.set(data.contentHash, data)\n  }\n\n  /*\n    Serialization\n  */\n\n  /**\n   * Creates an HTML string containing `<style>` elements for the contents of the\n   * registry, ordered by precedence (lower precedences first).\n   *\n   * This is intended to be used server-side in scenarios where we can't\n   * depend on React's hoisting behavior to place `<style>` elements in the page\n   * `<head>`.\n   *\n   * When using this for SSR, the `RootStyleRegistry` should be configured so that\n   * it does not render `<style>` elements alongside components (to avoid creating\n   * duplicates).\n   *\n   * There's an argument for providing these as an array of raw style data so\n   * that applications which render multiple React roots can deduplicate styles\n   * between them.\n   */\n  serializeToHtmlStyleTags(): string {\n    return this.serializeToStyleProps()\n      .map(stylePropsForPrecedence => styleTagHtml(stylePropsForPrecedence))\n      .join('')\n  }\n\n  /**\n   * Returns an array of `MakeswiftStyle` component props for the contents of the\n   * registry, ordered by precedence (lower precedences first).\n   *\n   * It might be desirable in some cases to avoid filtering out empty data, since\n   * an empty `<style>` tag in the page `<head>` can still serve as an anchor to\n   * which client-side React can hoist `<style>`s added after page load.\n   */\n  serializeToStyleProps(\n    includeEmpty: boolean = false,\n  ): Array<ComponentProps<typeof MakeswiftStyle>> {\n    const resetPrecedenceStylesProps = this.getPropsForResetPrecedenceStyles()\n    const mediumPrecedenceStylesProps = this.getPropsForMediumPrecedenceStyles()\n    const highPrecedenceStylesProps = this.getPropsForHighPrecedenceStyles()\n\n    const perPrecedenceProps = [\n      resetPrecedenceStylesProps,\n      mediumPrecedenceStylesProps,\n      highPrecedenceStylesProps,\n      ...this.getPropsForCustomPrecedenceStyles(),\n    ]\n    return includeEmpty\n      ? perPrecedenceProps\n      : perPrecedenceProps.filter(props => props.href.length > 0)\n  }\n\n  /*\n    Subscriptions\n  */\n  subscribeToControlledStyleWrites(listener: OnControlledStyleDataWrite): () => void {\n    this.controlledStyleWriteListeners.add(listener)\n    const unsubscribe = () => {\n      this.controlledStyleWriteListeners.delete(listener)\n    }\n    return unsubscribe\n  }\n\n  notifyOnControlledStyleWrite({\n    className,\n    currentData,\n    initialData,\n  }: {\n    className: string\n    currentData: ControlledStyleData\n    initialData: ControlledStyleData\n  }) {\n    if (this.controlledStyleWriteListeners.size > 0) {\n      queueMicrotask(() => {\n        for (const listener of this.controlledStyleWriteListeners) {\n          try {\n            listener({ className, currentData, initialData })\n          } catch (e) {\n            console.error(`Error notifying listener for className ${className}:`, e)\n          }\n        }\n      })\n    }\n  }\n\n  /*\n    Helpers\n  */\n\n  private getOrCreateControlledStylesMapForNamespace(\n    namespace: string,\n  ): Map<string, ControlledStyleData> {\n    let namespaceControlledStyles = this.namespaceControlledStyles.get(namespace)\n    if (namespaceControlledStyles == null) {\n      namespaceControlledStyles = new Map()\n      this.namespaceControlledStyles.set(namespace, namespaceControlledStyles)\n    }\n    return namespaceControlledStyles\n  }\n\n  private getAllControlledStyles(): Map<string, ControlledStyleData> {\n    const result = new Map<string, ControlledStyleData>()\n    const controlledStyleNamespaces = Array.from(this.namespaceControlledStyles.keys())\n    for (const namespace of controlledStyleNamespaces) {\n      const namespaceControlledStyles = this.namespaceControlledStyles.get(namespace)\n      if (namespaceControlledStyles == null) continue\n      for (const [className, data] of namespaceControlledStyles.entries()) {\n        result.set(className, data)\n      }\n    }\n    return result\n  }\n\n  private getPropsForResetPrecedenceStyles(): ComponentProps<typeof MakeswiftStyle> {\n    const cssResets = this.getCssResets()\n    const hrefValues = new Array<string>()\n    const allCss = new Array<string>()\n    for (const [contentHash, cssResetData] of cssResets.entries()) {\n      hrefValues.push(`makeswift-css-reset-${contentHash}`)\n      allCss.push(cssResetData.css)\n    }\n    const combinedHref = hrefValues.join(' ')\n    const combinedCss = allCss.join('')\n    return {\n      href: combinedHref,\n      css: combinedCss,\n      precedence: MakeswiftStylePrecedence.RESET,\n    }\n  }\n\n  private getPropsForMediumPrecedenceStyles(): ComponentProps<typeof MakeswiftStyle> {\n    const styles = this.getUncontrolledClassStyles()\n    const keyframes = this.getKeyframes()\n\n    const hrefValues = new Array<string>()\n    const allCss = new Array<string>()\n    for (const [className, uncontrolledStyleData] of styles.entries()) {\n      hrefValues.push(className)\n      allCss.push(uncontrolledStyleData.css)\n    }\n    for (const [keyframesName, keyframesData] of keyframes.entries()) {\n      hrefValues.push(keyframesName)\n      allCss.push(keyframesData.css)\n    }\n    const combinedHref = hrefValues.join(' ')\n    const combinedCss = allCss.join('')\n    return {\n      href: combinedHref,\n      css: combinedCss,\n      precedence: MakeswiftStylePrecedence.MEDIUM,\n    }\n  }\n\n  private getPropsForHighPrecedenceStyles(): ComponentProps<typeof MakeswiftStyle> {\n    const baseStyles = this.getBaseStyles()\n    const hrefValues = new Array<string>()\n    const allCss = new Array<string>()\n    for (const [contentHash, baseStylesData] of baseStyles.entries()) {\n      hrefValues.push(`makeswift-base-styles-${contentHash}`)\n      allCss.push(baseStylesData.css)\n    }\n    const combinedHref = hrefValues.join(' ')\n    const combinedCss = allCss.join('')\n    return {\n      href: combinedHref,\n      css: combinedCss,\n      precedence: MakeswiftStylePrecedence.HIGH,\n    }\n  }\n\n  private getPropsForCustomPrecedenceStyles(): Array<ComponentProps<typeof MakeswiftStyle>> {\n    const controlledStyles = this.getAllControlledStyles()\n    const customPrecedenceValues = new Set<string>()\n    const customPrecedenceToHrefValues = new Map<string, Array<string>>()\n    const customPrecedenceToCss = new Map<string, Array<string>>()\n    for (const [className, controlledStyleData] of controlledStyles.entries()) {\n      const precedence = getControlledStylePrecedence(controlledStyleData)\n      customPrecedenceValues.add(precedence)\n\n      const hrefValues = customPrecedenceToHrefValues.get(precedence) ?? []\n      const css = customPrecedenceToCss.get(precedence) ?? []\n\n      hrefValues.push(className)\n      css.push(controlledStyleData.css)\n\n      customPrecedenceToHrefValues.set(precedence, hrefValues)\n      customPrecedenceToCss.set(precedence, css)\n    }\n\n    return Array.from(customPrecedenceValues.values()).map(customPrecedenceValue => {\n      const hrefValues = customPrecedenceToHrefValues.get(customPrecedenceValue) ?? []\n      const allCss = customPrecedenceToCss.get(customPrecedenceValue) ?? []\n      const combinedHref = hrefValues.join(' ')\n      const combinedCss = allCss.join('')\n      const propsForCustomPrecedence: ComponentProps<typeof MakeswiftStyle> = {\n        href: combinedHref,\n        css: combinedCss,\n        precedence: customPrecedenceValue,\n      }\n      return propsForCustomPrecedence\n    })\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2D;AAC3D,mBAQO;AAIA,MAAM,eAAe;AAAA;AAAA,EAElB;AAAA;AAAA,EAGA;AAAA;AAAA,EAGA;AAAA;AAAA,EAGA;AAAA;AAAA,EAGA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA,EAER,cAAc;AACZ,SAAK,0BAA0B,oBAAI,IAAI;AACvC,SAAK,4BAA4B,oBAAI,IAAI;AACzC,SAAK,YAAY,oBAAI,IAAI;AACzB,SAAK,YAAY,oBAAI,IAAI;AACzB,SAAK,aAAa,oBAAI,IAAI;AAC1B,SAAK,gCAAgC,oBAAI,IAAI;AAC7C,SAAK,8BAA8B,oBAAI,IAAI;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA,EAMA,6BAAkE;AAChE,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,oBAAoB,WAA6D;AAC/E,WAAO,KAAK,2CAA2C,SAAS;AAAA,EAClE;AAAA,EAEA,eAAmD;AACjD,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,eAAkD;AAChD,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,gBAAqD;AACnD,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA,EAMA,mBAAmB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAIG;AACD,UAAM,+BAA+B,KAAK,2CAA2C,SAAS;AAE9F,UAAM,eAAe,6BAA6B,IAAI,SAAS;AAC/D,QAAI,gBAAgB,QAAQ,aAAa,gBAAgB,KAAK,aAAa;AACzE;AAAA,IACF;AAEA,iCAA6B,IAAI,WAAW,IAAI;AAEhD,QAAI,cAAc,KAAK,4BAA4B,IAAI,SAAS;AAChE,QAAI,eAAe,MAAM;AACvB,oBAAc;AACd,WAAK,4BAA4B,IAAI,WAAW,IAAI;AAAA,IACtD;AACA,SAAK,6BAA6B;AAAA,MAChC;AAAA,MACA,aAAa;AAAA,MACb;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,0BAA0B,MAAsB;AAC9C,SAAK,wBAAwB,IAAI,KAAK,WAAW,IAAI;AAAA,EACvD;AAAA,EAEA,aAAa,MAAqB;AAChC,SAAK,UAAU,IAAI,KAAK,eAAe,IAAI;AAAA,EAC7C;AAAA,EAEA,YAAY,MAAoB;AAC9B,SAAK,UAAU,IAAI,KAAK,aAAa,IAAI;AAAA,EAC3C;AAAA,EAEA,cAAc,MAAsB;AAClC,SAAK,WAAW,IAAI,KAAK,aAAa,IAAI;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBA,2BAAmC;AACjC,WAAO,KAAK,sBAAsB,EAC/B,IAAI,iCAA2B,2BAAa,uBAAuB,CAAC,EACpE,KAAK,EAAE;AAAA,EACZ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUA,sBACE,eAAwB,OACsB;AAC9C,UAAM,6BAA6B,KAAK,iCAAiC;AACzE,UAAM,8BAA8B,KAAK,kCAAkC;AAC3E,UAAM,4BAA4B,KAAK,gCAAgC;AAEvE,UAAM,qBAAqB;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG,KAAK,kCAAkC;AAAA,IAC5C;AACA,WAAO,eACH,qBACA,mBAAmB,OAAO,WAAS,MAAM,KAAK,SAAS,CAAC;AAAA,EAC9D;AAAA;AAAA;AAAA;AAAA,EAKA,iCAAiC,UAAkD;AACjF,SAAK,8BAA8B,IAAI,QAAQ;AAC/C,UAAM,cAAc,MAAM;AACxB,WAAK,8BAA8B,OAAO,QAAQ;AAAA,IACpD;AACA,WAAO;AAAA,EACT;AAAA,EAEA,6BAA6B;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAIG;AACD,QAAI,KAAK,8BAA8B,OAAO,GAAG;AAC/C,qBAAe,MAAM;AACnB,mBAAW,YAAY,KAAK,+BAA+B;AACzD,cAAI;AACF,qBAAS,EAAE,WAAW,aAAa,YAAY,CAAC;AAAA,UAClD,SAAS,GAAG;AACV,oBAAQ,MAAM,0CAA0C,SAAS,KAAK,CAAC;AAAA,UACzE;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAMQ,2CACN,WACkC;AAClC,QAAI,4BAA4B,KAAK,0BAA0B,IAAI,SAAS;AAC5E,QAAI,6BAA6B,MAAM;AACrC,kCAA4B,oBAAI,IAAI;AACpC,WAAK,0BAA0B,IAAI,WAAW,yBAAyB;AAAA,IACzE;AACA,WAAO;AAAA,EACT;AAAA,EAEQ,yBAA2D;AACjE,UAAM,SAAS,oBAAI,IAAiC;AACpD,UAAM,4BAA4B,MAAM,KAAK,KAAK,0BAA0B,KAAK,CAAC;AAClF,eAAW,aAAa,2BAA2B;AACjD,YAAM,4BAA4B,KAAK,0BAA0B,IAAI,SAAS;AAC9E,UAAI,6BAA6B;AAAM;AACvC,iBAAW,CAAC,WAAW,IAAI,KAAK,0BAA0B,QAAQ,GAAG;AACnE,eAAO,IAAI,WAAW,IAAI;AAAA,MAC5B;AAAA,IACF;AACA,WAAO;AAAA,EACT;AAAA,EAEQ,mCAA0E;AAChF,UAAM,YAAY,KAAK,aAAa;AACpC,UAAM,aAAa,IAAI,MAAc;AACrC,UAAM,SAAS,IAAI,MAAc;AACjC,eAAW,CAAC,aAAa,YAAY,KAAK,UAAU,QAAQ,GAAG;AAC7D,iBAAW,KAAK,uBAAuB,WAAW,EAAE;AACpD,aAAO,KAAK,aAAa,GAAG;AAAA,IAC9B;AACA,UAAM,eAAe,WAAW,KAAK,GAAG;AACxC,UAAM,cAAc,OAAO,KAAK,EAAE;AAClC,WAAO;AAAA,MACL,MAAM;AAAA,MACN,KAAK;AAAA,MACL,YAAY,sCAAyB;AAAA,IACvC;AAAA,EACF;AAAA,EAEQ,oCAA2E;AACjF,UAAM,SAAS,KAAK,2BAA2B;AAC/C,UAAM,YAAY,KAAK,aAAa;AAEpC,UAAM,aAAa,IAAI,MAAc;AACrC,UAAM,SAAS,IAAI,MAAc;AACjC,eAAW,CAAC,WAAW,qBAAqB,KAAK,OAAO,QAAQ,GAAG;AACjE,iBAAW,KAAK,SAAS;AACzB,aAAO,KAAK,sBAAsB,GAAG;AAAA,IACvC;AACA,eAAW,CAAC,eAAe,aAAa,KAAK,UAAU,QAAQ,GAAG;AAChE,iBAAW,KAAK,aAAa;AAC7B,aAAO,KAAK,cAAc,GAAG;AAAA,IAC/B;AACA,UAAM,eAAe,WAAW,KAAK,GAAG;AACxC,UAAM,cAAc,OAAO,KAAK,EAAE;AAClC,WAAO;AAAA,MACL,MAAM;AAAA,MACN,KAAK;AAAA,MACL,YAAY,sCAAyB;AAAA,IACvC;AAAA,EACF;AAAA,EAEQ,kCAAyE;AAC/E,UAAM,aAAa,KAAK,cAAc;AACtC,UAAM,aAAa,IAAI,MAAc;AACrC,UAAM,SAAS,IAAI,MAAc;AACjC,eAAW,CAAC,aAAa,cAAc,KAAK,WAAW,QAAQ,GAAG;AAChE,iBAAW,KAAK,yBAAyB,WAAW,EAAE;AACtD,aAAO,KAAK,eAAe,GAAG;AAAA,IAChC;AACA,UAAM,eAAe,WAAW,KAAK,GAAG;AACxC,UAAM,cAAc,OAAO,KAAK,EAAE;AAClC,WAAO;AAAA,MACL,MAAM;AAAA,MACN,KAAK;AAAA,MACL,YAAY,sCAAyB;AAAA,IACvC;AAAA,EACF;AAAA,EAEQ,oCAAkF;AACxF,UAAM,mBAAmB,KAAK,uBAAuB;AACrD,UAAM,yBAAyB,oBAAI,IAAY;AAC/C,UAAM,+BAA+B,oBAAI,IAA2B;AACpE,UAAM,wBAAwB,oBAAI,IAA2B;AAC7D,eAAW,CAAC,WAAW,mBAAmB,KAAK,iBAAiB,QAAQ,GAAG;AACzE,YAAM,iBAAa,2CAA6B,mBAAmB;AACnE,6BAAuB,IAAI,UAAU;AAErC,YAAM,aAAa,6BAA6B,IAAI,UAAU,KAAK,CAAC;AACpE,YAAM,MAAM,sBAAsB,IAAI,UAAU,KAAK,CAAC;AAEtD,iBAAW,KAAK,SAAS;AACzB,UAAI,KAAK,oBAAoB,GAAG;AAEhC,mCAA6B,IAAI,YAAY,UAAU;AACvD,4BAAsB,IAAI,YAAY,GAAG;AAAA,IAC3C;AAEA,WAAO,MAAM,KAAK,uBAAuB,OAAO,CAAC,EAAE,IAAI,2BAAyB;AAC9E,YAAM,aAAa,6BAA6B,IAAI,qBAAqB,KAAK,CAAC;AAC/E,YAAM,SAAS,sBAAsB,IAAI,qBAAqB,KAAK,CAAC;AACpE,YAAM,eAAe,WAAW,KAAK,GAAG;AACxC,YAAM,cAAc,OAAO,KAAK,EAAE;AAClC,YAAM,2BAAkE;AAAA,QACtE,MAAM;AAAA,QACN,KAAK;AAAA,QACL,YAAY;AAAA,MACd;AACA,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AACF;","names":[]}

package/dist/cjs/runtimes/react/css-runtime/stylesheet-engine.js

@@ -0,0 +1,89 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stylesheet_engine_exports = {};
+__export(stylesheet_engine_exports, {
+  StylesheetEngine: () => StylesheetEngine
+});
+module.exports = __toCommonJS(stylesheet_engine_exports);
+var import_utils = require("./utils");
+var import_resolved_style_to_css = require("../lib/resolved-style-to-css");
+var import_serialize_css = require("./serialize-css");
+class StylesheetEngine {
+  breakpointsData;
+  documentKey;
+  elementKey;
+  propPathComponents;
+  onDefineStyle;
+  classNamePrefix;
+  constructor({
+    breakpointsData,
+    documentKey,
+    elementKey,
+    propPathComponents,
+    onDefineStyle,
+    classNamePrefix
+  }) {
+    this.breakpointsData = breakpointsData;
+    this.documentKey = documentKey;
+    this.elementKey = elementKey;
+    this.propPathComponents = propPathComponents;
+    this.onDefineStyle = onDefineStyle;
+    this.classNamePrefix = classNamePrefix;
+  }
+  breakpoints() {
+    return this.breakpointsData;
+  }
+  defineStyle(resolvedStyle, onBoxModelChange) {
+    const joinedPropPath = this.propPathComponents.join(".");
+    const className = (0, import_utils.generateClassName)({
+      data: this.key(),
+      classNamePrefix: this.classNamePrefix
+    });
+    const cssObject = (0, import_resolved_style_to_css.resolvedStyleToCss)(this.breakpointsData, resolvedStyle);
+    const { css, contentHash } = (0, import_serialize_css.toCssStatements)(cssObject, className);
+    this.onDefineStyle?.({
+      className,
+      css,
+      cssObject,
+      contentHash,
+      elementKey: this.elementKey,
+      joinedPropPath,
+      onBoxModelChange
+    });
+    return className;
+  }
+  child(propName) {
+    return new StylesheetEngine({
+      breakpointsData: this.breakpointsData,
+      documentKey: this.documentKey,
+      elementKey: this.elementKey,
+      propPathComponents: [...this.propPathComponents, propName],
+      onDefineStyle: this.onDefineStyle,
+      classNamePrefix: this.classNamePrefix
+    });
+  }
+  key() {
+    return `${this.documentKey}-${this.elementKey}-${this.propPathComponents.join(".")}`;
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StylesheetEngine
+});
+//# sourceMappingURL=stylesheet-engine.js.map

package/dist/cjs/runtimes/react/css-runtime/stylesheet-engine.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/stylesheet-engine.ts"],"sourcesContent":["import { BoxDisplayModel, Breakpoints, ResolvedStyle, Stylesheet } from '@makeswift/controls'\nimport { generateClassName } from './utils'\nimport { ControlledStyleData } from './types'\nimport { resolvedStyleToCss } from '../lib/resolved-style-to-css'\nimport { toCssStatements } from './serialize-css'\n\nexport class StylesheetEngine implements Stylesheet {\n  private breakpointsData: Breakpoints\n  private documentKey: string\n  private elementKey: string\n  private propPathComponents: readonly string[]\n  private onDefineStyle: (data: ControlledStyleData) => void\n  private classNamePrefix?: string\n\n  constructor({\n    breakpointsData,\n    documentKey,\n    elementKey,\n    propPathComponents,\n    onDefineStyle,\n    classNamePrefix,\n  }: {\n    breakpointsData: Breakpoints\n    documentKey: string\n    elementKey: string\n    propPathComponents: readonly string[]\n    onDefineStyle: (data: ControlledStyleData) => void\n    classNamePrefix?: string\n  }) {\n    this.breakpointsData = breakpointsData\n    this.documentKey = documentKey\n    this.elementKey = elementKey\n    this.propPathComponents = propPathComponents\n    this.onDefineStyle = onDefineStyle\n    this.classNamePrefix = classNamePrefix\n  }\n\n  breakpoints(): Breakpoints {\n    return this.breakpointsData\n  }\n\n  defineStyle(\n    resolvedStyle: ResolvedStyle,\n    onBoxModelChange?: (boxModel: BoxDisplayModel | null) => void,\n  ): string {\n    const joinedPropPath = this.propPathComponents.join('.')\n    const className = generateClassName({\n      data: this.key(),\n      classNamePrefix: this.classNamePrefix,\n    })\n    const cssObject = resolvedStyleToCss(this.breakpointsData, resolvedStyle)\n    const { css, contentHash } = toCssStatements(cssObject, className)\n\n    this.onDefineStyle?.({\n      className,\n      css,\n      cssObject,\n      contentHash,\n      elementKey: this.elementKey,\n      joinedPropPath,\n      onBoxModelChange,\n    })\n    return className\n  }\n\n  child(propName: string): Stylesheet {\n    return new StylesheetEngine({\n      breakpointsData: this.breakpointsData,\n      documentKey: this.documentKey,\n      elementKey: this.elementKey,\n      propPathComponents: [...this.propPathComponents, propName],\n      onDefineStyle: this.onDefineStyle,\n      classNamePrefix: this.classNamePrefix,\n    })\n  }\n\n  key(): string {\n    return `${this.documentKey}-${this.elementKey}-${this.propPathComponents.join('.')}`\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAElC,mCAAmC;AACnC,2BAAgC;AAEzB,MAAM,iBAAuC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAER,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GAOG;AACD,SAAK,kBAAkB;AACvB,SAAK,cAAc;AACnB,SAAK,aAAa;AAClB,SAAK,qBAAqB;AAC1B,SAAK,gBAAgB;AACrB,SAAK,kBAAkB;AAAA,EACzB;AAAA,EAEA,cAA2B;AACzB,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,YACE,eACA,kBACQ;AACR,UAAM,iBAAiB,KAAK,mBAAmB,KAAK,GAAG;AACvD,UAAM,gBAAY,gCAAkB;AAAA,MAClC,MAAM,KAAK,IAAI;AAAA,MACf,iBAAiB,KAAK;AAAA,IACxB,CAAC;AACD,UAAM,gBAAY,iDAAmB,KAAK,iBAAiB,aAAa;AACxE,UAAM,EAAE,KAAK,YAAY,QAAI,sCAAgB,WAAW,SAAS;AAEjE,SAAK,gBAAgB;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,KAAK;AAAA,MACjB;AAAA,MACA;AAAA,IACF,CAAC;AACD,WAAO;AAAA,EACT;AAAA,EAEA,MAAM,UAA8B;AAClC,WAAO,IAAI,iBAAiB;AAAA,MAC1B,iBAAiB,KAAK;AAAA,MACtB,aAAa,KAAK;AAAA,MAClB,YAAY,KAAK;AAAA,MACjB,oBAAoB,CAAC,GAAG,KAAK,oBAAoB,QAAQ;AAAA,MACzD,eAAe,KAAK;AAAA,MACpB,iBAAiB,KAAK;AAAA,IACxB,CAAC;AAAA,EACH;AAAA,EAEA,MAAc;AACZ,WAAO,GAAG,KAAK,WAAW,IAAI,KAAK,UAAU,IAAI,KAAK,mBAAmB,KAAK,GAAG,CAAC;AAAA,EACpF;AACF;","names":[]}

package/dist/cjs/runtimes/react/{hooks/use-css-id.js → css-runtime/types.js}

@@ -16,17 +16,19 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var use_css_id_exports = {};
-__export(use_css_id_exports, {
-  useCssId: () => useCssId
+var types_exports = {};
+__export(types_exports, {
+  MakeswiftStylePrecedence: () => MakeswiftStylePrecedence
 });
-module.exports = __toCommonJS(use_css_id_exports);
-var import_react = require("react");
-function useCssId() {
-  return (0, import_react.useId)().replaceAll(":", "");
-}
+module.exports = __toCommonJS(types_exports);
+const MakeswiftStylePrecedence = {
+  RESET: "reset",
+  LOW: "low",
+  MEDIUM: "medium",
+  HIGH: "high"
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  useCssId
+  MakeswiftStylePrecedence
 });
-//# sourceMappingURL=use-css-id.js.map
+//# sourceMappingURL=types.js.map

package/dist/cjs/runtimes/react/css-runtime/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/types.ts"],"sourcesContent":["import { CSSObject } from '@emotion/serialize'\nimport { BoxDisplayModel, Breakpoints, Stylesheet } from '@makeswift/controls'\n\n/*\n  Per React's `<style>` documentation:\n  \"React will infer that precedence values it discovers first are 'lower' and precedence\n  values it discovers later are 'higher'\"\n*/\nexport const MakeswiftStylePrecedence = {\n  RESET: 'reset',\n  LOW: 'low',\n  MEDIUM: 'medium',\n  HIGH: 'high',\n} as const\nexport type MakeswiftStylePrecedence =\n  (typeof MakeswiftStylePrecedence)[keyof typeof MakeswiftStylePrecedence]\n\nexport interface BrowserStyleApplier {\n  apply({ className, css }: { className: string; css: string }): void\n  dispose?(): void\n}\n\nexport type GetStylesheet = ({\n  breakpointsData,\n  elementKey,\n  propPathComponents,\n}: {\n  breakpointsData: Breakpoints\n  elementKey: string\n  propPathComponents: readonly string[]\n}) => Stylesheet\n\nexport type ClassStyleData = {\n  className: string\n  css: string\n  cssObject: CSSObject\n}\n\nexport type ControlledStyleData = ClassStyleData & {\n  contentHash: string\n  elementKey: string\n  joinedPropPath: string\n  onBoxModelChange?: (boxModel: BoxDisplayModel | null) => void\n}\n\nexport type OnControlledStyleDataWrite = ({\n  className,\n  currentData,\n  initialData,\n}: {\n  className: string\n  currentData: ControlledStyleData\n  initialData: ControlledStyleData\n}) => void\n\nexport type CssResetData = {\n  css: string\n  contentHash: string\n\n  // This array type is to accommodate our use of `normalize` from `polished`\n  cssObjects: Array<CSSObject>\n}\n\nexport type KeyframesData = {\n  keyframesName: string\n  css: string\n}\n\nexport type BaseStylesData = {\n  css: string\n  contentHash: string\n  cssObject: CSSObject\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQO,MAAM,2BAA2B;AAAA,EACtC,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AACR;","names":[]}