@makeswift/runtime 0.29.0-canary.21 → 0.29.0-canary.23

package/dist/esm/api-handler/handlers/table-record.js

@@ -1,6 +1,6 @@
 import { RestApiClientError } from "../../api/rest-api-client";
 import { ApiResponse } from "../request-response";
-import isErrorWithMessage from "../../utils/isErrorWithMessage";
+import { isErrorWithMessage } from "../../utils/error-message";
 async function tableRecordHandler(req, { client }) {
   const body = await req.json();
   const { tableId, columns } = body;

package/dist/esm/api-handler/handlers/table-record.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/api-handler/handlers/table-record.ts"],"sourcesContent":["import { MakeswiftClient } from '../../client'\nimport { RestApiClientError } from '../../api/rest-api-client'\nimport { type ApiRequest, ApiResponse, type ErrorResponseBody } from '../request-response'\nimport isErrorWithMessage from '../../utils/isErrorWithMessage'\n\nexport async function tableRecordHandler(\n  req: ApiRequest,\n  { client }: { client: MakeswiftClient },\n): Promise<ApiResponse<ErrorResponseBody> | Response> {\n  const body = await req.json()\n  const { tableId, columns } = body\n\n  if (typeof tableId !== 'string') {\n    return ApiResponse.json({ message: 'tableId must be a string' }, { status: 400 })\n  }\n\n  if (!Array.isArray(columns)) {\n    return ApiResponse.json({ message: 'columns must be an array' }, { status: 400 })\n  }\n\n  try {\n    await client.createTableRecord(tableId, columns)\n    return new Response(null, { status: 204 })\n  } catch (error) {\n    if (error instanceof RestApiClientError) {\n      return ApiResponse.json({ message: error.message }, { status: error.status })\n    }\n\n    if (isErrorWithMessage(error)) {\n      return ApiResponse.json({ message: error.message }, { status: 500 })\n    }\n\n    return ApiResponse.json({ message: 'Error creating table record' }, { status: 500 })\n  }\n}\n"],"mappings":"AACA,SAAS,0BAA0B;AACnC,SAA0B,mBAA2C;AACrE,OAAO,wBAAwB;AAE/B,eAAsB,mBACpB,KACA,EAAE,OAAO,GAC2C;AACpD,QAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,QAAM,EAAE,SAAS,QAAQ,IAAI;AAE7B,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,YAAY,KAAK,EAAE,SAAS,2BAA2B,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,EAClF;AAEA,MAAI,CAAC,MAAM,QAAQ,OAAO,GAAG;AAC3B,WAAO,YAAY,KAAK,EAAE,SAAS,2BAA2B,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,EAClF;AAEA,MAAI;AACF,UAAM,OAAO,kBAAkB,SAAS,OAAO;AAC/C,WAAO,IAAI,SAAS,MAAM,EAAE,QAAQ,IAAI,CAAC;AAAA,EAC3C,SAAS,OAAO;AACd,QAAI,iBAAiB,oBAAoB;AACvC,aAAO,YAAY,KAAK,EAAE,SAAS,MAAM,QAAQ,GAAG,EAAE,QAAQ,MAAM,OAAO,CAAC;AAAA,IAC9E;AAEA,QAAI,mBAAmB,KAAK,GAAG;AAC7B,aAAO,YAAY,KAAK,EAAE,SAAS,MAAM,QAAQ,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,IACrE;AAEA,WAAO,YAAY,KAAK,EAAE,SAAS,8BAA8B,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,EACrF;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/api-handler/handlers/table-record.ts"],"sourcesContent":["import { MakeswiftClient } from '../../client'\nimport { RestApiClientError } from '../../api/rest-api-client'\nimport { type ApiRequest, ApiResponse, type ErrorResponseBody } from '../request-response'\nimport { isErrorWithMessage } from '../../utils/error-message'\n\nexport async function tableRecordHandler(\n  req: ApiRequest,\n  { client }: { client: MakeswiftClient },\n): Promise<ApiResponse<ErrorResponseBody> | Response> {\n  const body = await req.json()\n  const { tableId, columns } = body\n\n  if (typeof tableId !== 'string') {\n    return ApiResponse.json({ message: 'tableId must be a string' }, { status: 400 })\n  }\n\n  if (!Array.isArray(columns)) {\n    return ApiResponse.json({ message: 'columns must be an array' }, { status: 400 })\n  }\n\n  try {\n    await client.createTableRecord(tableId, columns)\n    return new Response(null, { status: 204 })\n  } catch (error) {\n    if (error instanceof RestApiClientError) {\n      return ApiResponse.json({ message: error.message }, { status: error.status })\n    }\n\n    if (isErrorWithMessage(error)) {\n      return ApiResponse.json({ message: error.message }, { status: 500 })\n    }\n\n    return ApiResponse.json({ message: 'Error creating table record' }, { status: 500 })\n  }\n}\n"],"mappings":"AACA,SAAS,0BAA0B;AACnC,SAA0B,mBAA2C;AACrE,SAAS,0BAA0B;AAEnC,eAAsB,mBACpB,KACA,EAAE,OAAO,GAC2C;AACpD,QAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,QAAM,EAAE,SAAS,QAAQ,IAAI;AAE7B,MAAI,OAAO,YAAY,UAAU;AAC/B,WAAO,YAAY,KAAK,EAAE,SAAS,2BAA2B,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,EAClF;AAEA,MAAI,CAAC,MAAM,QAAQ,OAAO,GAAG;AAC3B,WAAO,YAAY,KAAK,EAAE,SAAS,2BAA2B,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,EAClF;AAEA,MAAI;AACF,UAAM,OAAO,kBAAkB,SAAS,OAAO;AAC/C,WAAO,IAAI,SAAS,MAAM,EAAE,QAAQ,IAAI,CAAC;AAAA,EAC3C,SAAS,OAAO;AACd,QAAI,iBAAiB,oBAAoB;AACvC,aAAO,YAAY,KAAK,EAAE,SAAS,MAAM,QAAQ,GAAG,EAAE,QAAQ,MAAM,OAAO,CAAC;AAAA,IAC9E;AAEA,QAAI,mBAAmB,KAAK,GAAG;AAC7B,aAAO,YAAY,KAAK,EAAE,SAAS,MAAM,QAAQ,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,IACrE;AAEA,WAAO,YAAY,KAAK,EAAE,SAAS,8BAA8B,GAAG,EAAE,QAAQ,IAAI,CAAC;AAAA,EACrF;AACF;","names":[]}

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

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

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

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

package/dist/esm/next/document.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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/hooks/use-async-effect.js

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { errorMessage } from "../../../utils/error-message";
 function useAsyncEffect(effect, deps) {
   useEffect(() => {
     let cancelled = false;
@@ -11,16 +12,16 @@ function useAsyncEffect(effect, deps) {
           cleanup = null;
         }
       } catch (error) {
-        console.error("Async effect error:", { error, deps });
+        console.error(`Async effect error: ${errorMessage(error)}`, { error, deps });
       }
     };
-    runAsyncEffect();
+    void runAsyncEffect();
     return () => {
       cancelled = true;
       try {
         cleanup?.();
       } catch (error) {
-        console.error("Async effect cleanup error:", { error, deps });
+        console.error(`Async effect cleanup error: ${errorMessage(error)}`, { error, deps });
       }
     };
   }, deps);