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

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

@@ -4,7 +4,7 @@ import { useStylesContext } from "./use-styles-context";
 import { StylesheetEngine } from "../stylesheet-engine";
 import { useDocumentKey } from "../../hooks/use-document-context";
 function useControlledStyles({ namespace }) {
-  const { classNamePrefix, stylesRegistry } = useStylesContext();
+  const { classNamePrefix, forceImportant, stylesRegistry } = useStylesContext();
   const documentKey = useDocumentKey();
   if (documentKey == null) {
     throw new Error("Root document key not found when attempting to use controlled styles");
@@ -26,10 +26,11 @@ function useControlledStyles({ namespace }) {
         elementKey,
         propPathComponents,
         onDefineStyle,
-        classNamePrefix
+        classNamePrefix,
+        forceImportant
       });
     },
-    [classNamePrefix, stylesRegistry, namespace, documentKey]
+    [classNamePrefix, forceImportant, stylesRegistry, namespace, documentKey]
   );
   const styleElements = React.createElement(ControlledStyles, {
     classNameToStyles: stylesRegistry.getControlledStyles(namespace)

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-controlled-styles.ts"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { ControlledStyles } from '../components/controlled-styles'\nimport { ControlledStyleData, GetStylesheet } from '../types'\nimport { useStylesContext } from './use-styles-context'\nimport { StylesheetEngine } from '../stylesheet-engine'\nimport { useDocumentKey } from '../../hooks/use-document-context'\n\nexport function useControlledStyles({ namespace }: { namespace: string }) {\n  const { classNamePrefix, stylesRegistry } = useStylesContext()\n  const documentKey = useDocumentKey()\n  if (documentKey == null) {\n    throw new Error('Root document key not found when attempting to use controlled styles')\n  }\n\n  const getStylesheet = useCallback<GetStylesheet>(\n    ({ breakpointsData, elementKey, propPathComponents }) => {\n      const onDefineStyle = (definedStyle: ControlledStyleData) => {\n        stylesRegistry.setControlledStyle({\n          namespace,\n          className: definedStyle.className,\n          data: {\n            ...definedStyle,\n          },\n        })\n      }\n      return new StylesheetEngine({\n        breakpointsData,\n        documentKey,\n        elementKey,\n        propPathComponents,\n        onDefineStyle,\n        classNamePrefix,\n      })\n    },\n    [classNamePrefix, stylesRegistry, namespace, documentKey],\n  )\n\n  const styleElements = React.createElement(ControlledStyles, {\n    classNameToStyles: stylesRegistry.getControlledStyles(namespace),\n  })\n\n  return {\n    getStylesheet,\n    styleElements,\n  }\n}\n"],"mappings":"AAAA,OAAO,SAAS,mBAAmB;AACnC,SAAS,wBAAwB;AAEjC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAExB,SAAS,oBAAoB,EAAE,UAAU,GAA0B;AACxE,QAAM,EAAE,iBAAiB,eAAe,IAAI,iBAAiB;AAC7D,QAAM,cAAc,eAAe;AACnC,MAAI,eAAe,MAAM;AACvB,UAAM,IAAI,MAAM,sEAAsE;AAAA,EACxF;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,EAAE,iBAAiB,YAAY,mBAAmB,MAAM;AACvD,YAAM,gBAAgB,CAAC,iBAAsC;AAC3D,uBAAe,mBAAmB;AAAA,UAChC;AAAA,UACA,WAAW,aAAa;AAAA,UACxB,MAAM;AAAA,YACJ,GAAG;AAAA,UACL;AAAA,QACF,CAAC;AAAA,MACH;AACA,aAAO,IAAI,iBAAiB;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,iBAAiB,gBAAgB,WAAW,WAAW;AAAA,EAC1D;AAEA,QAAM,gBAAgB,MAAM,cAAc,kBAAkB;AAAA,IAC1D,mBAAmB,eAAe,oBAAoB,SAAS;AAAA,EACjE,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-controlled-styles.ts"],"sourcesContent":["import React, { useCallback } from 'react'\nimport { ControlledStyles } from '../components/controlled-styles'\nimport { ControlledStyleData, GetStylesheet } from '../types'\nimport { useStylesContext } from './use-styles-context'\nimport { StylesheetEngine } from '../stylesheet-engine'\nimport { useDocumentKey } from '../../hooks/use-document-context'\n\nexport function useControlledStyles({ namespace }: { namespace: string }) {\n  const { classNamePrefix, forceImportant, stylesRegistry } = useStylesContext()\n  const documentKey = useDocumentKey()\n  if (documentKey == null) {\n    throw new Error('Root document key not found when attempting to use controlled styles')\n  }\n\n  const getStylesheet = useCallback<GetStylesheet>(\n    ({ breakpointsData, elementKey, propPathComponents }) => {\n      const onDefineStyle = (definedStyle: ControlledStyleData) => {\n        stylesRegistry.setControlledStyle({\n          namespace,\n          className: definedStyle.className,\n          data: {\n            ...definedStyle,\n          },\n        })\n      }\n      return new StylesheetEngine({\n        breakpointsData,\n        documentKey,\n        elementKey,\n        propPathComponents,\n        onDefineStyle,\n        classNamePrefix,\n        forceImportant,\n      })\n    },\n    [classNamePrefix, forceImportant, stylesRegistry, namespace, documentKey],\n  )\n\n  const styleElements = React.createElement(ControlledStyles, {\n    classNameToStyles: stylesRegistry.getControlledStyles(namespace),\n  })\n\n  return {\n    getStylesheet,\n    styleElements,\n  }\n}\n"],"mappings":"AAAA,OAAO,SAAS,mBAAmB;AACnC,SAAS,wBAAwB;AAEjC,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAExB,SAAS,oBAAoB,EAAE,UAAU,GAA0B;AACxE,QAAM,EAAE,iBAAiB,gBAAgB,eAAe,IAAI,iBAAiB;AAC7E,QAAM,cAAc,eAAe;AACnC,MAAI,eAAe,MAAM;AACvB,UAAM,IAAI,MAAM,sEAAsE;AAAA,EACxF;AAEA,QAAM,gBAAgB;AAAA,IACpB,CAAC,EAAE,iBAAiB,YAAY,mBAAmB,MAAM;AACvD,YAAM,gBAAgB,CAAC,iBAAsC;AAC3D,uBAAe,mBAAmB;AAAA,UAChC;AAAA,UACA,WAAW,aAAa;AAAA,UACxB,MAAM;AAAA,YACJ,GAAG;AAAA,UACL;AAAA,QACF,CAAC;AAAA,MACH;AACA,aAAO,IAAI,iBAAiB;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,iBAAiB,gBAAgB,gBAAgB,WAAW,WAAW;AAAA,EAC1E;AAEA,QAAM,gBAAgB,MAAM,cAAc,kBAAkB;AAAA,IAC1D,mBAAmB,eAAe,oBAAoB,SAAS;AAAA,EACjE,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

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

