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

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

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

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

@@ -223,7 +223,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/cjs/api-handler/handlers/manifest.js

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

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

@@ -24,34 +24,54 @@ module.exports = __toCommonJS(FallbackComponent_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_Warning20 = require("../../icons/Warning20");
-var import_use_style = require("../../../runtimes/react/css-runtime/hooks/use-style");
 const FallbackComponent = (0, import_react.forwardRef)(function FallbackComponent2({ text, details }, ref) {
-  const { className: outerClassName, styleElement: outerStyleElement } = (0, import_use_style.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 } = (0, import_use_style.useStyle)({
-    display: "none"
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    outerStyleElement,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: outerClassName, children: [
-      noDisplayStyleElement,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Warning20.Warning20, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: text }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: noDisplayClassName, children: details })
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref,
+      style: {
+        width: "100%",
+        height: 54,
+        backgroundColor: "#fcedf2",
+        borderRadius: 6,
+        padding: 16,
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        color: "#c73e6d"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Warning20.Warning20,
+          {
+            style: {
+              fill: "currentColor"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            style: {
+              color: "currentColor",
+              fontFamily: "Heebo, sans-serif",
+              fontSize: 16
+            },
+            children: text
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            style: {
+              display: "none"
+            },
+            children: details
+          }
+        )
+      ]
+    }
+  );
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BI;AA/BJ,mBAAgC;AAChC,uBAA0B;AAC1B,uBAAyB;AAOlB,MAAM,wBAAoB,yBAAW,SAASA,mBACnD,EAAE,MAAM,QAAQ,GAChB,KACA;AACA,QAAM,EAAE,WAAW,gBAAgB,cAAc,kBAAkB,QAAI,2BAAS;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,QAAI,2BAAS;AAAA,IACtF,SAAS;AAAA,EACX,CAAC;AACD,SACE,4EACG;AAAA;AAAA,IACD,6CAAC,SAAI,KAAU,WAAW,gBACvB;AAAA;AAAA,MACD,4CAAC,8BAAU;AAAA,MACX,4CAAC,UAAM,gBAAK;AAAA,MACZ,4CAAC,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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeI;AAfJ,mBAAgC;AAChC,uBAA0B;AAOnB,MAAM,wBAAoB,yBAAW,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/cjs/next/components/tests/controls/page-control-prop-rendering.js

@@ -42,6 +42,7 @@ var import_MakeswiftComponent = require("../../../../runtimes/react/components/M
 var import_page = require("../../page");
 var import_is_server = require("../../../../utils/is-server");
 var import_render_to_string = require("../../../../runtimes/react/testing/render-to-string");
+var import_window = require("../../../../testing/window");
 var Testing = __toESM(require("../../../testing"));
 const ROOT_ID = "00000000-0000-0000-0000-000000000000";
 const ELEMENT_ID = "11111111-1111-1111-1111-111111111111";
@@ -62,22 +63,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,
@@ -128,7 +113,7 @@ async function testPageControlPropRendering(controlDefinition, {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Testing.ReactProvider, { runtime, siteVersion, children: component });
   };
   if (!(0, import_is_server.isServer)()) {
-    const restoreMessageChannel = isReadOnly ? null : stubBuilderMessageChannel();
+    const postMessageMock = import_window.windowMocks.mockPostMessage();
     const rootElementData = Testing.createRootComponent(
       [elementData, ...rootElements],
       ROOT_ID
@@ -145,7 +130,7 @@ async function testPageControlPropRendering(controlDefinition, {
     if (expectedRenders != null) {
       expect(Number(import_react2.screen.getByTestId(renderCountTestId).textContent)).toBe(expectedRenders);
     }
-    restoreMessageChannel?.();
+    postMessageMock.restore();
   } else {
     console.assert(action == null);
     console.assert(rootElements.length === 0);

package/dist/cjs/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":"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","names":["import_react"]}
+{"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":["import_react"]}

package/dist/cjs/next/document.js

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

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCY;AArCZ,sBAOO;AACP,wCAKO;AACP,mBAA8C;AAC9C,qCAA8B;AAEvB,MAAM,iBAAiB,gBAAAA,QAAa;AAAA,EACzC,aAAa,gBAAgB,KAAqD;AAChF,UAAM,qBAAqB,IAAI;AAC/B,UAAM,qBAAiB,iEAA8B;AAarD,QAAI,aAAa,MAAM;AACrB,aAAO,mBAAmB;AAAA,QACxB,kBAAkB,eAAa,WAC7B,4CAAC,0BAAuB,gBACtB,sDAAC,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,4CAAC,WAA6B,aAAW,MAAM,MAAM,mBAAiB,MAAM,YACzE,gBAAM,OADG,MAAM,UAElB;AAAA,IAEJ,CAAC;AAED,UAAM,iBACJ,4EACG;AAAA,mBAAa;AAAA,MACb;AAAA,OACH;AAGF,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WACE,6CAAC,wBACC;AAAA,kDAAC,wBAAK;AAAA,MACN,6CAAC,UACC;AAAA,oDAAC,wBAAK;AAAA,QACN,4CAAC,8BAAW;AAAA,SACd;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AACF,GAEI;AACF,QAAM,yBAAqB,yBAAW,4CAAa;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":["NextDocument"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuCY;AArCZ,sBAOO;AACP,wCAKO;AACP,mBAA8C;AAC9C,qCAA8B;AAEvB,MAAM,iBAAiB,gBAAAA,QAAa;AAAA,EACzC,aAAa,gBAAgB,KAAqD;AAChF,UAAM,qBAAqB,IAAI;AAC/B,UAAM,qBAAiB,iEAA8B;AAarD,QAAI,aAAa,MAAM;AACrB,aAAO,mBAAmB;AAAA,QACxB,kBAAkB,eAAa,WAC7B,4CAAC,0BAAuB,gBACtB,sDAAC,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,4CAAC,WAA6B,aAAW,MAAM,MAAM,mBAAiB,MAAM,YACzE,gBAAM,OADG,MAAM,UAElB;AAAA,IAEJ,CAAC;AAED,UAAM,iBACJ,4EACG;AAAA,mBAAa;AAAA,MACb;AAAA,OACH;AAGF,WAAO;AAAA,MACL,GAAG;AAAA,MACH,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WACE,6CAAC,wBACC;AAAA,kDAAC,wBAAK;AAAA,MACN,6CAAC,UACC;AAAA,oDAAC,wBAAK;AAAA,QACN,4CAAC,8BAAW;AAAA,SACd;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AACF,GAEI;AACF,QAAM,yBAAqB,yBAAW,4CAAa;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":["NextDocument"]}

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

@@ -27,9 +27,18 @@ var import_root_style_registry = require("../runtimes/react/root-style-registry"
 function NextRootStyleRegistry({
   children,
   classNamePrefix,
-  enableCssReset
+  enableCssReset,
+  forceImportant
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_root_style_registry.DefaultRootStyleRegistry, { classNamePrefix, enableCssReset, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_root_style_registry.DefaultRootStyleRegistry,
+    {
+      classNamePrefix,
+      enableCssReset,
+      forceImportant,
+      children
+    }
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeI;AAXJ,iCAGO;AAEA,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,SACE,4CAAC,2BAAAA,0BAAA,EAAuB,iBAAkC,gBACvD,UACH;AAEJ;","names":["ReactRootStyleRegistry"]}
+{"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":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBI;AAZJ,iCAGO;AAEA,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,SACE;AAAA,IAAC,2BAAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":["ReactRootStyleRegistry"]}

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

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

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCI;AA9BJ,mBAAiD;AAoB1C,MAAM,oBAAgB,4BAA8C,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":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCI;AAhCJ,mBAAiD;AAqB1C,MAAM,oBAAgB,4BAA8C,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/cjs/runtimes/react/css-runtime/constants.js

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var constants_exports = {};
 __export(constants_exports, {
   DEFAULT_CSS_CLASS_NAME_PREFIX: () => DEFAULT_CSS_CLASS_NAME_PREFIX,
+  DEFAULT_CSS_FORCE_IMPORTANT: () => DEFAULT_CSS_FORCE_IMPORTANT,
   DEFAULT_CSS_PRECEDENCE: () => DEFAULT_CSS_PRECEDENCE,
   DEFAULT_CSS_RESET_ENABLED: () => DEFAULT_CSS_RESET_ENABLED,
   DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS: () => DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS
@@ -27,11 +28,13 @@ module.exports = __toCommonJS(constants_exports);
 var import_types = require("./types");
 const DEFAULT_CSS_CLASS_NAME_PREFIX = "ms";
 const DEFAULT_CSS_RESET_ENABLED = true;
+const DEFAULT_CSS_FORCE_IMPORTANT = false;
 const DEFAULT_CSS_PRECEDENCE = import_types.MakeswiftStylePrecedence.MEDIUM;
 const DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS = true;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DEFAULT_CSS_CLASS_NAME_PREFIX,
+  DEFAULT_CSS_FORCE_IMPORTANT,
   DEFAULT_CSS_PRECEDENCE,
   DEFAULT_CSS_RESET_ENABLED,
   DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AAElC,MAAM,gCAAgC;AACtC,MAAM,4BAA4B;AAClC,MAAM,yBAAyB,sCAAyB;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AAElC,MAAM,gCAAgC;AACtC,MAAM,4BAA4B;AAClC,MAAM,8BAA8B;AACpC,MAAM,yBAAyB,sCAAyB;AACxD,MAAM,uCAAuC;","names":[]}

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

@@ -37,11 +37,11 @@ var import_types = require("../types");
 var import_react = __toESM(require("react"));
 var import_makeswift_style = require("../components/makeswift-style");
 function useBaseStyles({ styles }) {
-  const { stylesRegistry } = (0, import_use_styles_context.useStylesContext)();
+  const { forceImportant, stylesRegistry } = (0, import_use_styles_context.useStylesContext)();
   const { content: rawContent, contentHash } = (0, import_serialize_css.toRawCss)([styles]);
   let styleData = stylesRegistry.getBaseStyles().get(contentHash);
   if (styleData == null) {
-    const css = (0, import_serialize_css.processCss)({ content: rawContent });
+    const css = (0, import_serialize_css.processCss)({ content: rawContent, forceImportant });
     styleData = {
       css,
       cssObject: styles,

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,gCAAiC;AACjC,2BAAqC;AACrC,mBAAyC;AACzC,mBAAkB;AAClB,6BAA+B;AAExB,SAAS,cAAc,EAAE,OAAO,GAA0B;AAC/D,QAAM,EAAE,eAAe,QAAI,4CAAiB;AAC5C,QAAM,EAAE,SAAS,YAAY,YAAY,QAAI,+BAAS,CAAC,MAAM,CAAC;AAC9D,MAAI,YAAY,eAAe,cAAc,EAAE,IAAI,WAAW;AAC9D,MAAI,aAAa,MAAM;AACrB,UAAM,UAAM,iCAAW,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,aAAAA,QAAM,cAAc,uCAAgB;AAAA,IACvD,KAAK;AAAA,IACL;AAAA,IACA,KAAK,UAAU;AAAA,IACf,YAAY,sCAAyB;AAAA,EACvC,CAAC;AACD,SAAO;AAAA,IACL;AAAA,EACF;AACF;","names":["React"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,gCAAiC;AACjC,2BAAqC;AACrC,mBAAyC;AACzC,mBAAkB;AAClB,6BAA+B;AAExB,SAAS,cAAc,EAAE,OAAO,GAA0B;AAC/D,QAAM,EAAE,gBAAgB,eAAe,QAAI,4CAAiB;AAC5D,QAAM,EAAE,SAAS,YAAY,YAAY,QAAI,+BAAS,CAAC,MAAM,CAAC;AAC9D,MAAI,YAAY,eAAe,cAAc,EAAE,IAAI,WAAW;AAC9D,MAAI,aAAa,MAAM;AACrB,UAAM,UAAM,iCAAW,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,aAAAA,QAAM,cAAc,uCAAgB;AAAA,IACvD,KAAK;AAAA,IACL;AAAA,IACA,KAAK,UAAU;AAAA,IACf,YAAY,sCAAyB;AAAA,EACvC,CAAC;AACD,SAAO;AAAA,IACL;AAAA,EACF;AACF;","names":["React"]}

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

@@ -37,7 +37,7 @@ var import_use_styles_context = require("./use-styles-context");
 var import_stylesheet_engine = require("../stylesheet-engine");
 var import_use_document_context = require("../../hooks/use-document-context");
 function useControlledStyles({ namespace }) {
-  const { classNamePrefix, stylesRegistry } = (0, import_use_styles_context.useStylesContext)();
+  const { classNamePrefix, forceImportant, stylesRegistry } = (0, import_use_styles_context.useStylesContext)();
   const documentKey = (0, import_use_document_context.useDocumentKey)();
   if (documentKey == null) {
     throw new Error("Root document key not found when attempting to use controlled styles");
@@ -59,10 +59,11 @@ function useControlledStyles({ namespace }) {
         elementKey,
         propPathComponents,
         onDefineStyle,
-        classNamePrefix
+        classNamePrefix,
+        forceImportant
       });
     },
-    [classNamePrefix, stylesRegistry, namespace, documentKey]
+    [classNamePrefix, forceImportant, stylesRegistry, namespace, documentKey]
   );
   const styleElements = import_react.default.createElement(import_controlled_styles.ControlledStyles, {
     classNameToStyles: stylesRegistry.getControlledStyles(namespace)

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,+BAAiC;AAEjC,gCAAiC;AACjC,+BAAiC;AACjC,kCAA+B;AAExB,SAAS,oBAAoB,EAAE,UAAU,GAA0B;AACxE,QAAM,EAAE,iBAAiB,eAAe,QAAI,4CAAiB;AAC7D,QAAM,kBAAc,4CAAe;AACnC,MAAI,eAAe,MAAM;AACvB,UAAM,IAAI,MAAM,sEAAsE;AAAA,EACxF;AAEA,QAAM,oBAAgB;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,0CAAiB;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,aAAAA,QAAM,cAAc,2CAAkB;AAAA,IAC1D,mBAAmB,eAAe,oBAAoB,SAAS;AAAA,EACjE,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":["React"]}
+{"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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmC;AACnC,+BAAiC;AAEjC,gCAAiC;AACjC,+BAAiC;AACjC,kCAA+B;AAExB,SAAS,oBAAoB,EAAE,UAAU,GAA0B;AACxE,QAAM,EAAE,iBAAiB,gBAAgB,eAAe,QAAI,4CAAiB;AAC7E,QAAM,kBAAc,4CAAe;AACnC,MAAI,eAAe,MAAM;AACvB,UAAM,IAAI,MAAM,sEAAsE;AAAA,EACxF;AAEA,QAAM,oBAAgB;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,0CAAiB;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,aAAAA,QAAM,cAAc,2CAAkB;AAAA,IAC1D,mBAAmB,eAAe,oBAAoB,SAAS;AAAA,EACjE,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":["React"]}

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

@@ -37,26 +37,23 @@ var import_types = require("../types");
 var import_makeswift_style = require("../components/makeswift-style");
 var import_react = __toESM(require("react"));
 function useCssReset({ styles }) {
-  const { enableCssReset, stylesRegistry } = (0, import_use_styles_context.useStylesContext)();
+  const { enableCssReset, forceImportant, stylesRegistry } = (0, import_use_styles_context.useStylesContext)();
   if (!enableCssReset)
     return { styleElement: null };
   const { content: rawContent, contentHash } = (0, import_serialize_css.toRawCss)(styles);
   let styleData = stylesRegistry.getCssResets().get(contentHash);
   if (styleData == null) {
-    const css2 = (0, import_serialize_css.processCss)({ content: rawContent });
     styleData = {
-      css: css2,
+      css: (0, import_serialize_css.processCss)({ content: rawContent, forceImportant }),
       cssObjects: styles,
       contentHash
     };
     stylesRegistry.setCssReset(styleData);
   }
-  const css = (0, import_serialize_css.processCss)({ content: rawContent });
-  const href = `makeswift-css-reset-${contentHash}`;
   const styleElement = import_react.default.createElement(import_makeswift_style.MakeswiftStyle, {
     key: contentHash,
-    href,
-    css,
+    href: `makeswift-css-reset-${contentHash}`,
+    css: styleData.css,
     precedence: import_types.MakeswiftStylePrecedence.RESET
   });
   return {

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,gCAAiC;AACjC,2BAAqC;AACrC,mBAAyC;AACzC,6BAA+B;AAC/B,mBAAkB;AAEX,SAAS,YAAY,EAAE,OAAO,GAAiC;AACpE,QAAM,EAAE,gBAAgB,eAAe,QAAI,4CAAiB;AAC5D,MAAI,CAAC;AAAgB,WAAO,EAAE,cAAc,KAAK;AACjD,QAAM,EAAE,SAAS,YAAY,YAAY,QAAI,+BAAS,MAAM;AAC5D,MAAI,YAAY,eAAe,aAAa,EAAE,IAAI,WAAW;AAC7D,MAAI,aAAa,MAAM;AACrB,UAAMA,WAAM,iCAAW,EAAE,SAAS,WAAW,CAAC;AAC9C,gBAAY;AAAA,MACV,KAAAA;AAAA,MACA,YAAY;AAAA,MACZ;AAAA,IACF;AACA,mBAAe,YAAY,SAAS;AAAA,EACtC;AACA,QAAM,UAAM,iCAAW,EAAE,SAAS,WAAW,CAAC;AAC9C,QAAM,OAAO,uBAAuB,WAAW;AAE/C,QAAM,eAAe,aAAAC,QAAM,cAAc,uCAAgB;AAAA,IACvD,KAAK;AAAA,IACL;AAAA,IACA;AAAA,IACA,YAAY,sCAAyB;AAAA,EACvC,CAAC;AACD,SAAO;AAAA,IACL;AAAA,EACF;AACF;","names":["css","React"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,gCAAiC;AACjC,2BAAqC;AACrC,mBAAyC;AACzC,6BAA+B;AAC/B,mBAAkB;AAEX,SAAS,YAAY,EAAE,OAAO,GAAiC;AACpE,QAAM,EAAE,gBAAgB,gBAAgB,eAAe,QAAI,4CAAiB;AAC5E,MAAI,CAAC;AAAgB,WAAO,EAAE,cAAc,KAAK;AAEjD,QAAM,EAAE,SAAS,YAAY,YAAY,QAAI,+BAAS,MAAM;AAC5D,MAAI,YAAY,eAAe,aAAa,EAAE,IAAI,WAAW;AAC7D,MAAI,aAAa,MAAM;AACrB,gBAAY;AAAA,MACV,SAAK,iCAAW,EAAE,SAAS,YAAY,eAAe,CAAC;AAAA,MACvD,YAAY;AAAA,MACZ;AAAA,IACF;AAEA,mBAAe,YAAY,SAAS;AAAA,EACtC;AAEA,QAAM,eAAe,aAAAA,QAAM,cAAc,uCAAgB;AAAA,IACvD,KAAK;AAAA,IACL,MAAM,uBAAuB,WAAW;AAAA,IACxC,KAAK,UAAU;AAAA,IACf,YAAY,sCAAyB;AAAA,EACvC,CAAC;AAED,SAAO;AAAA,IACL;AAAA,EACF;AACF;","names":["React"]}

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

@@ -38,7 +38,7 @@ var import_controlled_styles = require("../components/controlled-styles");
 var import_serialize_css = require("../serialize-css");
 var import_use_document_context = require("../../hooks/use-document-context");
 function useLegacyControlledStyle(style, elementKey, propName) {
-  const { classNamePrefix, stylesRegistry } = (0, import_use_styles_context.useStylesContext)();
+  const { classNamePrefix, forceImportant, stylesRegistry } = (0, import_use_styles_context.useStylesContext)();
   const documentKey = (0, import_use_document_context.useDocumentKey)();
   if (documentKey == null) {
     throw new Error("Root document key not found when attempting to use legacy controlled styles");
@@ -48,7 +48,7 @@ function useLegacyControlledStyle(style, elementKey, propName) {
     data: `${documentKey}-${elementKey}-${propName}`,
     classNamePrefix
   });
-  const { css, contentHash } = (0, import_serialize_css.toCssStatements)(style, className);
+  const { css, contentHash } = (0, import_serialize_css.toCssStatements)(style, className, { forceImportant });
   const data = {
     className,
     css,

package/dist/cjs/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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAClC,mBAAkB;AAClB,gCAAiC;AACjC,+BAAiC;AACjC,2BAAgC;AAEhC,kCAA+B;AAExB,SAAS,yBAAyB,OAAkB,YAAoB,UAAkB;AAC/F,QAAM,EAAE,iBAAiB,eAAe,QAAI,4CAAiB;AAC7D,QAAM,kBAAc,4CAAe;AACnC,MAAI,eAAe,MAAM;AACvB,UAAM,IAAI,MAAM,6EAA6E;AAAA,EAC/F;AAMA,QAAM,YAAY,GAAG,UAAU,WAAW,QAAQ;AAClD,QAAM,gBAAY,gCAAkB;AAAA,IAClC,MAAM,GAAG,WAAW,IAAI,UAAU,IAAI,QAAQ;AAAA,IAC9C;AAAA,EACF,CAAC;AAED,QAAM,EAAE,KAAK,YAAY,QAAI,sCAAgB,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,aAAAA,QAAM,cAAc,2CAAkB;AAAA,IACzD,mBAAmB,oBAAI,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;AAAA,EAChD,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":["React"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkC;AAClC,mBAAkB;AAClB,gCAAiC;AACjC,+BAAiC;AACjC,2BAAgC;AAEhC,kCAA+B;AAExB,SAAS,yBAAyB,OAAkB,YAAoB,UAAkB;AAC/F,QAAM,EAAE,iBAAiB,gBAAgB,eAAe,QAAI,4CAAiB;AAC7E,QAAM,kBAAc,4CAAe;AACnC,MAAI,eAAe,MAAM;AACvB,UAAM,IAAI,MAAM,6EAA6E;AAAA,EAC/F;AAMA,QAAM,YAAY,GAAG,UAAU,WAAW,QAAQ;AAClD,QAAM,gBAAY,gCAAkB;AAAA,IAClC,MAAM,GAAG,WAAW,IAAI,UAAU,IAAI,QAAQ;AAAA,IAC9C;AAAA,EACF,CAAC;AAED,QAAM,EAAE,KAAK,YAAY,QAAI,sCAAgB,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,aAAAA,QAAM,cAAc,2CAAkB;AAAA,IACzD,mBAAmB,oBAAI,IAAI,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC;AAAA,EAChD,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;","names":["React"]}

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

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

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAElC,mBAAkB;AAClB,kBAAiB;AACjB,gCAAiC;AACjC,2BAAgC;AAChC,6BAA+B;AASxB,SAAS,SAAS,OAAkB;AACzC,QAAM,EAAE,iBAAiB,eAAe,QAAI,4CAAiB;AAC7D,QAAM,gBAAY,gCAAkB;AAAA,IAClC,MAAM,KAAK,UAAU,KAAK;AAAA,IAC1B;AAAA,EACF,CAAC;AACD,MAAI,YAAY,eAAe,2BAA2B,EAAE,IAAI,SAAS;AACzE,MAAI,aAAa,MAAM;AACrB,UAAM,EAAE,IAAI,QAAI,sCAAgB,OAAO,SAAS;AAChD,gBAAY;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IACb;AACA,mBAAe,0BAA0B,SAAS;AAAA,EACpD;AACA,QAAM,eAAe,aAAAA,QAAM,cAAc,uCAAgB;AAAA,IACvD,KAAK;AAAA,IACL,MAAM;AAAA,IACN,KAAK,UAAU;AAAA,EACjB,CAAC;AACD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;AA0CO,SAAS,iBAAiB,MAA+D;AAC9F,QAAM,aAAuB,CAAC;AAC9B,QAAM,gBAAsC,CAAC;AAC7C,OAAK,QAAQ,SAAO;AAClB,QAAI,OAAO;AAAM;AACjB,QAAI,OAAO,QAAQ,UAAU;AAC3B,iBAAW,KAAK,GAAG;AAAA,IACrB,OAAO;AACL,iBAAW,KAAK,IAAI,SAAS;AAC7B,oBAAc,KAAK,IAAI,YAAY;AAAA,IACrC;AAAA,EACF,CAAC;AACD,QAAM,wBAAoB,YAAAC,SAAK,UAAU;AACzC,SAAO;AAAA,IACL,WAAW;AAAA,IACX;AAAA,EACF;AACF;","names":["React","clsx"]}
+{"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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAElC,mBAAkB;AAClB,kBAAiB;AACjB,gCAAiC;AACjC,2BAAgC;AAChC,6BAA+B;AASxB,SAAS,SAAS,OAAkB;AACzC,QAAM,EAAE,iBAAiB,gBAAgB,eAAe,QAAI,4CAAiB;AAC7E,QAAM,kBAAkB,KAAK,UAAU,KAAK;AAC5C,QAAM,gBAAY,gCAAkB;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,QAAI,sCAAgB,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,aAAAA,QAAM,cAAc,uCAAgB;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,wBAAoB,YAAAC,SAAK,UAAU;AACzC,SAAO;AAAA,IACL,WAAW;AAAA,IACX;AAAA,EACF;AACF;","names":["React","clsx"]}

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

@@ -25,21 +25,38 @@ __export(serialize_css_exports, {
 module.exports = __toCommonJS(serialize_css_exports);
 var import_serialize = require("@emotion/serialize");
 var import_stylis = require("stylis");
-function toCssStatements(stylesObject, className) {
+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 = (0, import_stylis.compile)(content);
-  return (0, import_stylis.serialize)(cssElementTree, (0, import_stylis.middleware)([import_stylis.prefixer, import_stylis.stringify]));
+  return (0, import_stylis.serialize)(
+    cssElementTree,
+    (0, import_stylis.middleware)([...forceImportant ? [appendImportant] : [], import_stylis.prefixer, import_stylis.stringify])
+  );
 }
+const appendImportant = (element) => {
+  if (element.type !== import_stylis.DECLARATION || element.root?.type !== import_stylis.RULESET)
+    return;
+  for (let ancestor = element.parent; ancestor != null; ancestor = ancestor.parent) {
+    if (ancestor.type === import_stylis.KEYFRAMES)
+      return;
+  }
+  if (/!important\s*;$/i.test(element.value))
+    return;
+  element.value = element.value.replace(/;$/, "!important;");
+};
 function toRawCss(styles) {
-  const emotionSerializationResult = (0, import_serialize.serializeStyles)(styles);
+  const { styles: serializedStyles, name } = (0, import_serialize.serializeStyles)(styles);
   return {
-    content: emotionSerializationResult.styles,
-    contentHash: emotionSerializationResult.name
+    content: serializedStyles,
+    contentHash: name
   };
 }
 // Annotate the CommonJS export names for ESM import in node: