@makeswift/runtime 0.29.0-canary.22 → 0.29.0-canary.24

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

@@ -1 +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"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/serialize-css.ts"],"sourcesContent":["import { CSSObject, serializeStyles as emotionSerializeStyles } from '@emotion/serialize'\nimport {\n  DECLARATION,\n  KEYFRAMES,\n  RULESET,\n  serialize,\n  compile,\n  stringify,\n  prefixer,\n  middleware,\n  type Element as StylisElement,\n  type Middleware,\n} from 'stylis'\n\ntype SerializationOptions = {\n  forceImportant?: boolean\n}\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  { forceImportant = false }: SerializationOptions = {},\n): { css: string; contentHash: string } {\n  const { content: rawCssContent, contentHash } = toRawCss([stylesObject])\n  const classNameRawCss = `.${className} {${rawCssContent}}`\n  const css = processCss({ content: classNameRawCss, forceImportant })\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({\n  content,\n  forceImportant = false,\n}: { content: string } & SerializationOptions): string {\n  const cssElementTree = compile(content)\n  return serialize(\n    cssElementTree,\n    middleware([...(forceImportant ? [appendImportant] : []), prefixer, stringify]),\n  )\n}\n\nconst appendImportant: Middleware = element => {\n  // Skip non-declarative elements and declarations that don't belong to a ruleset (e.g. `@font-face`)\n  if (element.type !== DECLARATION || element.root?.type !== RULESET) return\n\n  // Skip declarations within keyframes, which don't support `!important`\n  for (\n    let ancestor: StylisElement | null = element.parent;\n    ancestor != null;\n    ancestor = ancestor.parent\n  ) {\n    if (ancestor.type === KEYFRAMES) return\n  }\n\n  // Don't append if it's already present\n  if (/!important\\s*;$/i.test(element.value)) return\n\n  element.value = element.value.replace(/;$/, '!important;')\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 { styles: serializedStyles, name } = emotionSerializeStyles(styles)\n  return {\n    content: serializedStyles,\n    contentHash: name,\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAqE;AACrE,oBAWO;AAkBA,SAAS,gBACd,cACA,WACA,EAAE,iBAAiB,MAAM,IAA0B,CAAC,GACd;AACtC,QAAM,EAAE,SAAS,eAAe,YAAY,IAAI,SAAS,CAAC,YAAY,CAAC;AACvE,QAAM,kBAAkB,IAAI,SAAS,KAAK,aAAa;AACvD,QAAM,MAAM,WAAW,EAAE,SAAS,iBAAiB,eAAe,CAAC;AACnE,SAAO,EAAE,KAAK,YAAY;AAC5B;AAUO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,iBAAiB;AACnB,GAAuD;AACrD,QAAM,qBAAiB,uBAAQ,OAAO;AACtC,aAAO;AAAA,IACL;AAAA,QACA,0BAAW,CAAC,GAAI,iBAAiB,CAAC,eAAe,IAAI,CAAC,GAAI,wBAAU,uBAAS,CAAC;AAAA,EAChF;AACF;AAEA,MAAM,kBAA8B,aAAW;AAE7C,MAAI,QAAQ,SAAS,6BAAe,QAAQ,MAAM,SAAS;AAAS;AAGpE,WACM,WAAiC,QAAQ,QAC7C,YAAY,MACZ,WAAW,SAAS,QACpB;AACA,QAAI,SAAS,SAAS;AAAW;AAAA,EACnC;AAGA,MAAI,mBAAmB,KAAK,QAAQ,KAAK;AAAG;AAE5C,UAAQ,QAAQ,QAAQ,MAAM,QAAQ,MAAM,aAAa;AAC3D;AASO,SAAS,SAAS,QAAoE;AAC3F,QAAM,EAAE,QAAQ,kBAAkB,KAAK,QAAI,iBAAAA,iBAAuB,MAAM;AACxE,SAAO;AAAA,IACL,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AACF;","names":["emotionSerializeStyles"]}

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