@@ -4,26 +4,23 @@ import { MakeswiftStylePrecedence } from "../types";
 import { MakeswiftStyle } from "../components/makeswift-style";
 import React from "react";
 function useCssReset({ styles }) {
-  const { enableCssReset, stylesRegistry } = useStylesContext();
+  const { enableCssReset, forceImportant, stylesRegistry } = useStylesContext();
   if (!enableCssReset)
     return { styleElement: null };
   const { content: rawContent, contentHash } = toRawCss(styles);
   let styleData = stylesRegistry.getCssResets().get(contentHash);
   if (styleData == null) {
-    const css2 = processCss({ content: rawContent });
     styleData = {
-      css: css2,
+      css: processCss({ content: rawContent, forceImportant }),
       cssObjects: styles,
       contentHash
     };
     stylesRegistry.setCssReset(styleData);
   }
-  const css = processCss({ content: rawContent });
-  const href = `makeswift-css-reset-${contentHash}`;
   const styleElement = React.createElement(MakeswiftStyle, {
     key: contentHash,
-    href,
-    css,
+    href: `makeswift-css-reset-${contentHash}`,
+    css: styleData.css,
     precedence: MakeswiftStylePrecedence.RESET
   });
   return {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-css-reset.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 { MakeswiftStyle } from '../components/makeswift-style'\nimport React from 'react'\n\nexport function useCssReset({ styles }: { styles: Array<CSSObject> }) {\n  const { enableCssReset, stylesRegistry } = useStylesContext()\n  if (!enableCssReset) return { styleElement: null }\n  const { content: rawContent, contentHash } = toRawCss(styles)\n  let styleData = stylesRegistry.getCssResets().get(contentHash)\n  if (styleData == null) {\n    const css = processCss({ content: rawContent })\n    styleData = {\n      css,\n      cssObjects: styles,\n      contentHash,\n    }\n    stylesRegistry.setCssReset(styleData)\n  }\n  const css = processCss({ content: rawContent })\n  const href = `makeswift-css-reset-${contentHash}`\n\n  const styleElement = React.createElement(MakeswiftStyle, {\n    key: contentHash,\n    href: href,\n    css,\n    precedence: MakeswiftStylePrecedence.RESET,\n  })\n  return {\n    styleElement,\n  }\n}\n"],"mappings":"AACA,SAAS,wBAAwB;AACjC,SAAS,YAAY,gBAAgB;AACrC,SAAS,gCAAgC;AACzC,SAAS,sBAAsB;AAC/B,OAAO,WAAW;AAEX,SAAS,YAAY,EAAE,OAAO,GAAiC;AACpE,QAAM,EAAE,gBAAgB,eAAe,IAAI,iBAAiB;AAC5D,MAAI,CAAC;AAAgB,WAAO,EAAE,cAAc,KAAK;AACjD,QAAM,EAAE,SAAS,YAAY,YAAY,IAAI,SAAS,MAAM;AAC5D,MAAI,YAAY,eAAe,aAAa,EAAE,IAAI,WAAW;AAC7D,MAAI,aAAa,MAAM;AACrB,UAAMA,OAAM,WAAW,EAAE,SAAS,WAAW,CAAC;AAC9C,gBAAY;AAAA,MACV,KAAAA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,IACF;AACA,mBAAe,YAAY,SAAS;AAAA,EACtC;AACA,QAAM,MAAM,WAAW,EAAE,SAAS,WAAW,CAAC;AAC9C,QAAM,OAAO,uBAAuB,WAAW;AAE/C,QAAM,eAAe,MAAM,cAAc,gBAAgB;AAAA,IACvD,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,YAAY,yBAAyB;AAAA,EACvC,CAAC;AACD,SAAO;AAAA,IACL;AAAA,EACF;AACF;","names":["css"]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-css-reset.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 { MakeswiftStyle } from '../components/makeswift-style'\nimport React from 'react'\n\nexport function useCssReset({ styles }: { styles: Array<CSSObject> }) {\n  const { enableCssReset, forceImportant, stylesRegistry } = useStylesContext()\n  if (!enableCssReset) return { styleElement: null }\n\n  const { content: rawContent, contentHash } = toRawCss(styles)\n  let styleData = stylesRegistry.getCssResets().get(contentHash)\n  if (styleData == null) {\n    styleData = {\n      css: processCss({ content: rawContent, forceImportant }),\n      cssObjects: styles,\n      contentHash,\n    }\n\n    stylesRegistry.setCssReset(styleData)\n  }\n\n  const styleElement = React.createElement(MakeswiftStyle, {\n    key: contentHash,\n    href: `makeswift-css-reset-${contentHash}`,\n    css: styleData.css,\n    precedence: MakeswiftStylePrecedence.RESET,\n  })\n\n  return {\n    styleElement,\n  }\n}\n"],"mappings":"AACA,SAAS,wBAAwB;AACjC,SAAS,YAAY,gBAAgB;AACrC,SAAS,gCAAgC;AACzC,SAAS,sBAAsB;AAC/B,OAAO,WAAW;AAEX,SAAS,YAAY,EAAE,OAAO,GAAiC;AACpE,QAAM,EAAE,gBAAgB,gBAAgB,eAAe,IAAI,iBAAiB;AAC5E,MAAI,CAAC;AAAgB,WAAO,EAAE,cAAc,KAAK;AAEjD,QAAM,EAAE,SAAS,YAAY,YAAY,IAAI,SAAS,MAAM;AAC5D,MAAI,YAAY,eAAe,aAAa,EAAE,IAAI,WAAW;AAC7D,MAAI,aAAa,MAAM;AACrB,gBAAY;AAAA,MACV,KAAK,WAAW,EAAE,SAAS,YAAY,eAAe,CAAC;AAAA,MACvD,YAAY;AAAA,MACZ;AAAA,IACF;AAEA,mBAAe,YAAY,SAAS;AAAA,EACtC;AAEA,QAAM,eAAe,MAAM,cAAc,gBAAgB;AAAA,IACvD,KAAK;AAAA,IACL,MAAM,uBAAuB,WAAW;AAAA,IACxC,KAAK,UAAU;AAAA,IACf,YAAY,yBAAyB;AAAA,EACvC,CAAC;AAED,SAAO;AAAA,IACL;AAAA,EACF;AACF;","names":[]}

package/dist/esm/runtimes/react/css-runtime/hooks/use-legacy-controlled-style.js