@@ -31,13 +31,15 @@ class StylesheetEngine {
   propPathComponents;
   onDefineStyle;
   classNamePrefix;
+  forceImportant;
   constructor({
     breakpointsData,
     documentKey,
     elementKey,
     propPathComponents,
     onDefineStyle,
-    classNamePrefix
+    classNamePrefix,
+    forceImportant = false
   }) {
     this.breakpointsData = breakpointsData;
     this.documentKey = documentKey;
@@ -45,6 +47,7 @@ class StylesheetEngine {
     this.propPathComponents = propPathComponents;
     this.onDefineStyle = onDefineStyle;
     this.classNamePrefix = classNamePrefix;
+    this.forceImportant = forceImportant;
   }
   breakpoints() {
     return this.breakpointsData;
@@ -56,7 +59,9 @@ class StylesheetEngine {
       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);
+    const { css, contentHash } = (0, import_serialize_css.toCssStatements)(cssObject, className, {
+      forceImportant: this.forceImportant
+    });
     this.onDefineStyle?.({
       className,
       css,
@@ -75,7 +80,8 @@ class StylesheetEngine {
       elementKey: this.elementKey,
       propPathComponents: [...this.propPathComponents, propName],
       onDefineStyle: this.onDefineStyle,
-      classNamePrefix: this.classNamePrefix
+      classNamePrefix: this.classNamePrefix,
+      forceImportant: this.forceImportant
     });
   }
   key() {

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

@@ -1 +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":[]}
+{"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  private forceImportant: boolean\n\n  constructor({\n    breakpointsData,\n    documentKey,\n    elementKey,\n    propPathComponents,\n    onDefineStyle,\n    classNamePrefix,\n    forceImportant = false,\n  }: {\n    breakpointsData: Breakpoints\n    documentKey: string\n    elementKey: string\n    propPathComponents: readonly string[]\n    onDefineStyle: (data: ControlledStyleData) => void\n    classNamePrefix?: string\n    forceImportant?: boolean\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    this.forceImportant = forceImportant\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\n    const cssObject = resolvedStyleToCss(this.breakpointsData, resolvedStyle)\n    const { css, contentHash } = toCssStatements(cssObject, className, {\n      forceImportant: this.forceImportant,\n    })\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      forceImportant: this.forceImportant,\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,EACA;AAAA,EAER,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,EACnB,GAQG;AACD,SAAK,kBAAkB;AACvB,SAAK,cAAc;AACnB,SAAK,aAAa;AAClB,SAAK,qBAAqB;AAC1B,SAAK,gBAAgB;AACrB,SAAK,kBAAkB;AACvB,SAAK,iBAAiB;AAAA,EACxB;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;AAED,UAAM,gBAAY,iDAAmB,KAAK,iBAAiB,aAAa;AACxE,UAAM,EAAE,KAAK,YAAY,QAAI,sCAAgB,WAAW,WAAW;AAAA,MACjE,gBAAgB,KAAK;AAAA,IACvB,CAAC;AAED,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,MACtB,gBAAgB,KAAK;AAAA,IACvB,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/root-style-registry.js

@@ -34,6 +34,7 @@ function RootStyleRegistry({
   stylesRegistry,
   classNamePrefix = import_constants.DEFAULT_CSS_CLASS_NAME_PREFIX,
   enableCssReset = import_constants.DEFAULT_CSS_RESET_ENABLED,
+  forceImportant = import_constants.DEFAULT_CSS_FORCE_IMPORTANT,
   shouldRenderStyleElements = import_constants.DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS
 }) {
   (0, import_use_dynamic_browser_style_updates.useDynamicBrowserStyleUpdates)(stylesRegistry);
@@ -42,6 +43,7 @@ function RootStyleRegistry({
     {
       classNamePrefix,
       enableCssReset,
+      forceImportant,
       stylesRegistry,
       shouldRenderStyleElements,
       children
@@ -51,7 +53,8 @@ function RootStyleRegistry({
 function DefaultRootStyleRegistry({
   children,
   classNamePrefix,
-  enableCssReset
+  enableCssReset,
+  forceImportant
 }) {
   const [stylesRegistry] = (0, import_react.useState)(import_utils.createMakeswiftStylesRegistry);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -60,6 +63,7 @@ function DefaultRootStyleRegistry({
       stylesRegistry,
       classNamePrefix,
       enableCssReset,
+      forceImportant,
       children
     }
   );

package/dist/cjs/runtimes/react/root-style-registry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/runtimes/react/root-style-registry.tsx"],"sourcesContent":["'use client'\n\nimport { useState, type PropsWithChildren } from 'react'\nimport { StylesContextProvider } from './css-runtime/components/styles-context-provider'\nimport { StylesRegistry } from './css-runtime/styles-registry'\nimport { useDynamicBrowserStyleUpdates } from './css-runtime/hooks/use-dynamic-browser-style-updates'\nimport {\n  DEFAULT_CSS_CLASS_NAME_PREFIX,\n  DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n  DEFAULT_CSS_RESET_ENABLED,\n} from './css-runtime/constants'\nimport { createMakeswiftStylesRegistry } from './css-runtime/utils'\n\nexport type RootStyleProps = {\n  /**\n   * The prefix used for generated class names.\n   * If not provided, a default prefix will be used.\n   */\n  classNamePrefix?: string\n  /**\n   * Toggle the built-in CSS reset.\n   * Set to `false` when using `@layer`-based CSS frameworks like Tailwind.\n   */\n  enableCssReset?: boolean\n}\n\nexport function RootStyleRegistry({\n  children,\n  stylesRegistry,\n  classNamePrefix = DEFAULT_CSS_CLASS_NAME_PREFIX,\n  enableCssReset = DEFAULT_CSS_RESET_ENABLED,\n  shouldRenderStyleElements = DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n}: PropsWithChildren<{\n  stylesRegistry: StylesRegistry\n  classNamePrefix?: string\n  enableCssReset?: boolean\n  shouldRenderStyleElements?: boolean\n}>) {\n  useDynamicBrowserStyleUpdates(stylesRegistry)\n\n  return (\n    <StylesContextProvider\n      classNamePrefix={classNamePrefix}\n      enableCssReset={enableCssReset}\n      stylesRegistry={stylesRegistry}\n      shouldRenderStyleElements={shouldRenderStyleElements}\n    >\n      {children}\n    </StylesContextProvider>\n  )\n}\n\nexport function DefaultRootStyleRegistry({\n  children,\n  classNamePrefix,\n  enableCssReset,\n}: PropsWithChildren<RootStyleProps>) {\n  const [stylesRegistry] = useState(createMakeswiftStylesRegistry)\n  return (\n    <RootStyleRegistry\n      stylesRegistry={stylesRegistry}\n      classNamePrefix={classNamePrefix}\n      enableCssReset={enableCssReset}\n    >\n      {children}\n    </RootStyleRegistry>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCI;AAvCJ,mBAAiD;AACjD,qCAAsC;AAEtC,+CAA8C;AAC9C,uBAIO;AACP,mBAA8C;AAevC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B,GAKI;AACF,8EAA8B,cAAc;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,CAAC,cAAc,QAAI,uBAAS,0CAA6B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/runtimes/react/root-style-registry.tsx"],"sourcesContent":["'use client'\n\nimport { useState, type PropsWithChildren } from 'react'\nimport { StylesContextProvider } from './css-runtime/components/styles-context-provider'\nimport { StylesRegistry } from './css-runtime/styles-registry'\nimport { useDynamicBrowserStyleUpdates } from './css-runtime/hooks/use-dynamic-browser-style-updates'\nimport {\n  DEFAULT_CSS_CLASS_NAME_PREFIX,\n  DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n  DEFAULT_CSS_RESET_ENABLED,\n  DEFAULT_CSS_FORCE_IMPORTANT,\n} from './css-runtime/constants'\nimport { createMakeswiftStylesRegistry } from './css-runtime/utils'\n\n/**\n * Style configuration must remain unchanged while the document is mounted.\n * Changing it during development may require a full page reload.\n */\nexport type RootStyleProps = {\n  /**\n   * The prefix used for generated class names.\n   * If not provided, a default prefix will be used.\n   */\n  classNamePrefix?: string\n  /**\n   * Toggle the built-in CSS reset.\n   * Set to `false` when using `@layer`-based CSS frameworks like Tailwind.\n   */\n  enableCssReset?: boolean\n  /**\n   * Append `!important` to Makeswift-generated style rule declarations to\n   * increase their priority relative to external styles.\n   */\n  forceImportant?: boolean\n}\n\nexport function RootStyleRegistry({\n  children,\n  stylesRegistry,\n  classNamePrefix = DEFAULT_CSS_CLASS_NAME_PREFIX,\n  enableCssReset = DEFAULT_CSS_RESET_ENABLED,\n  forceImportant = DEFAULT_CSS_FORCE_IMPORTANT,\n  shouldRenderStyleElements = DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n}: PropsWithChildren<{\n  stylesRegistry: StylesRegistry\n  classNamePrefix?: string\n  enableCssReset?: boolean\n  forceImportant?: boolean\n  shouldRenderStyleElements?: boolean\n}>) {\n  useDynamicBrowserStyleUpdates(stylesRegistry)\n\n  return (\n    <StylesContextProvider\n      classNamePrefix={classNamePrefix}\n      enableCssReset={enableCssReset}\n      forceImportant={forceImportant}\n      stylesRegistry={stylesRegistry}\n      shouldRenderStyleElements={shouldRenderStyleElements}\n    >\n      {children}\n    </StylesContextProvider>\n  )\n}\n\nexport function DefaultRootStyleRegistry({\n  children,\n  classNamePrefix,\n  enableCssReset,\n  forceImportant,\n}: PropsWithChildren<RootStyleProps>) {\n  const [stylesRegistry] = useState(createMakeswiftStylesRegistry)\n  return (\n    <RootStyleRegistry\n      stylesRegistry={stylesRegistry}\n      classNamePrefix={classNamePrefix}\n      enableCssReset={enableCssReset}\n      forceImportant={forceImportant}\n    >\n      {children}\n    </RootStyleRegistry>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDI;AAnDJ,mBAAiD;AACjD,qCAAsC;AAEtC,+CAA8C;AAC9C,uBAKO;AACP,mBAA8C;AAwBvC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B,GAMI;AACF,8EAA8B,cAAc;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,CAAC,cAAc,QAAI,uBAAS,0CAA6B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/cjs/runtimes/react/server/components/element-data.js

@@ -59,6 +59,7 @@ async function ServerElementData({
   const stylesheet = new import_stylesheet_engine.StylesheetEngine({
     breakpointsData: (0, import_read_only_state.getBreakpoints)(state),
     classNamePrefix: context.rootStyleProps?.classNamePrefix,
+    forceImportant: context.rootStyleProps?.forceImportant,
     documentKey,
     elementKey: elementData.key,
     propPathComponents: [],

package/dist/cjs/runtimes/react/server/components/element-data.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/element-data.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { partitionRecord } from '../../../../utils/partition'\n\nimport {\n  type State,\n  type ElementData,\n  getReactComponent,\n  getBreakpoints,\n  getComponentPropControllerDescriptors,\n} from '../../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../../components/shared/FallbackComponent'\nimport { isLegacyDescriptor } from '../../../../prop-controllers/descriptors'\n\nimport { type ServerRenderContext, getStore } from '../render-context'\nimport { resolveProps } from '../resolve-props'\nimport { StylesheetEngine } from '../../css-runtime/stylesheet-engine'\nimport { type ControlledStyleData } from '../../css-runtime/types'\nimport { RSCEmittedStyle } from '../../css-runtime/components/rsc-emitted-style'\n\nexport async function ServerElementData({\n  documentKey,\n  context,\n  elementData,\n  injectedProps,\n}: {\n  documentKey: string\n  context: ServerRenderContext\n  elementData: ElementData\n  injectedProps: Record<string, unknown>\n}): Promise<ReactNode> {\n  const state = getStore(context).getState()\n\n  const Component = getReactComponent(state, elementData.type)\n  if (Component == null) {\n    return (\n      <FallbackComponent\n        text=\"Component not found\"\n        details={`Unknown component '${elementData.type}'`}\n      />\n    )\n  }\n\n  const [legacyDescriptors, definitions] = getControlDefs(state, elementData)\n  const legacyKeys = Object.keys(legacyDescriptors)\n  if (legacyKeys.length > 0) {\n    console.warn(`Unexpected legacy control data in server element '${elementData.key}`, {\n      elementData,\n      legacyKeys,\n    })\n  }\n\n  const classStyleData = new Map<string, ControlledStyleData>()\n  const stylesheet = new StylesheetEngine({\n    breakpointsData: getBreakpoints(state),\n    classNamePrefix: context.rootStyleProps?.classNamePrefix,\n    documentKey,\n    elementKey: elementData.key,\n    propPathComponents: [],\n    onDefineStyle: styleData => {\n      const { onBoxModelChange, ...serializableStyleData } = styleData\n      classStyleData.set(styleData.className, serializableStyleData)\n    },\n  })\n\n  const props = {\n    ...(await resolveProps(context, elementData, documentKey, definitions, stylesheet)),\n    ...injectedProps,\n  }\n\n  const styleElements = Array.from(classStyleData, ([className, styleData]) => (\n    <RSCEmittedStyle key={className} namespace={elementData.key} serializableData={styleData} />\n  ))\n\n  return (\n    <>\n      {/* Make the component the first child so that `findDOMNode` resolves to its first\n        rendered DOM node (if any) rather than the component's `<style>` element */}\n      <Component key={elementData.key} {...props} />\n      {styleElements}\n    </>\n  )\n}\n\nconst getControlDefs = (state: State, elementData: ElementData) => {\n  const descriptors = getComponentPropControllerDescriptors(state, elementData.type) ?? {}\n  return partitionRecord(descriptors, isLegacyDescriptor)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCM;AAnCN,uBAAgC;AAEhC,6BAMO;AAEP,+BAAkC;AAClC,yBAAmC;AAEnC,4BAAmD;AACnD,2BAA6B;AAC7B,+BAAiC;AAEjC,+BAAgC;AAEhC,eAAsB,kBAAkB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,QAAM,YAAQ,gCAAS,OAAO,EAAE,SAAS;AAEzC,QAAM,gBAAY,0CAAkB,OAAO,YAAY,IAAI;AAC3D,MAAI,aAAa,MAAM;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,sBAAsB,YAAY,IAAI;AAAA;AAAA,IACjD;AAAA,EAEJ;AAEA,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,OAAO,WAAW;AAC1E,QAAM,aAAa,OAAO,KAAK,iBAAiB;AAChD,MAAI,WAAW,SAAS,GAAG;AACzB,YAAQ,KAAK,qDAAqD,YAAY,GAAG,IAAI;AAAA,MACnF;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,oBAAI,IAAiC;AAC5D,QAAM,aAAa,IAAI,0CAAiB;AAAA,IACtC,qBAAiB,uCAAe,KAAK;AAAA,IACrC,iBAAiB,QAAQ,gBAAgB;AAAA,IACzC;AAAA,IACA,YAAY,YAAY;AAAA,IACxB,oBAAoB,CAAC;AAAA,IACrB,eAAe,eAAa;AAC1B,YAAM,EAAE,kBAAkB,GAAG,sBAAsB,IAAI;AACvD,qBAAe,IAAI,UAAU,WAAW,qBAAqB;AAAA,IAC/D;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,GAAI,UAAM,mCAAa,SAAS,aAAa,aAAa,aAAa,UAAU;AAAA,IACjF,GAAG;AAAA,EACL;AAEA,QAAM,gBAAgB,MAAM,KAAK,gBAAgB,CAAC,CAAC,WAAW,SAAS,MACrE,4CAAC,4CAAgC,WAAW,YAAY,KAAK,kBAAkB,aAAzD,SAAoE,CAC3F;AAED,SACE,4EAGE;AAAA,gDAAC,aAAiC,GAAG,SAArB,YAAY,GAAgB;AAAA,IAC3C;AAAA,KACH;AAEJ;AAEA,MAAM,iBAAiB,CAAC,OAAc,gBAA6B;AACjE,QAAM,kBAAc,8DAAsC,OAAO,YAAY,IAAI,KAAK,CAAC;AACvF,aAAO,kCAAgB,aAAa,qCAAkB;AACxD;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/server/components/element-data.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { partitionRecord } from '../../../../utils/partition'\n\nimport {\n  type State,\n  type ElementData,\n  getReactComponent,\n  getBreakpoints,\n  getComponentPropControllerDescriptors,\n} from '../../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../../components/shared/FallbackComponent'\nimport { isLegacyDescriptor } from '../../../../prop-controllers/descriptors'\n\nimport { type ServerRenderContext, getStore } from '../render-context'\nimport { resolveProps } from '../resolve-props'\nimport { StylesheetEngine } from '../../css-runtime/stylesheet-engine'\nimport { type ControlledStyleData } from '../../css-runtime/types'\nimport { RSCEmittedStyle } from '../../css-runtime/components/rsc-emitted-style'\n\nexport async function ServerElementData({\n  documentKey,\n  context,\n  elementData,\n  injectedProps,\n}: {\n  documentKey: string\n  context: ServerRenderContext\n  elementData: ElementData\n  injectedProps: Record<string, unknown>\n}): Promise<ReactNode> {\n  const state = getStore(context).getState()\n\n  const Component = getReactComponent(state, elementData.type)\n  if (Component == null) {\n    return (\n      <FallbackComponent\n        text=\"Component not found\"\n        details={`Unknown component '${elementData.type}'`}\n      />\n    )\n  }\n\n  const [legacyDescriptors, definitions] = getControlDefs(state, elementData)\n  const legacyKeys = Object.keys(legacyDescriptors)\n  if (legacyKeys.length > 0) {\n    console.warn(`Unexpected legacy control data in server element '${elementData.key}`, {\n      elementData,\n      legacyKeys,\n    })\n  }\n\n  const classStyleData = new Map<string, ControlledStyleData>()\n  const stylesheet = new StylesheetEngine({\n    breakpointsData: getBreakpoints(state),\n    classNamePrefix: context.rootStyleProps?.classNamePrefix,\n    forceImportant: context.rootStyleProps?.forceImportant,\n    documentKey,\n    elementKey: elementData.key,\n    propPathComponents: [],\n    onDefineStyle: styleData => {\n      const { onBoxModelChange, ...serializableStyleData } = styleData\n      classStyleData.set(styleData.className, serializableStyleData)\n    },\n  })\n\n  const props = {\n    ...(await resolveProps(context, elementData, documentKey, definitions, stylesheet)),\n    ...injectedProps,\n  }\n\n  const styleElements = Array.from(classStyleData, ([className, styleData]) => (\n    <RSCEmittedStyle key={className} namespace={elementData.key} serializableData={styleData} />\n  ))\n\n  return (\n    <>\n      {/* Make the component the first child so that `findDOMNode` resolves to its first\n        rendered DOM node (if any) rather than the component's `<style>` element */}\n      <Component key={elementData.key} {...props} />\n      {styleElements}\n    </>\n  )\n}\n\nconst getControlDefs = (state: State, elementData: ElementData) => {\n  const descriptors = getComponentPropControllerDescriptors(state, elementData.type) ?? {}\n  return partitionRecord(descriptors, isLegacyDescriptor)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCM;AAnCN,uBAAgC;AAEhC,6BAMO;AAEP,+BAAkC;AAClC,yBAAmC;AAEnC,4BAAmD;AACnD,2BAA6B;AAC7B,+BAAiC;AAEjC,+BAAgC;AAEhC,eAAsB,kBAAkB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,QAAM,YAAQ,gCAAS,OAAO,EAAE,SAAS;AAEzC,QAAM,gBAAY,0CAAkB,OAAO,YAAY,IAAI;AAC3D,MAAI,aAAa,MAAM;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,sBAAsB,YAAY,IAAI;AAAA;AAAA,IACjD;AAAA,EAEJ;AAEA,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,OAAO,WAAW;AAC1E,QAAM,aAAa,OAAO,KAAK,iBAAiB;AAChD,MAAI,WAAW,SAAS,GAAG;AACzB,YAAQ,KAAK,qDAAqD,YAAY,GAAG,IAAI;AAAA,MACnF;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,oBAAI,IAAiC;AAC5D,QAAM,aAAa,IAAI,0CAAiB;AAAA,IACtC,qBAAiB,uCAAe,KAAK;AAAA,IACrC,iBAAiB,QAAQ,gBAAgB;AAAA,IACzC,gBAAgB,QAAQ,gBAAgB;AAAA,IACxC;AAAA,IACA,YAAY,YAAY;AAAA,IACxB,oBAAoB,CAAC;AAAA,IACrB,eAAe,eAAa;AAC1B,YAAM,EAAE,kBAAkB,GAAG,sBAAsB,IAAI;AACvD,qBAAe,IAAI,UAAU,WAAW,qBAAqB;AAAA,IAC/D;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,GAAI,UAAM,mCAAa,SAAS,aAAa,aAAa,aAAa,UAAU;AAAA,IACjF,GAAG;AAAA,EACL;AAEA,QAAM,gBAAgB,MAAM,KAAK,gBAAgB,CAAC,CAAC,WAAW,SAAS,MACrE,4CAAC,4CAAgC,WAAW,YAAY,KAAK,kBAAkB,aAAzD,SAAoE,CAC3F;AAED,SACE,4EAGE;AAAA,gDAAC,aAAiC,GAAG,SAArB,YAAY,GAAgB;AAAA,IAC3C;AAAA,KACH;AAEJ;AAEA,MAAM,iBAAiB,CAAC,OAAc,gBAA6B;AACjE,QAAM,kBAAc,8DAAsC,OAAO,YAAY,IAAI,KAAK,CAAC;AACvF,aAAO,kCAAgB,aAAa,qCAAkB;AACxD;","names":[]}

package/dist/cjs/testing/window.js

@@ -0,0 +1,50 @@
+"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 window_exports = {};
+__export(window_exports, {
+  windowMocks: () => windowMocks
+});
+module.exports = __toCommonJS(window_exports);
+function mockPostMessage() {
+  const postMessageMock = jest.spyOn(window, "postMessage").mockImplementation(() => {
+  });
+  const originalMessageChannel = window.MessageChannel;
+  const stubPort = () => ({ onmessage: null, postMessage: () => {
+  }, close: () => {
+  } });
+  window.MessageChannel = class {
+    port1 = stubPort();
+    port2 = stubPort();
+  };
+  return {
+    mock: postMessageMock,
+    restore: () => {
+      postMessageMock.mockRestore();
+      window.MessageChannel = originalMessageChannel;
+    }
+  };
+}
+const windowMocks = {
+  mockPostMessage
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  windowMocks
+});
+//# sourceMappingURL=window.js.map

package/dist/cjs/testing/window.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/testing/window.ts"],"sourcesContent":["/*\n * Mock `window.postMessage` together with `MessageChannel`\n */\nfunction mockPostMessage(): { mock: jest.SpyInstance; restore: () => void } {\n  const postMessageMock = jest.spyOn(window, 'postMessage').mockImplementation(() => {})\n\n  const originalMessageChannel = window.MessageChannel\n  const stubPort = () => ({ onmessage: null, postMessage: () => {}, close: () => {} })\n  window.MessageChannel = class {\n    port1 = stubPort()\n    port2 = stubPort()\n  } as unknown as typeof MessageChannel\n\n  return {\n    mock: postMessageMock,\n    restore: () => {\n      postMessageMock.mockRestore()\n      window.MessageChannel = originalMessageChannel\n    },\n  }\n}\n\nexport const windowMocks = {\n  mockPostMessage,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,SAAS,kBAAmE;AAC1E,QAAM,kBAAkB,KAAK,MAAM,QAAQ,aAAa,EAAE,mBAAmB,MAAM;AAAA,EAAC,CAAC;AAErF,QAAM,yBAAyB,OAAO;AACtC,QAAM,WAAW,OAAO,EAAE,WAAW,MAAM,aAAa,MAAM;AAAA,EAAC,GAAG,OAAO,MAAM;AAAA,EAAC,EAAE;AAClF,SAAO,iBAAiB,MAAM;AAAA,IAC5B,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,EACnB;AAEA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS,MAAM;AACb,sBAAgB,YAAY;AAC5B,aAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF;AACF;AAEO,MAAM,cAAc;AAAA,EACzB;AACF;","names":[]}

package/dist/esm/api/graphql-api-client.js

@@ -4,7 +4,7 @@ class MakeswiftGraphQLApiClient {
   graphqlClient;
   constructor({ endpoint }) {
     this.graphqlClient = new GraphQLClient(endpoint, {
-      "makeswift-runtime-version": "0.29.0-canary.22"
+      "makeswift-runtime-version": "0.29.0-canary.24"
     });
   }
   async getUnversionedResources({

package/dist/esm/api/rest-api-client.js

@@ -188,7 +188,7 @@ class MakeswiftRestAPIClient {
     const requestHeaders = new Headers({
       "x-api-key": this.apiKey,
       "makeswift-site-api-key": this.apiKey,
-      "makeswift-runtime-version": "0.29.0-canary.22"
+      "makeswift-runtime-version": "0.29.0-canary.24"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);

package/dist/esm/api-handler/handlers/manifest.js

@@ -8,7 +8,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
     return ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
   return ApiResponse.json({
-    version: "0.29.0-canary.22",
+    version: "0.29.0-canary.24",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

package/dist/esm/components/shared/FallbackComponent/FallbackComponent.js

@@ -1,34 +1,54 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Warning20 } from "../../icons/Warning20";
-import { useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
 const FallbackComponent = forwardRef(function FallbackComponent2({ text, details }, ref) {
-  const { className: outerClassName, styleElement: outerStyleElement } = useStyle({
-    width: "100%",
-    height: 54,
-    backgroundColor: "#fcedf2",
-    borderRadius: 6,
-    padding: 16,
-    display: "flex",
-    alignItems: "center",
-    gap: 8,
-    color: "#c73e6d",
-    fill: "currentColor",
-    fontFamily: "Heebo, sans-serif",
-    fontSize: 16
-  });
-  const { className: noDisplayClassName, styleElement: noDisplayStyleElement } = useStyle({
-    display: "none"
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    outerStyleElement,
-    /* @__PURE__ */ jsxs("div", { ref, className: outerClassName, children: [
-      noDisplayStyleElement,
-      /* @__PURE__ */ jsx(Warning20, {}),
-      /* @__PURE__ */ jsx("span", { children: text }),
-      /* @__PURE__ */ jsx("span", { className: noDisplayClassName, children: details })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      style: {
+        width: "100%",
+        height: 54,
+        backgroundColor: "#fcedf2",
+        borderRadius: 6,
+        padding: 16,
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        color: "#c73e6d"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Warning20,
+          {
+            style: {
+              fill: "currentColor"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              color: "currentColor",
+              fontFamily: "Heebo, sans-serif",
+              fontSize: 16
+            },
+            children: text
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              display: "none"
+            },
+            children: details
+          }
+        )
+      ]
+    }
+  );
 });
 export {
   FallbackComponent

package/dist/esm/components/shared/FallbackComponent/FallbackComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/shared/FallbackComponent/FallbackComponent.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { Warning20 } from '../../icons/Warning20'\nimport { useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = {\n  text: string\n  details?: string\n}\n\nexport const FallbackComponent = forwardRef(function FallbackComponent(\n  { text, details }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const { className: outerClassName, styleElement: outerStyleElement } = useStyle({\n    width: '100%',\n    height: 54,\n    backgroundColor: '#fcedf2',\n    borderRadius: 6,\n    padding: 16,\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n    color: '#c73e6d',\n    fill: 'currentColor',\n    fontFamily: 'Heebo, sans-serif',\n    fontSize: 16,\n  })\n  const { className: noDisplayClassName, styleElement: noDisplayStyleElement } = useStyle({\n    display: 'none',\n  })\n  return (\n    <>\n      {outerStyleElement}\n      <div ref={ref} className={outerClassName}>\n        {noDisplayStyleElement}\n        <Warning20 />\n        <span>{text}</span>\n        <span className={noDisplayClassName}>{details}</span>\n      </div>\n    </>\n  )\n})\n"],"mappings":"AA+BI,mBAII,KAFF,YAFF;AA/BJ,SAAS,kBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAOlB,MAAM,oBAAoB,WAAW,SAASA,mBACnD,EAAE,MAAM,QAAQ,GAChB,KACA;AACA,QAAM,EAAE,WAAW,gBAAgB,cAAc,kBAAkB,IAAI,SAAS;AAAA,IAC9E,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,EAAE,WAAW,oBAAoB,cAAc,sBAAsB,IAAI,SAAS;AAAA,IACtF,SAAS;AAAA,EACX,CAAC;AACD,SACE,iCACG;AAAA;AAAA,IACD,qBAAC,SAAI,KAAU,WAAW,gBACvB;AAAA;AAAA,MACD,oBAAC,aAAU;AAAA,MACX,oBAAC,UAAM,gBAAK;AAAA,MACZ,oBAAC,UAAK,WAAW,oBAAqB,mBAAQ;AAAA,OAChD;AAAA,KACF;AAEJ,CAAC;","names":["FallbackComponent"]}
+{"version":3,"sources":["../../../../../src/components/shared/FallbackComponent/FallbackComponent.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { Warning20 } from '../../icons/Warning20'\n\ntype Props = {\n  text: string\n  details?: string\n}\n\nexport const FallbackComponent = forwardRef(function FallbackComponent(\n  { text, details }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  // Intentionally use inline styles so that the fallback doesn't access the style\n  // context, the absence of which may be the exact error we're trying to report\n  return (\n    <div\n      ref={ref}\n      style={{\n        width: '100%',\n        height: 54,\n        backgroundColor: '#fcedf2',\n        borderRadius: 6,\n        padding: 16,\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        color: '#c73e6d',\n      }}\n    >\n      <Warning20\n        style={{\n          fill: 'currentColor',\n        }}\n      />\n      <span\n        style={{\n          color: 'currentColor',\n          fontFamily: 'Heebo, sans-serif',\n          fontSize: 16,\n        }}\n      >\n        {text}\n      </span>\n      <span\n        style={{\n          display: 'none',\n        }}\n      >\n        {details}\n      </span>\n    </div>\n  )\n})\n"],"mappings":"AAeI,SAcE,KAdF;AAfJ,SAAS,kBAAuB;AAChC,SAAS,iBAAiB;AAOnB,MAAM,oBAAoB,WAAW,SAASA,mBACnD,EAAE,MAAM,QAAQ,GAChB,KACA;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,SAAS;AAAA,QACT,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,MAAM;AAAA,YACR;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,OAAO;AAAA,cACP,YAAY;AAAA,cACZ,UAAU;AAAA,YACZ;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,SAAS;AAAA,YACX;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["FallbackComponent"]}

package/dist/esm/next/components/tests/controls/page-control-prop-rendering.js

@@ -9,6 +9,7 @@ import { MakeswiftComponent } from "../../../../runtimes/react/components/Makesw
 import { Page } from "../../page";
 import { isServer } from "../../../../utils/is-server";
 import { renderToString } from "../../../../runtimes/react/testing/render-to-string";
+import { windowMocks } from "../../../../testing/window";
 import * as Testing from "../../../testing";
 const ROOT_ID = "00000000-0000-0000-0000-000000000000";
 const ELEMENT_ID = "11111111-1111-1111-1111-111111111111";
@@ -29,22 +30,6 @@ async function serverSideRender(children) {
   );
   return dom.window.document;
 }
-function stubBuilderMessageChannel() {
-  const postMessageSpy = jest.spyOn(window, "postMessage").mockImplementation(() => {
-  });
-  const originalMessageChannel = window.MessageChannel;
-  const stubPort = () => ({ onmessage: null, postMessage: () => {
-  }, close: () => {
-  } });
-  window.MessageChannel = class {
-    port1 = stubPort();
-    port2 = stubPort();
-  };
-  return () => {
-    postMessageSpy.mockRestore();
-    window.MessageChannel = originalMessageChannel;
-  };
-}
 async function testPageControlPropRendering(controlDefinition, {
   toData,
   value,
@@ -95,7 +80,7 @@ async function testPageControlPropRendering(controlDefinition, {
     return /* @__PURE__ */ jsx(Testing.ReactProvider, { runtime, siteVersion, children: component });
   };
   if (!isServer()) {
-    const restoreMessageChannel = isReadOnly ? null : stubBuilderMessageChannel();
+    const postMessageMock = windowMocks.mockPostMessage();
     const rootElementData = Testing.createRootComponent(
       [elementData, ...rootElements],
       ROOT_ID
@@ -112,7 +97,7 @@ async function testPageControlPropRendering(controlDefinition, {
     if (expectedRenders != null) {
       expect(Number(screen.getByTestId(renderCountTestId).textContent)).toBe(expectedRenders);
     }
-    restoreMessageChannel?.();
+    postMessageMock.restore();
   } else {
     console.assert(action == null);
     console.assert(rootElements.length === 0);

package/dist/esm/next/components/tests/controls/page-control-prop-rendering.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/next/components/tests/controls/page-control-prop-rendering.tsx"],"sourcesContent":["import { type ReactNode, Fragment, forwardRef, useRef, isValidElement, act } from 'react'\nimport { JSDOM } from 'jsdom'\nimport { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom'\nimport { ServerInsertedHTMLContext } from 'next/navigation'\n\nimport { type Data, type ValueType, type DataType, ControlDefinition } from '@makeswift/controls'\n\nimport { type CacheData } from '../../../../api/api-resources-client'\nimport { ElementData } from '../../../../state/read-only-state'\nimport { setIsInBuilder } from '../../../../state/actions/internal/read-only-actions'\nimport { ReactRuntime } from '../../../../runtimes/react/react-runtime'\nimport { MakeswiftComponent } from '../../../../runtimes/react/components/MakeswiftComponent'\nimport { Page } from '../../page'\nimport { isServer } from '../../../../utils/is-server'\n\nimport { renderToString } from '../../../../runtimes/react/testing/render-to-string'\nimport * as Testing from '../../../testing'\n\nconst ROOT_ID = '00000000-0000-0000-0000-000000000000'\nconst ELEMENT_ID = '11111111-1111-1111-1111-111111111111'\n\nconst renderProp = (prop: any) =>\n  prop === undefined ? 'undefined' : isValidElement(prop) ? prop : JSON.stringify(prop)\n\nconst propSnapshot = (prop: HTMLElement | null) =>\n  prop?.childElementCount ? prop.childNodes : parseStringifiedProp(prop?.textContent ?? '')\n\nconst parseStringifiedProp = (prop: string) => (prop === 'undefined' ? undefined : JSON.parse(prop))\n\nasync function serverSideRender(children: ReactNode) {\n  // wrap the children in a context provider to capture server-inserted HTML, see\n  // https://github.com/vercel/next.js/blob/canary/packages/next/src/server/app-render/server-inserted-html.tsx\n  const serverInsertedCallbacks: (() => React.ReactNode)[] = []\n\n  const elementTree = (\n    <ServerInsertedHTMLContext.Provider value={handler => serverInsertedCallbacks.push(handler)}>\n      {children}\n    </ServerInsertedHTMLContext.Provider>\n  )\n\n  const elementsHTML = await renderToString(elementTree)\n\n  const serverInsertedNodes = serverInsertedCallbacks.map((callback, index) => (\n    <Fragment key={'__next_server_inserted__' + index}>{callback()}</Fragment>\n  ))\n\n  const headHTML = await renderToString(serverInsertedNodes)\n\n  const dom = new JSDOM(\n    `<!DOCTYPE html><head>${headHTML}</head><body><div id=\"root\">${elementsHTML}</div></body></div>`,\n    {\n      runScripts: 'dangerously',\n    },\n  )\n\n  return dom.window.document\n}\n\n/**\n * In read-write mode, the runtime opens a `MessageChannel` to the builder\n * parent frame; jsdom doesn't implement `MessageChannel`, so stub them to keep\n * the read-write setup from throwing.\n */\nfunction stubBuilderMessageChannel(): () => void {\n  const postMessageSpy = jest.spyOn(window, 'postMessage').mockImplementation(() => {})\n\n  const originalMessageChannel = window.MessageChannel\n  const stubPort = () => ({ onmessage: null, postMessage: () => {}, close: () => {} })\n  window.MessageChannel = class {\n    port1 = stubPort()\n    port2 = stubPort()\n  } as unknown as typeof MessageChannel\n\n  return () => {\n    postMessageSpy.mockRestore()\n    window.MessageChannel = originalMessageChannel\n  }\n}\n\nexport async function testPageControlPropRendering<D extends ControlDefinition>(\n  controlDefinition: D,\n  {\n    toData,\n    value,\n    locale,\n    cacheData,\n    expectedRenders,\n    registerComponents,\n    action,\n    rootElements = [],\n    isInBuilder = false,\n    isReadOnly = true,\n  }: {\n    toData?: (value: ValueType<D>) => DataType<D>\n    value: ValueType<D> | undefined\n    locale?: string | null\n    cacheData?: Partial<CacheData>\n    expectedRenders?: number\n    registerComponents?: (runtime: ReactRuntime) => void\n    action?: (element: HTMLElement) => Promise<void>\n    rootElements?: ElementData[]\n    isInBuilder?: boolean\n    isReadOnly?: boolean\n  },\n) {\n  // Arrange\n  const controlData: DataType<D> | Data =\n    value !== undefined ? (toData ? toData(value) : controlDefinition.toData(value)) : undefined\n\n  const testComponentMeta = {\n    type: 'TestComponent',\n    label: 'Test Component',\n  }\n\n  const testId = 'test-id'\n  const renderCountTestId = 'render-count-test-id'\n  const elementData: ElementData = {\n    key: ELEMENT_ID,\n    type: testComponentMeta.type,\n    props: {\n      propKey: controlData,\n    },\n  }\n\n  const runtime = Testing.createReactRuntime()\n  runtime.protoStore.dispatch(setIsInBuilder(isInBuilder))\n  registerComponents?.(runtime)\n\n  // Act\n  runtime.registerComponent(\n    forwardRef<HTMLDivElement, { propKey?: any }>(({ propKey }, ref) => {\n      const renderCount = useRef(0)\n      ++renderCount.current\n\n      return (\n        <div ref={ref}>\n          <div data-testid={renderCountTestId}>{renderCount.current}</div>\n          <div data-testid={testId}>{renderProp(propKey)}</div>\n        </div>\n      )\n    }),\n    {\n      ...testComponentMeta,\n      props: {\n        propKey: controlDefinition as any,\n      },\n    },\n  )\n\n  const testElementTree = (component: ReactNode) => {\n    // The runtime enters the read-write state when a non-null site version is\n    // passed\n    const siteVersion = isReadOnly ? null : { token: 'test-token', version: 'draft' }\n    return (\n      <Testing.ReactProvider runtime={runtime} siteVersion={siteVersion}>\n        {component}\n      </Testing.ReactProvider>\n    )\n  }\n\n  if (!isServer()) {\n    const restoreMessageChannel = isReadOnly ? null : stubBuilderMessageChannel()\n\n    const rootElementData: ElementData = Testing.createRootComponent(\n      [elementData, ...rootElements],\n      ROOT_ID,\n    )\n\n    const snapshot = Testing.createMakeswiftPageSnapshot(rootElementData, { locale, cacheData })\n\n    // Assert\n    await act(async () => render(testElementTree(<Page snapshot={snapshot} />)))\n\n    if (action) {\n      await act(async () => {\n        await action(screen.getByTestId(testId))\n      })\n    }\n\n    expect(snapshot).toMatchSnapshot('snapshot')\n    expect(propSnapshot(screen.getByTestId(testId))).toMatchSnapshot('resolvedValue')\n\n    if (expectedRenders != null) {\n      expect(Number(screen.getByTestId(renderCountTestId).textContent)).toBe(expectedRenders)\n    }\n\n    restoreMessageChannel?.()\n  } else {\n    // test server-side rendering using a component snapshot\n    console.assert(action == null)\n    console.assert(rootElements.length === 0)\n\n    const snapshot = Testing.createMakeswiftComponentSnapshot(elementData, { locale, cacheData })\n    const elementTree = testElementTree(\n      <MakeswiftComponent snapshot={snapshot} {...testComponentMeta} />,\n    )\n\n    const document = await serverSideRender(elementTree)\n    const getByTestId = (id: string): HTMLElement | null =>\n      document.querySelector(`[data-testid=\"${id}\"]`)\n\n    expect(propSnapshot(getByTestId(testId))).toMatchSnapshot('resolvedValue')\n    expect(\n      [...document.querySelectorAll('style')].map(n => n.textContent).filter(v => v !== ''),\n    ).toMatchSnapshot('component styles')\n\n    expect(Number(getByTestId(renderCountTestId)?.textContent)).toBe(1)\n  }\n}\n"],"mappings":"AAoCI,cAoGI,YApGJ;AApCJ,SAAyB,UAAU,YAAY,QAAQ,gBAAgB,WAAW;AAClF,SAAS,aAAa;AACtB,SAAS,QAAQ,cAAc;AAC/B,OAAO;AACP,SAAS,iCAAiC;AAM1C,SAAS,sBAAsB;AAE/B,SAAS,0BAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAEzB,SAAS,sBAAsB;AAC/B,YAAY,aAAa;AAEzB,MAAM,UAAU;AAChB,MAAM,aAAa;AAEnB,MAAM,aAAa,CAAC,SAClB,SAAS,SAAY,cAAc,eAAe,IAAI,IAAI,OAAO,KAAK,UAAU,IAAI;AAEtF,MAAM,eAAe,CAAC,SACpB,MAAM,oBAAoB,KAAK,aAAa,qBAAqB,MAAM,eAAe,EAAE;AAE1F,MAAM,uBAAuB,CAAC,SAAkB,SAAS,cAAc,SAAY,KAAK,MAAM,IAAI;AAElG,eAAe,iBAAiB,UAAqB;AAGnD,QAAM,0BAAqD,CAAC;AAE5D,QAAM,cACJ,oBAAC,0BAA0B,UAA1B,EAAmC,OAAO,aAAW,wBAAwB,KAAK,OAAO,GACvF,UACH;AAGF,QAAM,eAAe,MAAM,eAAe,WAAW;AAErD,QAAM,sBAAsB,wBAAwB,IAAI,CAAC,UAAU,UACjE,oBAAC,YAAmD,mBAAS,KAA9C,6BAA6B,KAAmB,CAChE;AAED,QAAM,WAAW,MAAM,eAAe,mBAAmB;AAEzD,QAAM,MAAM,IAAI;AAAA,IACd,wBAAwB,QAAQ,+BAA+B,YAAY;AAAA,IAC3E;AAAA,MACE,YAAY;AAAA,IACd;AAAA,EACF;AAEA,SAAO,IAAI,OAAO;AACpB;AAOA,SAAS,4BAAwC;AAC/C,QAAM,iBAAiB,KAAK,MAAM,QAAQ,aAAa,EAAE,mBAAmB,MAAM;AAAA,EAAC,CAAC;AAEpF,QAAM,yBAAyB,OAAO;AACtC,QAAM,WAAW,OAAO,EAAE,WAAW,MAAM,aAAa,MAAM;AAAA,EAAC,GAAG,OAAO,MAAM;AAAA,EAAC,EAAE;AAClF,SAAO,iBAAiB,MAAM;AAAA,IAC5B,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,EACnB;AAEA,SAAO,MAAM;AACX,mBAAe,YAAY;AAC3B,WAAO,iBAAiB;AAAA,EAC1B;AACF;AAEA,eAAsB,6BACpB,mBACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,cAAc;AAAA,EACd,aAAa;AACf,GAYA;AAEA,QAAM,cACJ,UAAU,SAAa,SAAS,OAAO,KAAK,IAAI,kBAAkB,OAAO,KAAK,IAAK;AAErF,QAAM,oBAAoB;AAAA,IACxB,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAEA,QAAM,SAAS;AACf,QAAM,oBAAoB;AAC1B,QAAM,cAA2B;AAAA,IAC/B,KAAK;AAAA,IACL,MAAM,kBAAkB;AAAA,IACxB,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,EACF;AAEA,QAAM,UAAU,QAAQ,mBAAmB;AAC3C,UAAQ,WAAW,SAAS,eAAe,WAAW,CAAC;AACvD,uBAAqB,OAAO;AAG5B,UAAQ;AAAA,IACN,WAA8C,CAAC,EAAE,QAAQ,GAAG,QAAQ;AAClE,YAAM,cAAc,OAAO,CAAC;AAC5B,QAAE,YAAY;AAEd,aACE,qBAAC,SAAI,KACH;AAAA,4BAAC,SAAI,eAAa,mBAAoB,sBAAY,SAAQ;AAAA,QAC1D,oBAAC,SAAI,eAAa,QAAS,qBAAW,OAAO,GAAE;AAAA,SACjD;AAAA,IAEJ,CAAC;AAAA,IACD;AAAA,MACE,GAAG;AAAA,MACH,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAkB,CAAC,cAAyB;AAGhD,UAAM,cAAc,aAAa,OAAO,EAAE,OAAO,cAAc,SAAS,QAAQ;AAChF,WACE,oBAAC,QAAQ,eAAR,EAAsB,SAAkB,aACtC,qBACH;AAAA,EAEJ;AAEA,MAAI,CAAC,SAAS,GAAG;AACf,UAAM,wBAAwB,aAAa,OAAO,0BAA0B;AAE5E,UAAM,kBAA+B,QAAQ;AAAA,MAC3C,CAAC,aAAa,GAAG,YAAY;AAAA,MAC7B;AAAA,IACF;AAEA,UAAM,WAAW,QAAQ,4BAA4B,iBAAiB,EAAE,QAAQ,UAAU,CAAC;AAG3F,UAAM,IAAI,YAAY,OAAO,gBAAgB,oBAAC,QAAK,UAAoB,CAAE,CAAC,CAAC;AAE3E,QAAI,QAAQ;AACV,YAAM,IAAI,YAAY;AACpB,cAAM,OAAO,OAAO,YAAY,MAAM,CAAC;AAAA,MACzC,CAAC;AAAA,IACH;AAEA,WAAO,QAAQ,EAAE,gBAAgB,UAAU;AAC3C,WAAO,aAAa,OAAO,YAAY,MAAM,CAAC,CAAC,EAAE,gBAAgB,eAAe;AAEhF,QAAI,mBAAmB,MAAM;AAC3B,aAAO,OAAO,OAAO,YAAY,iBAAiB,EAAE,WAAW,CAAC,EAAE,KAAK,eAAe;AAAA,IACxF;AAEA,4BAAwB;AAAA,EAC1B,OAAO;AAEL,YAAQ,OAAO,UAAU,IAAI;AAC7B,YAAQ,OAAO,aAAa,WAAW,CAAC;AAExC,UAAM,WAAW,QAAQ,iCAAiC,aAAa,EAAE,QAAQ,UAAU,CAAC;AAC5F,UAAM,cAAc;AAAA,MAClB,oBAAC,sBAAmB,UAAqB,GAAG,mBAAmB;AAAA,IACjE;AAEA,UAAM,WAAW,MAAM,iBAAiB,WAAW;AACnD,UAAM,cAAc,CAAC,OACnB,SAAS,cAAc,iBAAiB,EAAE,IAAI;AAEhD,WAAO,aAAa,YAAY,MAAM,CAAC,CAAC,EAAE,gBAAgB,eAAe;AACzE;AAAA,MACE,CAAC,GAAG,SAAS,iBAAiB,OAAO,CAAC,EAAE,IAAI,OAAK,EAAE,WAAW,EAAE,OAAO,OAAK,MAAM,EAAE;AAAA,IACtF,EAAE,gBAAgB,kBAAkB;AAEpC,WAAO,OAAO,YAAY,iBAAiB,GAAG,WAAW,CAAC,EAAE,KAAK,CAAC;AAAA,EACpE;AACF;","names":[]}
+{"version":3,"sources":["../../../../../../src/next/components/tests/controls/page-control-prop-rendering.tsx"],"sourcesContent":["import { type ReactNode, Fragment, forwardRef, useRef, isValidElement, act } from 'react'\nimport { JSDOM } from 'jsdom'\nimport { render, screen } from '@testing-library/react'\nimport '@testing-library/jest-dom'\nimport { ServerInsertedHTMLContext } from 'next/navigation'\n\nimport { type Data, type ValueType, type DataType, ControlDefinition } from '@makeswift/controls'\n\nimport { type CacheData } from '../../../../api/api-resources-client'\nimport { ElementData } from '../../../../state/read-only-state'\nimport { setIsInBuilder } from '../../../../state/actions/internal/read-only-actions'\nimport { ReactRuntime } from '../../../../runtimes/react/react-runtime'\nimport { MakeswiftComponent } from '../../../../runtimes/react/components/MakeswiftComponent'\nimport { Page } from '../../page'\nimport { isServer } from '../../../../utils/is-server'\n\nimport { renderToString } from '../../../../runtimes/react/testing/render-to-string'\nimport { windowMocks } from '../../../../testing/window'\nimport * as Testing from '../../../testing'\n\nconst ROOT_ID = '00000000-0000-0000-0000-000000000000'\nconst ELEMENT_ID = '11111111-1111-1111-1111-111111111111'\n\nconst renderProp = (prop: any) =>\n  prop === undefined ? 'undefined' : isValidElement(prop) ? prop : JSON.stringify(prop)\n\nconst propSnapshot = (prop: HTMLElement | null) =>\n  prop?.childElementCount ? prop.childNodes : parseStringifiedProp(prop?.textContent ?? '')\n\nconst parseStringifiedProp = (prop: string) => (prop === 'undefined' ? undefined : JSON.parse(prop))\n\nasync function serverSideRender(children: ReactNode) {\n  // wrap the children in a context provider to capture server-inserted HTML, see\n  // https://github.com/vercel/next.js/blob/canary/packages/next/src/server/app-render/server-inserted-html.tsx\n  const serverInsertedCallbacks: (() => React.ReactNode)[] = []\n\n  const elementTree = (\n    <ServerInsertedHTMLContext.Provider value={handler => serverInsertedCallbacks.push(handler)}>\n      {children}\n    </ServerInsertedHTMLContext.Provider>\n  )\n\n  const elementsHTML = await renderToString(elementTree)\n\n  const serverInsertedNodes = serverInsertedCallbacks.map((callback, index) => (\n    <Fragment key={'__next_server_inserted__' + index}>{callback()}</Fragment>\n  ))\n\n  const headHTML = await renderToString(serverInsertedNodes)\n\n  const dom = new JSDOM(\n    `<!DOCTYPE html><head>${headHTML}</head><body><div id=\"root\">${elementsHTML}</div></body></div>`,\n    {\n      runScripts: 'dangerously',\n    },\n  )\n\n  return dom.window.document\n}\n\nexport async function testPageControlPropRendering<D extends ControlDefinition>(\n  controlDefinition: D,\n  {\n    toData,\n    value,\n    locale,\n    cacheData,\n    expectedRenders,\n    registerComponents,\n    action,\n    rootElements = [],\n    isInBuilder = false,\n    isReadOnly = true,\n  }: {\n    toData?: (value: ValueType<D>) => DataType<D>\n    value: ValueType<D> | undefined\n    locale?: string | null\n    cacheData?: Partial<CacheData>\n    expectedRenders?: number\n    registerComponents?: (runtime: ReactRuntime) => void\n    action?: (element: HTMLElement) => Promise<void>\n    rootElements?: ElementData[]\n    isInBuilder?: boolean\n    isReadOnly?: boolean\n  },\n) {\n  // Arrange\n  const controlData: DataType<D> | Data =\n    value !== undefined ? (toData ? toData(value) : controlDefinition.toData(value)) : undefined\n\n  const testComponentMeta = {\n    type: 'TestComponent',\n    label: 'Test Component',\n  }\n\n  const testId = 'test-id'\n  const renderCountTestId = 'render-count-test-id'\n  const elementData: ElementData = {\n    key: ELEMENT_ID,\n    type: testComponentMeta.type,\n    props: {\n      propKey: controlData,\n    },\n  }\n\n  const runtime = Testing.createReactRuntime()\n  runtime.protoStore.dispatch(setIsInBuilder(isInBuilder))\n  registerComponents?.(runtime)\n\n  // Act\n  runtime.registerComponent(\n    forwardRef<HTMLDivElement, { propKey?: any }>(({ propKey }, ref) => {\n      const renderCount = useRef(0)\n      ++renderCount.current\n\n      return (\n        <div ref={ref}>\n          <div data-testid={renderCountTestId}>{renderCount.current}</div>\n          <div data-testid={testId}>{renderProp(propKey)}</div>\n        </div>\n      )\n    }),\n    {\n      ...testComponentMeta,\n      props: {\n        propKey: controlDefinition as any,\n      },\n    },\n  )\n\n  const testElementTree = (component: ReactNode) => {\n    // The runtime enters the read-write state when a non-null site version is\n    // passed\n    const siteVersion = isReadOnly ? null : { token: 'test-token', version: 'draft' }\n    return (\n      <Testing.ReactProvider runtime={runtime} siteVersion={siteVersion}>\n        {component}\n      </Testing.ReactProvider>\n    )\n  }\n\n  if (!isServer()) {\n    const postMessageMock = windowMocks.mockPostMessage()\n\n    const rootElementData: ElementData = Testing.createRootComponent(\n      [elementData, ...rootElements],\n      ROOT_ID,\n    )\n\n    const snapshot = Testing.createMakeswiftPageSnapshot(rootElementData, { locale, cacheData })\n\n    // Assert\n    await act(async () => render(testElementTree(<Page snapshot={snapshot} />)))\n\n    if (action) {\n      await act(async () => {\n        await action(screen.getByTestId(testId))\n      })\n    }\n\n    expect(snapshot).toMatchSnapshot('snapshot')\n    expect(propSnapshot(screen.getByTestId(testId))).toMatchSnapshot('resolvedValue')\n\n    if (expectedRenders != null) {\n      expect(Number(screen.getByTestId(renderCountTestId).textContent)).toBe(expectedRenders)\n    }\n\n    postMessageMock.restore()\n  } else {\n    // test server-side rendering using a component snapshot\n    console.assert(action == null)\n    console.assert(rootElements.length === 0)\n\n    const snapshot = Testing.createMakeswiftComponentSnapshot(elementData, { locale, cacheData })\n    const elementTree = testElementTree(\n      <MakeswiftComponent snapshot={snapshot} {...testComponentMeta} />,\n    )\n\n    const document = await serverSideRender(elementTree)\n    const getByTestId = (id: string): HTMLElement | null =>\n      document.querySelector(`[data-testid=\"${id}\"]`)\n\n    expect(propSnapshot(getByTestId(testId))).toMatchSnapshot('resolvedValue')\n    expect(\n      [...document.querySelectorAll('style')].map(n => n.textContent).filter(v => v !== ''),\n    ).toMatchSnapshot('component styles')\n\n    expect(Number(getByTestId(renderCountTestId)?.textContent)).toBe(1)\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/esm/next/document.js

@@ -52,7 +52,8 @@ function InnerRootStyleRegistry({
   const outerStylesContext = useContext(StylesContext);
   const outerStylesProps = {
     classNamePrefix: outerStylesContext?.classNamePrefix,
-    enableCssReset: outerStylesContext?.enableCssReset
+    enableCssReset: outerStylesContext?.enableCssReset,
+    forceImportant: outerStylesContext?.forceImportant
   };
   return /* @__PURE__ */ jsx(
     RootStyleRegistry,

package/dist/esm/next/document.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/document.tsx"],"sourcesContent":["'use client'\n\nimport NextDocument, {\n  DocumentContext,\n  DocumentInitialProps,\n  Head,\n  Html,\n  Main,\n  NextScript,\n} from 'next/document'\nimport {\n  createMakeswiftStylesRegistry,\n  RootStyleProps,\n  RootStyleRegistry,\n  StylesRegistry,\n} from '../unstable-framework-support'\nimport { PropsWithChildren, useContext } from 'react'\nimport { StylesContext } from '../runtimes/react/css-runtime/components/styles-context-provider'\n\nexport class Document extends NextDocument {\n  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {\n    const originalRenderPage = ctx.renderPage\n    const stylesRegistry = createMakeswiftStylesRegistry()\n\n    /*\n      This runs only on the server and configures a `RootStyleRegistry` which disables\n      rendering Makeswift-generated `<style>`s alongside components, opting instead to\n      pull them from the styles registry and place them in the `<head>` manually.\n      This is a special case for pages router, where React hoisting will not work during\n      SSR.\n\n      `InnerRootStyleRegistry` is a wrapper component that pulls in user configuration\n      from the outer (userland) `RootStyleRegistry`. This would matter, for example, if\n      the `RootStyleRegistry` in userland was configured with a custom class name prefix.\n    */\n    ctx.renderPage = () => {\n      return originalRenderPage({\n        enhanceComponent: Component => props => (\n          <InnerRootStyleRegistry stylesRegistry={stylesRegistry}>\n            <Component {...props}></Component>\n          </InnerRootStyleRegistry>\n        ),\n      })\n    }\n\n    const initialProps = await super.getInitialProps(ctx)\n    const perPrecedenceStyleProps = stylesRegistry.serializeToStyleProps()\n    const makeswiftStyleElements = perPrecedenceStyleProps.map(props => {\n      return (\n        <style key={props.precedence} data-href={props.href} data-precedence={props.precedence}>\n          {props.css}\n        </style>\n      )\n    })\n\n    const combinedStyles = (\n      <>\n        {initialProps.styles}\n        {makeswiftStyleElements}\n      </>\n    )\n\n    return {\n      ...initialProps,\n      styles: combinedStyles,\n    }\n  }\n\n  render() {\n    return (\n      <Html>\n        <Head />\n        <body>\n          <Main />\n          <NextScript />\n        </body>\n      </Html>\n    )\n  }\n}\n\nfunction InnerRootStyleRegistry({\n  children,\n  stylesRegistry,\n}: PropsWithChildren<{\n  stylesRegistry: StylesRegistry\n}>) {\n  const outerStylesContext = useContext(StylesContext)\n\n  const outerStylesProps: RootStyleProps = {\n    classNamePrefix: outerStylesContext?.classNamePrefix,\n    enableCssReset: outerStylesContext?.enableCssReset,\n  }\n\n  return (\n    <RootStyleRegistry\n      {...outerStylesProps}\n      stylesRegistry={stylesRegistry}\n      shouldRenderStyleElements={false}\n    >\n      {children}\n    </RootStyleRegistry>\n  )\n}\n"],"mappings":";AAuCY,SAiBN,UAjBM,KAiBN,YAjBM;AArCZ,OAAO;AAAA,EAGL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EAEA;AAAA,OAEK;AACP,SAA4B,kBAAkB;AAC9C,SAAS,qBAAqB;AAEvB,MAAM,iBAAiB,aAAa;AAAA,EACzC,aAAa,gBAAgB,KAAqD;AAChF,UAAM,qBAAqB,IAAI;AAC/B,UAAM,iBAAiB,8BAA8B;AAarD,QAAI,aAAa,MAAM;AACrB,aAAO,mBAAmB;AAAA,QACxB,kBAAkB,eAAa,WAC7B,oBAAC,0BAAuB,gBACtB,8BAAC,aAAW,GAAG,OAAO,GACxB;AAAA,MAEJ,CAAC;AAAA,IACH;AAEA,UAAM,eAAe,MAAM,MAAM,gBAAgB,GAAG;AACpD,UAAM,0BAA0B,eAAe,sBAAsB;AACrE,UAAM,yBAAyB,wBAAwB,IAAI,WAAS;AAClE,aACE,oBAAC,WAA6B,aAAW,MAAM,MAAM,mBAAiB,MAAM,YACzE,gBAAM,OADG,MAAM,UAElB;AAAA,IAEJ,CAAC;AAED,UAAM,iBACJ,iCACG;AAAA,mBAAa;AAAA,MACb;AAAA,OACH;AAGF,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WACE,qBAAC,QACC;AAAA,0BAAC,QAAK;AAAA,MACN,qBAAC,UACC;AAAA,4BAAC,QAAK;AAAA,QACN,oBAAC,cAAW;AAAA,SACd;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AACF,GAEI;AACF,QAAM,qBAAqB,WAAW,aAAa;AAEnD,QAAM,mBAAmC;AAAA,IACvC,iBAAiB,oBAAoB;AAAA,IACrC,gBAAgB,oBAAoB;AAAA,EACtC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,2BAA2B;AAAA,MAE1B;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/next/document.tsx"],"sourcesContent":["'use client'\n\nimport NextDocument, {\n  DocumentContext,\n  DocumentInitialProps,\n  Head,\n  Html,\n  Main,\n  NextScript,\n} from 'next/document'\nimport {\n  createMakeswiftStylesRegistry,\n  RootStyleProps,\n  RootStyleRegistry,\n  StylesRegistry,\n} from '../unstable-framework-support'\nimport { PropsWithChildren, useContext } from 'react'\nimport { StylesContext } from '../runtimes/react/css-runtime/components/styles-context-provider'\n\nexport class Document extends NextDocument {\n  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {\n    const originalRenderPage = ctx.renderPage\n    const stylesRegistry = createMakeswiftStylesRegistry()\n\n    /*\n      This runs only on the server and configures a `RootStyleRegistry` which disables\n      rendering Makeswift-generated `<style>`s alongside components, opting instead to\n      pull them from the styles registry and place them in the `<head>` manually.\n      This is a special case for pages router, where React hoisting will not work during\n      SSR.\n\n      `InnerRootStyleRegistry` is a wrapper component that pulls in user configuration\n      from the outer (userland) `RootStyleRegistry`. This would matter, for example, if\n      the `RootStyleRegistry` in userland was configured with a custom class name prefix.\n    */\n    ctx.renderPage = () => {\n      return originalRenderPage({\n        enhanceComponent: Component => props => (\n          <InnerRootStyleRegistry stylesRegistry={stylesRegistry}>\n            <Component {...props}></Component>\n          </InnerRootStyleRegistry>\n        ),\n      })\n    }\n\n    const initialProps = await super.getInitialProps(ctx)\n    const perPrecedenceStyleProps = stylesRegistry.serializeToStyleProps()\n    const makeswiftStyleElements = perPrecedenceStyleProps.map(props => {\n      return (\n        <style key={props.precedence} data-href={props.href} data-precedence={props.precedence}>\n          {props.css}\n        </style>\n      )\n    })\n\n    const combinedStyles = (\n      <>\n        {initialProps.styles}\n        {makeswiftStyleElements}\n      </>\n    )\n\n    return {\n      ...initialProps,\n      styles: combinedStyles,\n    }\n  }\n\n  render() {\n    return (\n      <Html>\n        <Head />\n        <body>\n          <Main />\n          <NextScript />\n        </body>\n      </Html>\n    )\n  }\n}\n\nfunction InnerRootStyleRegistry({\n  children,\n  stylesRegistry,\n}: PropsWithChildren<{\n  stylesRegistry: StylesRegistry\n}>) {\n  const outerStylesContext = useContext(StylesContext)\n\n  const outerStylesProps: RootStyleProps = {\n    classNamePrefix: outerStylesContext?.classNamePrefix,\n    enableCssReset: outerStylesContext?.enableCssReset,\n    forceImportant: outerStylesContext?.forceImportant,\n  }\n\n  return (\n    <RootStyleRegistry\n      {...outerStylesProps}\n      stylesRegistry={stylesRegistry}\n      shouldRenderStyleElements={false}\n    >\n      {children}\n    </RootStyleRegistry>\n  )\n}\n"],"mappings":";AAuCY,SAiBN,UAjBM,KAiBN,YAjBM;AArCZ,OAAO;AAAA,EAGL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EAEA;AAAA,OAEK;AACP,SAA4B,kBAAkB;AAC9C,SAAS,qBAAqB;AAEvB,MAAM,iBAAiB,aAAa;AAAA,EACzC,aAAa,gBAAgB,KAAqD;AAChF,UAAM,qBAAqB,IAAI;AAC/B,UAAM,iBAAiB,8BAA8B;AAarD,QAAI,aAAa,MAAM;AACrB,aAAO,mBAAmB;AAAA,QACxB,kBAAkB,eAAa,WAC7B,oBAAC,0BAAuB,gBACtB,8BAAC,aAAW,GAAG,OAAO,GACxB;AAAA,MAEJ,CAAC;AAAA,IACH;AAEA,UAAM,eAAe,MAAM,MAAM,gBAAgB,GAAG;AACpD,UAAM,0BAA0B,eAAe,sBAAsB;AACrE,UAAM,yBAAyB,wBAAwB,IAAI,WAAS;AAClE,aACE,oBAAC,WAA6B,aAAW,MAAM,MAAM,mBAAiB,MAAM,YACzE,gBAAM,OADG,MAAM,UAElB;AAAA,IAEJ,CAAC;AAED,UAAM,iBACJ,iCACG;AAAA,mBAAa;AAAA,MACb;AAAA,OACH;AAGF,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WACE,qBAAC,QACC;AAAA,0BAAC,QAAK;AAAA,MACN,qBAAC,UACC;AAAA,4BAAC,QAAK;AAAA,QACN,oBAAC,cAAW;AAAA,SACd;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AACF,GAEI;AACF,QAAM,qBAAqB,WAAW,aAAa;AAEnD,QAAM,mBAAmC;AAAA,IACvC,iBAAiB,oBAAoB;AAAA,IACrC,gBAAgB,oBAAoB;AAAA,IACpC,gBAAgB,oBAAoB;AAAA,EACtC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,2BAA2B;AAAA,MAE1B;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/esm/next/root-style-registry.js

@@ -6,9 +6,18 @@ import {
 function NextRootStyleRegistry({
   children,
   classNamePrefix,
-  enableCssReset
+  enableCssReset,
+  forceImportant
 }) {
-  return /* @__PURE__ */ jsx(ReactRootStyleRegistry, { classNamePrefix, enableCssReset, children });
+  return /* @__PURE__ */ jsx(
+    ReactRootStyleRegistry,
+    {
+      classNamePrefix,
+      enableCssReset,
+      forceImportant,
+      children
+    }
+  );
 }
 export {
   NextRootStyleRegistry

package/dist/esm/next/root-style-registry.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/next/root-style-registry.tsx"],"sourcesContent":["'use client'\n\nimport { type PropsWithChildren } from 'react'\n\nimport {\n  DefaultRootStyleRegistry as ReactRootStyleRegistry,\n  type RootStyleProps,\n} from '../runtimes/react/root-style-registry'\n\nexport function NextRootStyleRegistry({\n  children,\n  classNamePrefix,\n  enableCssReset,\n}: PropsWithChildren<RootStyleProps>) {\n  return (\n    <ReactRootStyleRegistry classNamePrefix={classNamePrefix} enableCssReset={enableCssReset}>\n      {children}\n    </ReactRootStyleRegistry>\n  )\n}\n"],"mappings":";AAeI;AAXJ;AAAA,EACE,4BAA4B;AAAA,OAEvB;AAEA,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,SACE,oBAAC,0BAAuB,iBAAkC,gBACvD,UACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/next/root-style-registry.tsx"],"sourcesContent":["'use client'\n\nimport { type PropsWithChildren } from 'react'\n\nimport {\n  DefaultRootStyleRegistry as ReactRootStyleRegistry,\n  type RootStyleProps,\n} from '../runtimes/react/root-style-registry'\n\nexport function NextRootStyleRegistry({\n  children,\n  classNamePrefix,\n  enableCssReset,\n  forceImportant,\n}: PropsWithChildren<RootStyleProps>) {\n  return (\n    <ReactRootStyleRegistry\n      classNamePrefix={classNamePrefix}\n      enableCssReset={enableCssReset}\n      forceImportant={forceImportant}\n    >\n      {children}\n    </ReactRootStyleRegistry>\n  )\n}\n"],"mappings":";AAgBI;AAZJ;AAAA,EACE,4BAA4B;AAAA,OAEvB;AAEA,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/esm/runtimes/react/css-runtime/components/styles-context-provider.js

@@ -6,6 +6,7 @@ function StylesContextProvider({
   children,
   classNamePrefix,
   enableCssReset,
+  forceImportant,
   stylesRegistry,
   shouldRenderStyleElements
 }) {
@@ -15,6 +16,7 @@ function StylesContextProvider({
       value: {
         classNamePrefix,
         enableCssReset,
+        forceImportant,
         stylesRegistry,
         shouldRenderStyleElements
       },

package/dist/esm/runtimes/react/css-runtime/components/styles-context-provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/components/styles-context-provider.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, PropsWithChildren } from 'react'\nimport { StylesRegistry } from '../styles-registry'\n\nexport type StylesContextValue = {\n  classNamePrefix: string\n  enableCssReset: boolean\n  stylesRegistry: StylesRegistry\n\n  /**\n   * By default, Makeswift-generated `<style>` elements are placed in JSX alongside the components that use them\n   * (note that in practice, React may hoist `<style>`s into the document `<head>` such that they don't appear in the\n   * `<body>` at all).\n   *\n   * This setting allows you to disable the automatic rendering of Makeswift-generated `<style>` elements. The expectation\n   * is that, when `shouldRenderStyleElements` is `false`, you will access generated styles from the Makeswift styles registry\n   * and handle applying them manually.\n   */\n  shouldRenderStyleElements: boolean\n}\n\nexport const StylesContext = createContext<StylesContextValue | undefined>(undefined)\n\nexport function StylesContextProvider({\n  children,\n  classNamePrefix,\n  enableCssReset,\n  stylesRegistry,\n  shouldRenderStyleElements,\n}: PropsWithChildren<StylesContextValue>) {\n  return (\n    <StylesContext.Provider\n      value={{\n        classNamePrefix,\n        enableCssReset,\n        stylesRegistry,\n        shouldRenderStyleElements,\n      }}\n    >\n      {children}\n    </StylesContext.Provider>\n  )\n}\n"],"mappings":";AAgCI;AA9BJ,SAAS,qBAAwC;AAoB1C,MAAM,gBAAgB,cAA8C,MAAS;AAE7E,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0C;AACxC,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/components/styles-context-provider.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, PropsWithChildren } from 'react'\nimport { StylesRegistry } from '../styles-registry'\n\nexport type StylesContextValue = {\n  classNamePrefix: string\n  enableCssReset: boolean\n  forceImportant: boolean\n  stylesRegistry: StylesRegistry\n\n  /**\n   * By default, Makeswift-generated `<style>` elements are placed in JSX alongside the components that use them\n   * (note that in practice, React may hoist `<style>`s into the document `<head>` such that they don't appear in the\n   * `<body>` at all).\n   *\n   * This setting allows you to disable the automatic rendering of Makeswift-generated `<style>` elements. The expectation\n   * is that, when `shouldRenderStyleElements` is `false`, you will access generated styles from the Makeswift styles registry\n   * and handle applying them manually.\n   */\n  shouldRenderStyleElements: boolean\n}\n\nexport const StylesContext = createContext<StylesContextValue | undefined>(undefined)\n\nexport function StylesContextProvider({\n  children,\n  classNamePrefix,\n  enableCssReset,\n  forceImportant,\n  stylesRegistry,\n  shouldRenderStyleElements,\n}: PropsWithChildren<StylesContextValue>) {\n  return (\n    <StylesContext.Provider\n      value={{\n        classNamePrefix,\n        enableCssReset,\n        forceImportant,\n        stylesRegistry,\n        shouldRenderStyleElements,\n      }}\n    >\n      {children}\n    </StylesContext.Provider>\n  )\n}\n"],"mappings":";AAkCI;AAhCJ,SAAS,qBAAwC;AAqB1C,MAAM,gBAAgB,cAA8C,MAAS;AAE7E,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0C;AACxC,SACE;AAAA,IAAC,cAAc;AAAA,IAAd;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/esm/runtimes/react/css-runtime/constants.js

@@ -1,10 +1,12 @@
 import { MakeswiftStylePrecedence } from "./types";
 const DEFAULT_CSS_CLASS_NAME_PREFIX = "ms";
 const DEFAULT_CSS_RESET_ENABLED = true;
+const DEFAULT_CSS_FORCE_IMPORTANT = false;
 const DEFAULT_CSS_PRECEDENCE = MakeswiftStylePrecedence.MEDIUM;
 const DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS = true;
 export {
   DEFAULT_CSS_CLASS_NAME_PREFIX,
+  DEFAULT_CSS_FORCE_IMPORTANT,
   DEFAULT_CSS_PRECEDENCE,
   DEFAULT_CSS_RESET_ENABLED,
   DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS

package/dist/esm/runtimes/react/css-runtime/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/constants.ts"],"sourcesContent":["import { MakeswiftStylePrecedence } from './types'\n\nexport const DEFAULT_CSS_CLASS_NAME_PREFIX = 'ms'\nexport const DEFAULT_CSS_RESET_ENABLED = true\nexport const DEFAULT_CSS_PRECEDENCE = MakeswiftStylePrecedence.MEDIUM\nexport const DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS = true\n"],"mappings":"AAAA,SAAS,gCAAgC;AAElC,MAAM,gCAAgC;AACtC,MAAM,4BAA4B;AAClC,MAAM,yBAAyB,yBAAyB;AACxD,MAAM,uCAAuC;","names":[]}
+{"version":3,"sources":["../../../../../src/runtimes/react/css-runtime/constants.ts"],"sourcesContent":["import { MakeswiftStylePrecedence } from './types'\n\nexport const DEFAULT_CSS_CLASS_NAME_PREFIX = 'ms'\nexport const DEFAULT_CSS_RESET_ENABLED = true\nexport const DEFAULT_CSS_FORCE_IMPORTANT = false\nexport const DEFAULT_CSS_PRECEDENCE = MakeswiftStylePrecedence.MEDIUM\nexport const DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS = true\n"],"mappings":"AAAA,SAAS,gCAAgC;AAElC,MAAM,gCAAgC;AACtC,MAAM,4BAA4B;AAClC,MAAM,8BAA8B;AACpC,MAAM,yBAAyB,yBAAyB;AACxD,MAAM,uCAAuC;","names":[]}

package/dist/esm/runtimes/react/css-runtime/hooks/use-base-styles.js

@@ -4,11 +4,11 @@ import { MakeswiftStylePrecedence } from "../types";
 import React from "react";
 import { MakeswiftStyle } from "../components/makeswift-style";
 function useBaseStyles({ styles }) {
-  const { stylesRegistry } = useStylesContext();
+  const { forceImportant, stylesRegistry } = useStylesContext();
   const { content: rawContent, contentHash } = toRawCss([styles]);
   let styleData = stylesRegistry.getBaseStyles().get(contentHash);
   if (styleData == null) {
-    const css = processCss({ content: rawContent });
+    const css = processCss({ content: rawContent, forceImportant });
     styleData = {
       css,
       cssObject: styles,

package/dist/esm/runtimes/react/css-runtime/hooks/use-base-styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-base-styles.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport { useStylesContext } from './use-styles-context'\nimport { processCss, toRawCss } from '../serialize-css'\nimport { MakeswiftStylePrecedence } from '../types'\nimport React from 'react'\nimport { MakeswiftStyle } from '../components/makeswift-style'\n\nexport function useBaseStyles({ styles }: { styles: CSSObject }) {\n  const { stylesRegistry } = useStylesContext()\n  const { content: rawContent, contentHash } = toRawCss([styles])\n  let styleData = stylesRegistry.getBaseStyles().get(contentHash)\n  if (styleData == null) {\n    const css = processCss({ content: rawContent })\n    styleData = {\n      css,\n      cssObject: styles,\n      contentHash,\n    }\n    stylesRegistry.setBaseStyles(styleData)\n  }\n  const href = `makeswift-base-styles-${contentHash}`\n  const styleElement = React.createElement(MakeswiftStyle, {\n    key: contentHash,\n    href: href,\n    css: styleData.css,\n    precedence: MakeswiftStylePrecedence.HIGH,\n  })\n  return {\n    styleElement,\n  }\n}\n"],"mappings":"AACA,SAAS,wBAAwB;AACjC,SAAS,YAAY,gBAAgB;AACrC,SAAS,gCAAgC;AACzC,OAAO,WAAW;AAClB,SAAS,sBAAsB;AAExB,SAAS,cAAc,EAAE,OAAO,GAA0B;AAC/D,QAAM,EAAE,eAAe,IAAI,iBAAiB;AAC5C,QAAM,EAAE,SAAS,YAAY,YAAY,IAAI,SAAS,CAAC,MAAM,CAAC;AAC9D,MAAI,YAAY,eAAe,cAAc,EAAE,IAAI,WAAW;AAC9D,MAAI,aAAa,MAAM;AACrB,UAAM,MAAM,WAAW,EAAE,SAAS,WAAW,CAAC;AAC9C,gBAAY;AAAA,MACV;AAAA,MACA,WAAW;AAAA,MACX;AAAA,IACF;AACA,mBAAe,cAAc,SAAS;AAAA,EACxC;AACA,QAAM,OAAO,yBAAyB,WAAW;AACjD,QAAM,eAAe,MAAM,cAAc,gBAAgB;AAAA,IACvD,KAAK;AAAA,IACL;AAAA,IACA,KAAK,UAAU;AAAA,IACf,YAAY,yBAAyB;AAAA,EACvC,CAAC;AACD,SAAO;AAAA,IACL;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-base-styles.ts"],"sourcesContent":["import { type CSSObject } from '@emotion/serialize'\nimport { useStylesContext } from './use-styles-context'\nimport { processCss, toRawCss } from '../serialize-css'\nimport { MakeswiftStylePrecedence } from '../types'\nimport React from 'react'\nimport { MakeswiftStyle } from '../components/makeswift-style'\n\nexport function useBaseStyles({ styles }: { styles: CSSObject }) {\n  const { forceImportant, stylesRegistry } = useStylesContext()\n  const { content: rawContent, contentHash } = toRawCss([styles])\n  let styleData = stylesRegistry.getBaseStyles().get(contentHash)\n  if (styleData == null) {\n    const css = processCss({ content: rawContent, forceImportant })\n    styleData = {\n      css,\n      cssObject: styles,\n      contentHash,\n    }\n    stylesRegistry.setBaseStyles(styleData)\n  }\n  const href = `makeswift-base-styles-${contentHash}`\n  const styleElement = React.createElement(MakeswiftStyle, {\n    key: contentHash,\n    href: href,\n    css: styleData.css,\n    precedence: MakeswiftStylePrecedence.HIGH,\n  })\n  return {\n    styleElement,\n  }\n}\n"],"mappings":"AACA,SAAS,wBAAwB;AACjC,SAAS,YAAY,gBAAgB;AACrC,SAAS,gCAAgC;AACzC,OAAO,WAAW;AAClB,SAAS,sBAAsB;AAExB,SAAS,cAAc,EAAE,OAAO,GAA0B;AAC/D,QAAM,EAAE,gBAAgB,eAAe,IAAI,iBAAiB;AAC5D,QAAM,EAAE,SAAS,YAAY,YAAY,IAAI,SAAS,CAAC,MAAM,CAAC;AAC9D,MAAI,YAAY,eAAe,cAAc,EAAE,IAAI,WAAW;AAC9D,MAAI,aAAa,MAAM;AACrB,UAAM,MAAM,WAAW,EAAE,SAAS,YAAY,eAAe,CAAC;AAC9D,gBAAY;AAAA,MACV;AAAA,MACA,WAAW;AAAA,MACX;AAAA,IACF;AACA,mBAAe,cAAc,SAAS;AAAA,EACxC;AACA,QAAM,OAAO,yBAAyB,WAAW;AACjD,QAAM,eAAe,MAAM,cAAc,gBAAgB;AAAA,IACvD,KAAK;AAAA,IACL;AAAA,IACA,KAAK,UAAU;AAAA,IACf,YAAY,yBAAyB;AAAA,EACvC,CAAC;AACD,SAAO;AAAA,IACL;AAAA,EACF;AACF;","names":[]}