@@ -5,7 +5,7 @@ import { ControlledStyles } from "../components/controlled-styles";
 import { toCssStatements } from "../serialize-css";
 import { useDocumentKey } from "../../hooks/use-document-context";
 function useLegacyControlledStyle(style, elementKey, propName) {
-  const { classNamePrefix, stylesRegistry } = useStylesContext();
+  const { classNamePrefix, forceImportant, stylesRegistry } = useStylesContext();
   const documentKey = useDocumentKey();
   if (documentKey == null) {
     throw new Error("Root document key not found when attempting to use legacy controlled styles");
@@ -15,7 +15,7 @@ function useLegacyControlledStyle(style, elementKey, propName) {
     data: `${documentKey}-${elementKey}-${propName}`,
     classNamePrefix
   });
-  const { css, contentHash } = toCssStatements(style, className);
+  const { css, contentHash } = toCssStatements(style, className, { forceImportant });
   const data = {
     className,
     css,

package/dist/esm/runtimes/react/css-runtime/hooks/use-legacy-controlled-style.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-legacy-controlled-style.ts"],"sourcesContent":["import { CSSObject } from '@emotion/serialize'\nimport { generateClassName } from '../utils'\nimport React from 'react'\nimport { useStylesContext } from './use-styles-context'\nimport { ControlledStyles } from '../components/controlled-styles'\nimport { toCssStatements } from '../serialize-css'\nimport { ControlledStyleData } from '../types'\nimport { useDocumentKey } from '../../hooks/use-document-context'\n\nexport function useLegacyControlledStyle(style: CSSObject, elementKey: string, propName: string) {\n  const { classNamePrefix, stylesRegistry } = useStylesContext()\n  const documentKey = useDocumentKey()\n  if (documentKey == null) {\n    throw new Error('Root document key not found when attempting to use legacy controlled styles')\n  }\n\n  /*\n    Namespaced separately from styles for modern control instances in order to avoid\n    unintentionally attempting to render the corresponding style elements twice.\n  */\n  const namespace = `${elementKey}-legacy-${propName}`\n  const className = generateClassName({\n    data: `${documentKey}-${elementKey}-${propName}`,\n    classNamePrefix,\n  })\n\n  const { css, contentHash } = toCssStatements(style, className)\n\n  const data: ControlledStyleData = {\n    className,\n    css,\n    cssObject: style,\n    contentHash,\n    elementKey,\n    joinedPropPath: propName,\n    onBoxModelChange: undefined,\n  }\n\n  stylesRegistry.setControlledStyle({\n    namespace,\n    className,\n    data,\n  })\n\n  const styleElement = React.createElement(ControlledStyles, {\n    classNameToStyles: new Map([[className, data]]),\n  })\n\n  return {\n    className,\n    styleElement,\n  }\n}\n"],"mappings":"AACA,SAAS,yBAAyB;AAClC,OAAO,WAAW;AAClB,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAEhC,SAAS,sBAAsB;AAExB,SAAS,yBAAyB,OAAkB,YAAoB,UAAkB;AAC/F,QAAM,EAAE,iBAAiB,eAAe,IAAI,iBAAiB;AAC7D,QAAM,cAAc,eAAe;AACnC,MAAI,eAAe,MAAM;AACvB,UAAM,IAAI,MAAM,6EAA6E;AAAA,EAC/F;AAMA,QAAM,YAAY,GAAG,UAAU,WAAW,QAAQ;AAClD,QAAM,YAAY,kBAAkB;AAAA,IAClC,MAAM,GAAG,WAAW,IAAI,UAAU,IAAI,QAAQ;AAAA,IAC9C;AAAA,EACF,CAAC;AAED,QAAM,EAAE,KAAK,YAAY,IAAI,gBAAgB,OAAO,SAAS;AAE7D,QAAM,OAA4B;AAAA,IAChC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,EACpB;AAEA,iBAAe,mBAAmB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,MAAM,cAAc,kBAAkB;AAAA,IACzD,mBAAmB,oBAAI,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;AAAA,EAChD,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-legacy-controlled-style.ts"],"sourcesContent":["import { CSSObject } from '@emotion/serialize'\nimport { generateClassName } from '../utils'\nimport React from 'react'\nimport { useStylesContext } from './use-styles-context'\nimport { ControlledStyles } from '../components/controlled-styles'\nimport { toCssStatements } from '../serialize-css'\nimport { ControlledStyleData } from '../types'\nimport { useDocumentKey } from '../../hooks/use-document-context'\n\nexport function useLegacyControlledStyle(style: CSSObject, elementKey: string, propName: string) {\n  const { classNamePrefix, forceImportant, stylesRegistry } = useStylesContext()\n  const documentKey = useDocumentKey()\n  if (documentKey == null) {\n    throw new Error('Root document key not found when attempting to use legacy controlled styles')\n  }\n\n  /*\n    Namespaced separately from styles for modern control instances in order to avoid\n    unintentionally attempting to render the corresponding style elements twice.\n  */\n  const namespace = `${elementKey}-legacy-${propName}`\n  const className = generateClassName({\n    data: `${documentKey}-${elementKey}-${propName}`,\n    classNamePrefix,\n  })\n\n  const { css, contentHash } = toCssStatements(style, className, { forceImportant })\n\n  const data: ControlledStyleData = {\n    className,\n    css,\n    cssObject: style,\n    contentHash,\n    elementKey,\n    joinedPropPath: propName,\n    onBoxModelChange: undefined,\n  }\n\n  stylesRegistry.setControlledStyle({\n    namespace,\n    className,\n    data,\n  })\n\n  const styleElement = React.createElement(ControlledStyles, {\n    classNameToStyles: new Map([[className, data]]),\n  })\n\n  return {\n    className,\n    styleElement,\n  }\n}\n"],"mappings":"AACA,SAAS,yBAAyB;AAClC,OAAO,WAAW;AAClB,SAAS,wBAAwB;AACjC,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAEhC,SAAS,sBAAsB;AAExB,SAAS,yBAAyB,OAAkB,YAAoB,UAAkB;AAC/F,QAAM,EAAE,iBAAiB,gBAAgB,eAAe,IAAI,iBAAiB;AAC7E,QAAM,cAAc,eAAe;AACnC,MAAI,eAAe,MAAM;AACvB,UAAM,IAAI,MAAM,6EAA6E;AAAA,EAC/F;AAMA,QAAM,YAAY,GAAG,UAAU,WAAW,QAAQ;AAClD,QAAM,YAAY,kBAAkB;AAAA,IAClC,MAAM,GAAG,WAAW,IAAI,UAAU,IAAI,QAAQ;AAAA,IAC9C;AAAA,EACF,CAAC;AAED,QAAM,EAAE,KAAK,YAAY,IAAI,gBAAgB,OAAO,WAAW,EAAE,eAAe,CAAC;AAEjF,QAAM,OAA4B;AAAA,IAChC;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,kBAAkB;AAAA,EACpB;AAEA,iBAAe,mBAAmB;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,MAAM,cAAc,kBAAkB;AAAA,IACzD,mBAAmB,oBAAI,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;AAAA,EAChD,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":[]}

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

@@ -5,14 +5,15 @@ import { useStylesContext } from "./use-styles-context";
 import { toCssStatements } from "../serialize-css";
 import { MakeswiftStyle } from "../components/makeswift-style";
 function useStyle(style) {
-  const { classNamePrefix, stylesRegistry } = useStylesContext();
+  const { classNamePrefix, forceImportant, stylesRegistry } = useStylesContext();
+  const serializedStyle = JSON.stringify(style);
   const className = generateClassName({
-    data: JSON.stringify(style),
+    data: forceImportant ? `${serializedStyle}-important` : serializedStyle,
     classNamePrefix
   });
   let styleData = stylesRegistry.getUncontrolledClassStyles().get(className);
   if (styleData == null) {
-    const { css } = toCssStatements(style, className);
+    const { css } = toCssStatements(style, className, { forceImportant });
     styleData = {
       className,
       css,

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

@@ -1 +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,SAAS,yBAAyB;AAElC,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AASxB,SAAS,SAAS,OAAkB;AACzC,QAAM,EAAE,iBAAiB,eAAe,IAAI,iBAAiB;AAC7D,QAAM,YAAY,kBAAkB;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,IAAI,gBAAgB,OAAO,SAAS;AAChD,gBAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IACb;AACA,mBAAe,0BAA0B,SAAS;AAAA,EACpD;AACA,QAAM,eAAe,MAAM,cAAc,gBAAgB;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,oBAAoB,KAAK,UAAU;AACzC,SAAO;AAAA,IACL,WAAW;AAAA,IACX;AAAA,EACF;AACF;","names":[]}
+{"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, forceImportant, stylesRegistry } = useStylesContext()\n  const serializedStyle = JSON.stringify(style)\n  const className = generateClassName({\n    data: forceImportant ? `${serializedStyle}-important` : serializedStyle,\n    classNamePrefix,\n  })\n\n  let styleData = stylesRegistry.getUncontrolledClassStyles().get(className)\n  if (styleData == null) {\n    const { css } = toCssStatements(style, className, { forceImportant })\n    styleData = {\n      className,\n      css,\n      cssObject: style,\n    }\n    stylesRegistry.setUncontrolledClassStyle(styleData)\n  }\n\n  const styleElement = React.createElement(MakeswiftStyle, {\n    key: className,\n    href: className,\n    css: styleData.css,\n  })\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,SAAS,yBAAyB;AAElC,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,sBAAsB;AASxB,SAAS,SAAS,OAAkB;AACzC,QAAM,EAAE,iBAAiB,gBAAgB,eAAe,IAAI,iBAAiB;AAC7E,QAAM,kBAAkB,KAAK,UAAU,KAAK;AAC5C,QAAM,YAAY,kBAAkB;AAAA,IAClC,MAAM,iBAAiB,GAAG,eAAe,eAAe;AAAA,IACxD;AAAA,EACF,CAAC;AAED,MAAI,YAAY,eAAe,2BAA2B,EAAE,IAAI,SAAS;AACzE,MAAI,aAAa,MAAM;AACrB,UAAM,EAAE,IAAI,IAAI,gBAAgB,OAAO,WAAW,EAAE,eAAe,CAAC;AACpE,gBAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IACb;AACA,mBAAe,0BAA0B,SAAS;AAAA,EACpD;AAEA,QAAM,eAAe,MAAM,cAAc,gBAAgB;AAAA,IACvD,KAAK;AAAA,IACL,MAAM;AAAA,IACN,KAAK,UAAU;AAAA,EACjB,CAAC;AAED,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,oBAAoB,KAAK,UAAU;AACzC,SAAO;AAAA,IACL,WAAW;AAAA,IACX;AAAA,EACF;AACF;","names":[]}

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

@@ -1,20 +1,46 @@
 import { serializeStyles as emotionSerializeStyles } from "@emotion/serialize";
-import { serialize, compile, stringify, prefixer, middleware } from "stylis";
-function toCssStatements(stylesObject, className) {
+import {
+  DECLARATION,
+  KEYFRAMES,
+  RULESET,
+  serialize,
+  compile,
+  stringify,
+  prefixer,
+  middleware
+} from "stylis";
+function toCssStatements(stylesObject, className, { forceImportant = false } = {}) {
   const { content: rawCssContent, contentHash } = toRawCss([stylesObject]);
   const classNameRawCss = `.${className} {${rawCssContent}}`;
-  const css = processCss({ content: classNameRawCss });
+  const css = processCss({ content: classNameRawCss, forceImportant });
   return { css, contentHash };
 }
-function processCss({ content }) {
+function processCss({
+  content,
+  forceImportant = false
+}) {
   const cssElementTree = compile(content);
-  return serialize(cssElementTree, middleware([prefixer, stringify]));
+  return serialize(
+    cssElementTree,
+    middleware([...forceImportant ? [appendImportant] : [], prefixer, stringify])
+  );
 }
+const appendImportant = (element) => {
+  if (element.type !== DECLARATION || element.root?.type !== RULESET)
+    return;
+  for (let ancestor = element.parent; ancestor != null; ancestor = ancestor.parent) {
+    if (ancestor.type === KEYFRAMES)
+      return;
+  }
+  if (/!important\s*;$/i.test(element.value))
+    return;
+  element.value = element.value.replace(/;$/, "!important;");
+};
 function toRawCss(styles) {
-  const emotionSerializationResult = emotionSerializeStyles(styles);
+  const { styles: serializedStyles, name } = emotionSerializeStyles(styles);
   return {
-    content: emotionSerializationResult.styles,
-    contentHash: emotionSerializationResult.name
+    content: serializedStyles,
+    contentHash: name
   };
 }
 export {

package/dist/esm/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,SAAoB,mBAAmB,8BAA8B;AACrE,SAAS,WAAW,SAAS,WAAW,UAAU,kBAAkB;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,iBAAiB,QAAQ,OAAO;AACtC,SAAO,UAAU,gBAAgB,WAAW,CAAC,UAAU,SAAS,CAAC,CAAC;AACpE;AASO,SAAS,SAAS,QAAoE;AAC3F,QAAM,6BAA6B,uBAAuB,MAAM;AAChE,SAAO;AAAA,IACL,SAAS,2BAA2B;AAAA,IACpC,aAAa,2BAA2B;AAAA,EAC1C;AACF;","names":[]}
+{"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,SAAoB,mBAAmB,8BAA8B;AACrE;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;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,iBAAiB,QAAQ,OAAO;AACtC,SAAO;AAAA,IACL;AAAA,IACA,WAAW,CAAC,GAAI,iBAAiB,CAAC,eAAe,IAAI,CAAC,GAAI,UAAU,SAAS,CAAC;AAAA,EAChF;AACF;AAEA,MAAM,kBAA8B,aAAW;AAE7C,MAAI,QAAQ,SAAS,eAAe,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,IAAI,uBAAuB,MAAM;AACxE,SAAO;AAAA,IACL,SAAS;AAAA,IACT,aAAa;AAAA,EACf;AACF;","names":[]}

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

@@ -8,13 +8,15 @@ class StylesheetEngine {
   propPathComponents;
   onDefineStyle;
   classNamePrefix;
+  forceImportant;
   constructor({
     breakpointsData,
     documentKey,
     elementKey,
     propPathComponents,
     onDefineStyle,
-    classNamePrefix
+    classNamePrefix,
+    forceImportant = false
   }) {
     this.breakpointsData = breakpointsData;
     this.documentKey = documentKey;
@@ -22,6 +24,7 @@ class StylesheetEngine {
     this.propPathComponents = propPathComponents;
     this.onDefineStyle = onDefineStyle;
     this.classNamePrefix = classNamePrefix;
+    this.forceImportant = forceImportant;
   }
   breakpoints() {
     return this.breakpointsData;
@@ -33,7 +36,9 @@ class StylesheetEngine {
       classNamePrefix: this.classNamePrefix
     });
     const cssObject = resolvedStyleToCss(this.breakpointsData, resolvedStyle);
-    const { css, contentHash } = toCssStatements(cssObject, className);
+    const { css, contentHash } = toCssStatements(cssObject, className, {
+      forceImportant: this.forceImportant
+    });
     this.onDefineStyle?.({
       className,
       css,
@@ -52,7 +57,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/esm/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":"AACA,SAAS,yBAAyB;AAElC,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;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,YAAY,kBAAkB;AAAA,MAClC,MAAM,KAAK,IAAI;AAAA,MACf,iBAAiB,KAAK;AAAA,IACxB,CAAC;AACD,UAAM,YAAY,mBAAmB,KAAK,iBAAiB,aAAa;AACxE,UAAM,EAAE,KAAK,YAAY,IAAI,gBAAgB,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":"AACA,SAAS,yBAAyB;AAElC,SAAS,0BAA0B;AACnC,SAAS,uBAAuB;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,YAAY,kBAAkB;AAAA,MAClC,MAAM,KAAK,IAAI;AAAA,MACf,iBAAiB,KAAK;AAAA,IACxB,CAAC;AAED,UAAM,YAAY,mBAAmB,KAAK,iBAAiB,aAAa;AACxE,UAAM,EAAE,KAAK,YAAY,IAAI,gBAAgB,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/esm/runtimes/react/root-style-registry.js

@@ -6,7 +6,8 @@ import { useDynamicBrowserStyleUpdates } from "./css-runtime/hooks/use-dynamic-b
 import {
   DEFAULT_CSS_CLASS_NAME_PREFIX,
   DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,
-  DEFAULT_CSS_RESET_ENABLED
+  DEFAULT_CSS_RESET_ENABLED,
+  DEFAULT_CSS_FORCE_IMPORTANT
 } from "./css-runtime/constants";
 import { createMakeswiftStylesRegistry } from "./css-runtime/utils";
 function RootStyleRegistry({
@@ -14,6 +15,7 @@ function RootStyleRegistry({
   stylesRegistry,
   classNamePrefix = DEFAULT_CSS_CLASS_NAME_PREFIX,
   enableCssReset = DEFAULT_CSS_RESET_ENABLED,
+  forceImportant = DEFAULT_CSS_FORCE_IMPORTANT,
   shouldRenderStyleElements = DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS
 }) {
   useDynamicBrowserStyleUpdates(stylesRegistry);
@@ -22,6 +24,7 @@ function RootStyleRegistry({
     {
       classNamePrefix,
       enableCssReset,
+      forceImportant,
       stylesRegistry,
       shouldRenderStyleElements,
       children
@@ -31,7 +34,8 @@ function RootStyleRegistry({
 function DefaultRootStyleRegistry({
   children,
   classNamePrefix,
-  enableCssReset
+  enableCssReset,
+  forceImportant
 }) {
   const [stylesRegistry] = useState(createMakeswiftStylesRegistry);
   return /* @__PURE__ */ jsx(
@@ -40,6 +44,7 @@ function DefaultRootStyleRegistry({
       stylesRegistry,
       classNamePrefix,
       enableCssReset,
+      forceImportant,
       children
     }
   );

package/dist/esm/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":";AAyCI;AAvCJ,SAAS,gBAAwC;AACjD,SAAS,6BAA6B;AAEtC,SAAS,qCAAqC;AAC9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qCAAqC;AAevC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B,GAKI;AACF,gCAA8B,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,IAAI,SAAS,6BAA6B;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":";AAqDI;AAnDJ,SAAS,gBAAwC;AACjD,SAAS,6BAA6B;AAEtC,SAAS,qCAAqC;AAC9C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,qCAAqC;AAwBvC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B,GAMI;AACF,gCAA8B,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,IAAI,SAAS,6BAA6B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

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

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

package/dist/esm/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":"AAqCM,SAuCF,UAvCE,KAuCF,YAvCE;AAnCN,SAAS,uBAAuB;AAEhC;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAEnC,SAAmC,gBAAgB;AACnD,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAEjC,SAAS,uBAAuB;AAEhC,eAAsB,kBAAkB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,QAAM,QAAQ,SAAS,OAAO,EAAE,SAAS;AAEzC,QAAM,YAAY,kBAAkB,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,iBAAiB;AAAA,IACtC,iBAAiB,eAAe,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,MAAM,aAAa,SAAS,aAAa,aAAa,aAAa,UAAU;AAAA,IACjF,GAAG;AAAA,EACL;AAEA,QAAM,gBAAgB,MAAM,KAAK,gBAAgB,CAAC,CAAC,WAAW,SAAS,MACrE,oBAAC,mBAAgC,WAAW,YAAY,KAAK,kBAAkB,aAAzD,SAAoE,CAC3F;AAED,SACE,iCAGE;AAAA,wBAAC,aAAiC,GAAG,SAArB,YAAY,GAAgB;AAAA,IAC3C;AAAA,KACH;AAEJ;AAEA,MAAM,iBAAiB,CAAC,OAAc,gBAA6B;AACjE,QAAM,cAAc,sCAAsC,OAAO,YAAY,IAAI,KAAK,CAAC;AACvF,SAAO,gBAAgB,aAAa,kBAAkB;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":"AAqCM,SAwCF,UAxCE,KAwCF,YAxCE;AAnCN,SAAS,uBAAuB;AAEhC;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AAEnC,SAAmC,gBAAgB;AACnD,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAEjC,SAAS,uBAAuB;AAEhC,eAAsB,kBAAkB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,QAAM,QAAQ,SAAS,OAAO,EAAE,SAAS;AAEzC,QAAM,YAAY,kBAAkB,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,iBAAiB;AAAA,IACtC,iBAAiB,eAAe,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,MAAM,aAAa,SAAS,aAAa,aAAa,aAAa,UAAU;AAAA,IACjF,GAAG;AAAA,EACL;AAEA,QAAM,gBAAgB,MAAM,KAAK,gBAAgB,CAAC,CAAC,WAAW,SAAS,MACrE,oBAAC,mBAAgC,WAAW,YAAY,KAAK,kBAAkB,aAAzD,SAAoE,CAC3F;AAED,SACE,iCAGE;AAAA,wBAAC,aAAiC,GAAG,SAArB,YAAY,GAAgB;AAAA,IAC3C;AAAA,KACH;AAEJ;AAEA,MAAM,iBAAiB,CAAC,OAAc,gBAA6B;AACjE,QAAM,cAAc,sCAAsC,OAAO,YAAY,IAAI,KAAK,CAAC;AACvF,SAAO,gBAAgB,aAAa,kBAAkB;AACxD;","names":[]}

package/dist/esm/testing/window.js

@@ -0,0 +1,26 @@
+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
+};
+export {
+  windowMocks
+};
+//# sourceMappingURL=window.js.map

package/dist/esm/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":"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/types/components/shared/FallbackComponent/FallbackComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FallbackComponent.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/FallbackComponent/FallbackComponent.tsx"],"names":[],"mappings":"AAIA,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,iBAAiB,kGAgC5B,CAAA"}
+{"version":3,"file":"FallbackComponent.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/FallbackComponent/FallbackComponent.tsx"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,iBAAiB,kGA4C5B,CAAA"}

package/dist/types/next/components/tests/controls/page-control-prop-rendering.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-control-prop-rendering.d.ts","sourceRoot":"","sources":["../../../../../../src/next/components/tests/controls/page-control-prop-rendering.tsx"],"names":[],"mappings":"AAGA,OAAO,2BAA2B,CAAA;AAGlC,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEjG,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sCAAsC,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE/D,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAA;AAqEvE,wBAAsB,4BAA4B,CAAC,CAAC,SAAS,iBAAiB,EAC5E,iBAAiB,EAAE,CAAC,EACpB,EACE,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,YAAiB,EACjB,WAAmB,EACnB,UAAiB,GAClB,EAAE;IACD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC7C,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAA;IACpD,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAChD,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,iBAyGF"}
+{"version":3,"file":"page-control-prop-rendering.d.ts","sourceRoot":"","sources":["../../../../../../src/next/components/tests/controls/page-control-prop-rendering.tsx"],"names":[],"mappings":"AAGA,OAAO,2BAA2B,CAAA;AAGlC,OAAO,EAAa,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEjG,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sCAAsC,CAAA;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,mCAAmC,CAAA;AAE/D,OAAO,EAAE,YAAY,EAAE,MAAM,0CAA0C,CAAA;AAiDvE,wBAAsB,4BAA4B,CAAC,CAAC,SAAS,iBAAiB,EAC5E,iBAAiB,EAAE,CAAC,EACpB,EACE,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,EACT,eAAe,EACf,kBAAkB,EAClB,MAAM,EACN,YAAiB,EACjB,WAAmB,EACnB,UAAiB,GAClB,EAAE;IACD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAA;IAC7C,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA;IAC/B,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAA;IACpD,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAChD,YAAY,CAAC,EAAE,WAAW,EAAE,CAAA;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,iBAyGF"}

package/dist/types/next/root-style-registry.d.ts

@@ -1,4 +1,4 @@
 import { type PropsWithChildren } from 'react';
 import { type RootStyleProps } from '../runtimes/react/root-style-registry';
-export declare function NextRootStyleRegistry({ children, classNamePrefix, enableCssReset, }: PropsWithChildren<RootStyleProps>): import("react/jsx-runtime").JSX.Element;
+export declare function NextRootStyleRegistry({ children, classNamePrefix, enableCssReset, forceImportant, }: PropsWithChildren<RootStyleProps>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=root-style-registry.d.ts.map

package/dist/types/next/root-style-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"root-style-registry.d.ts","sourceRoot":"","sources":["../../../src/next/root-style-registry.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE9C,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,uCAAuC,CAAA;AAE9C,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,eAAe,EACf,cAAc,GACf,EAAE,iBAAiB,CAAC,cAAc,CAAC,2CAMnC"}
+{"version":3,"file":"root-style-registry.d.ts","sourceRoot":"","sources":["../../../src/next/root-style-registry.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAE9C,OAAO,EAEL,KAAK,cAAc,EACpB,MAAM,uCAAuC,CAAA;AAE9C,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,eAAe,EACf,cAAc,EACd,cAAc,GACf,EAAE,iBAAiB,CAAC,cAAc,CAAC,2CAUnC"}

package/dist/types/runtimes/react/css-runtime/__tests__/runtime-integration/utils.d.ts

@@ -13,10 +13,11 @@ export type RuntimeIntegrationTestFixture = {
     stylesRegistry: StylesRegistry;
     namespace: string;
 };
-export declare function createControlledStylesTestFixtures({ siteVersion, controlDefinition, sampleData, }: {
+export declare function createControlledStylesTestFixtures({ siteVersion, controlDefinition, sampleData, forceImportant, }: {
     siteVersion: SiteVersion;
     controlDefinition: StyleV1Definition | StyleV2Definition<ControlDefinition, CSSObject>;
     sampleData: DataType<StyleV1Definition> | DataType<StyleV2Definition<ControlDefinition, CSSObject>>;
+    forceImportant?: boolean;
 }): RuntimeIntegrationTestFixture;
 export declare function mockApiResourceRequests({ resources }: {
     resources: APIResource[];

package/dist/types/runtimes/react/css-runtime/__tests__/runtime-integration/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../../src/runtimes/react/css-runtime/__tests__/runtime-integration/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAGtD,OAAO,EACL,iBAAiB,EACjB,QAAQ,EAER,eAAe,IAAI,iBAAiB,EACpC,iBAAiB,EAClB,MAAM,qBAAqB,CAAA;AAO5B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAEnD,OAAO,EAAE,WAAW,EAAmB,MAAM,0BAA0B,CAAA;AAIvE,MAAM,MAAM,6BAA6B,GAAG;IAC1C,OAAO,EAAE,YAAY,CAAA;IACrB,WAAW,EAAE,WAAW,CAAA;IACxB,MAAM,EAAE,MAAM,SAAS,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,cAAc,CAAA;IAC9B,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,kCAAkC,CAAC,EACjD,WAAW,EACX,iBAAiB,EACjB,UAAU,GACX,EAAE;IACD,WAAW,EAAE,WAAW,CAAA;IACxB,iBAAiB,EAAE,iBAAiB,GAAG,iBAAiB,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAA;IACtF,UAAU,EACN,QAAQ,CAAC,iBAAiB,CAAC,GAC3B,QAAQ,CAAC,iBAAiB,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAA;CAC9D,GAAG,6BAA6B,CAgDhC;AAqDD,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,WAAW,EAAE,CAAA;CAAE,QAiBlF"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../../../src/runtimes/react/css-runtime/__tests__/runtime-integration/utils.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAGtD,OAAO,EACL,iBAAiB,EACjB,QAAQ,EAER,eAAe,IAAI,iBAAiB,EACpC,iBAAiB,EAClB,MAAM,qBAAqB,CAAA;AAO5B,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAEnD,OAAO,EAAE,WAAW,EAAmB,MAAM,0BAA0B,CAAA;AAIvE,MAAM,MAAM,6BAA6B,GAAG;IAC1C,OAAO,EAAE,YAAY,CAAA;IACrB,WAAW,EAAE,WAAW,CAAA;IACxB,MAAM,EAAE,MAAM,SAAS,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,cAAc,CAAA;IAC9B,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,wBAAgB,kCAAkC,CAAC,EACjD,WAAW,EACX,iBAAiB,EACjB,UAAU,EACV,cAAc,GACf,EAAE;IACD,WAAW,EAAE,WAAW,CAAA;IACxB,iBAAiB,EAAE,iBAAiB,GAAG,iBAAiB,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAA;IACtF,UAAU,EACN,QAAQ,CAAC,iBAAiB,CAAC,GAC3B,QAAQ,CAAC,iBAAiB,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC,CAAA;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,6BAA6B,CAiDhC;AAwDD,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,WAAW,EAAE,CAAA;CAAE,QAiBlF"}

package/dist/types/runtimes/react/css-runtime/components/styles-context-provider.d.ts

@@ -3,6 +3,7 @@ import { StylesRegistry } from '../styles-registry';
 export type StylesContextValue = {
     classNamePrefix: string;
     enableCssReset: boolean;
+    forceImportant: boolean;
     stylesRegistry: StylesRegistry;
     /**
      * By default, Makeswift-generated `<style>` elements are placed in JSX alongside the components that use them
@@ -16,5 +17,5 @@ export type StylesContextValue = {
     shouldRenderStyleElements: boolean;
 };
 export declare const StylesContext: import("react").Context<StylesContextValue | undefined>;
-export declare function StylesContextProvider({ children, classNamePrefix, enableCssReset, stylesRegistry, shouldRenderStyleElements, }: PropsWithChildren<StylesContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function StylesContextProvider({ children, classNamePrefix, enableCssReset, forceImportant, stylesRegistry, shouldRenderStyleElements, }: PropsWithChildren<StylesContextValue>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=styles-context-provider.d.ts.map

package/dist/types/runtimes/react/css-runtime/components/styles-context-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles-context-provider.d.ts","sourceRoot":"","sources":["../../../../../../src/runtimes/react/css-runtime/components/styles-context-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,cAAc,EAAE,OAAO,CAAA;IACvB,cAAc,EAAE,cAAc,CAAA;IAE9B;;;;;;;;OAQG;IACH,yBAAyB,EAAE,OAAO,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,aAAa,yDAA2D,CAAA;AAErF,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,eAAe,EACf,cAAc,EACd,cAAc,EACd,yBAAyB,GAC1B,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,2CAavC"}
+{"version":3,"file":"styles-context-provider.d.ts","sourceRoot":"","sources":["../../../../../../src/runtimes/react/css-runtime/components/styles-context-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,iBAAiB,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,eAAe,EAAE,MAAM,CAAA;IACvB,cAAc,EAAE,OAAO,CAAA;IACvB,cAAc,EAAE,OAAO,CAAA;IACvB,cAAc,EAAE,cAAc,CAAA;IAE9B;;;;;;;;OAQG;IACH,yBAAyB,EAAE,OAAO,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,aAAa,yDAA2D,CAAA;AAErF,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,eAAe,EACf,cAAc,EACd,cAAc,EACd,cAAc,EACd,yBAAyB,GAC1B,EAAE,iBAAiB,CAAC,kBAAkB,CAAC,2CAcvC"}

package/dist/types/runtimes/react/css-runtime/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const DEFAULT_CSS_CLASS_NAME_PREFIX = "ms";
 export declare const DEFAULT_CSS_RESET_ENABLED = true;
+export declare const DEFAULT_CSS_FORCE_IMPORTANT = false;
 export declare const DEFAULT_CSS_PRECEDENCE: "medium";
 export declare const DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS = true;
 //# sourceMappingURL=constants.d.ts.map

package/dist/types/runtimes/react/css-runtime/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/runtimes/react/css-runtime/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,6BAA6B,OAAO,CAAA;AACjD,eAAO,MAAM,yBAAyB,OAAO,CAAA;AAC7C,eAAO,MAAM,sBAAsB,UAAkC,CAAA;AACrE,eAAO,MAAM,oCAAoC,OAAO,CAAA"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/runtimes/react/css-runtime/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,6BAA6B,OAAO,CAAA;AACjD,eAAO,MAAM,yBAAyB,OAAO,CAAA;AAC7C,eAAO,MAAM,2BAA2B,QAAQ,CAAA;AAChD,eAAO,MAAM,sBAAsB,UAAkC,CAAA;AACrE,eAAO,MAAM,oCAAoC,OAAO,CAAA"}

package/dist/types/runtimes/react/css-runtime/hooks/use-controlled-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-controlled-styles.d.ts","sourceRoot":"","sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-controlled-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAK7D,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE;;;;;EAsCvE"}
+{"version":3,"file":"use-controlled-styles.d.ts","sourceRoot":"","sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-controlled-styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAE1C,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAK7D,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE;;;;;EAuCvE"}

package/dist/types/runtimes/react/css-runtime/hooks/use-style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-style.d.ts","sourceRoot":"","sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS;;;;;;;EAyBxC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,aAAa,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG,SAAS,CAAC;;;EAiB7F"}
+{"version":3,"file":"use-style.d.ts","sourceRoot":"","sources":["../../../../../../src/runtimes/react/css-runtime/hooks/use-style.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,SAAS;;;;;;;EA6BxC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,wBAAgB,aAAa,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,GAAG,SAAS,CAAC;;;EAiB7F"}

package/dist/types/runtimes/react/css-runtime/serialize-css.d.ts

@@ -1,4 +1,7 @@
 import { CSSObject } from '@emotion/serialize';
+type SerializationOptions = {
+    forceImportant?: boolean;
+};
 /**
  * Creates a css string from the styles object and provided class name.
  *
@@ -11,7 +14,7 @@ import { CSSObject } from '@emotion/serialize';
  * For "uncontrolled" styles, this is used to convert an inline JS styles object
  * into a css string.
  */
-export declare function toCssStatements(stylesObject: CSSObject, className: string): {
+export declare function toCssStatements(stylesObject: CSSObject, className: string, { forceImportant }?: SerializationOptions): {
     css: string;
     contentHash: string;
 };
@@ -23,9 +26,9 @@ export declare function toCssStatements(stylesObject: CSSObject, className: stri
  * (performing unnesting, applying vendor prefixes, etc.). Re-serializes and returns
  * the transformed css string.
  */
-export declare function processCss({ content }: {
+export declare function processCss({ content, forceImportant, }: {
     content: string;
-}): string;
+} & SerializationOptions): string;
 /**
  * Uses Emotion's `serializeStyles` function to create a css string
  * which is returned along with a content hash.
@@ -37,4 +40,5 @@ export declare function toRawCss(styles: Array<CSSObject>): {
     content: string;
     contentHash: string;
 };
+export {};
 //# sourceMappingURL=serialize-css.d.ts.map

package/dist/types/runtimes/react/css-runtime/serialize-css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"serialize-css.d.ts","sourceRoot":"","sources":["../../../../../src/runtimes/react/css-runtime/serialize-css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6C,MAAM,oBAAoB,CAAA;AAGzF;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAC7B,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,MAAM,GAChB;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAKtC;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CAGnE;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAM3F"}
+{"version":3,"file":"serialize-css.d.ts","sourceRoot":"","sources":["../../../../../src/runtimes/react/css-runtime/serialize-css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6C,MAAM,oBAAoB,CAAA;AAczF,KAAK,oBAAoB,GAAG;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAC7B,YAAY,EAAE,SAAS,EACvB,SAAS,EAAE,MAAM,EACjB,EAAE,cAAsB,EAAE,GAAE,oBAAyB,GACpD;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAKtC;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,cAAsB,GACvB,EAAE;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,GAAG,oBAAoB,GAAG,MAAM,CAMrD;AAqBD;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAM3F"}

package/dist/types/runtimes/react/css-runtime/stylesheet-engine.d.ts

@@ -7,13 +7,15 @@ export declare class StylesheetEngine implements Stylesheet {
     private propPathComponents;
     private onDefineStyle;
     private classNamePrefix?;
-    constructor({ breakpointsData, documentKey, elementKey, propPathComponents, onDefineStyle, classNamePrefix, }: {
+    private forceImportant;
+    constructor({ breakpointsData, documentKey, elementKey, propPathComponents, onDefineStyle, classNamePrefix, forceImportant, }: {
         breakpointsData: Breakpoints;
         documentKey: string;
         elementKey: string;
         propPathComponents: readonly string[];
         onDefineStyle: (data: ControlledStyleData) => void;
         classNamePrefix?: string;
+        forceImportant?: boolean;
     });
     breakpoints(): Breakpoints;
     defineStyle(resolvedStyle: ResolvedStyle, onBoxModelChange?: (boxModel: BoxDisplayModel | null) => void): string;

package/dist/types/runtimes/react/css-runtime/stylesheet-engine.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stylesheet-engine.d.ts","sourceRoot":"","sources":["../../../../../src/runtimes/react/css-runtime/stylesheet-engine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAE7F,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAI7C,qBAAa,gBAAiB,YAAW,UAAU;IACjD,OAAO,CAAC,eAAe,CAAa;IACpC,OAAO,CAAC,WAAW,CAAQ;IAC3B,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,kBAAkB,CAAmB;IAC7C,OAAO,CAAC,aAAa,CAAqC;IAC1D,OAAO,CAAC,eAAe,CAAC,CAAQ;gBAEpB,EACV,eAAe,EACf,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,eAAe,GAChB,EAAE;QACD,eAAe,EAAE,WAAW,CAAA;QAC5B,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,kBAAkB,EAAE,SAAS,MAAM,EAAE,CAAA;QACrC,aAAa,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAA;QAClD,eAAe,CAAC,EAAE,MAAM,CAAA;KACzB;IASD,WAAW,IAAI,WAAW;IAI1B,WAAW,CACT,aAAa,EAAE,aAAa,EAC5B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,GAC5D,MAAM;IAqBT,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU;IAWnC,GAAG,IAAI,MAAM;CAGd"}
+{"version":3,"file":"stylesheet-engine.d.ts","sourceRoot":"","sources":["../../../../../src/runtimes/react/css-runtime/stylesheet-engine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAE7F,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAI7C,qBAAa,gBAAiB,YAAW,UAAU;IACjD,OAAO,CAAC,eAAe,CAAa;IACpC,OAAO,CAAC,WAAW,CAAQ;IAC3B,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,kBAAkB,CAAmB;IAC7C,OAAO,CAAC,aAAa,CAAqC;IAC1D,OAAO,CAAC,eAAe,CAAC,CAAQ;IAChC,OAAO,CAAC,cAAc,CAAS;gBAEnB,EACV,eAAe,EACf,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,eAAe,EACf,cAAsB,GACvB,EAAE;QACD,eAAe,EAAE,WAAW,CAAA;QAC5B,WAAW,EAAE,MAAM,CAAA;QACnB,UAAU,EAAE,MAAM,CAAA;QAClB,kBAAkB,EAAE,SAAS,MAAM,EAAE,CAAA;QACrC,aAAa,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAA;QAClD,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,cAAc,CAAC,EAAE,OAAO,CAAA;KACzB;IAUD,WAAW,IAAI,WAAW;IAI1B,WAAW,CACT,aAAa,EAAE,aAAa,EAC5B,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,KAAK,IAAI,GAC5D,MAAM;IAwBT,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU;IAYnC,GAAG,IAAI,MAAM;CAGd"}