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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/dist/cjs/api/graphql-api-client.js +1 -1
  2. package/dist/cjs/api/rest-api-client.js +1 -1
  3. package/dist/cjs/api-handler/handlers/manifest.js +1 -1
  4. package/dist/cjs/next/components/tests/controls/page-control-prop-rendering.js +3 -18
  5. package/dist/cjs/next/components/tests/controls/page-control-prop-rendering.js.map +1 -1
  6. package/dist/cjs/next/document.js +2 -1
  7. package/dist/cjs/next/document.js.map +1 -1
  8. package/dist/cjs/next/root-style-registry.js +11 -2
  9. package/dist/cjs/next/root-style-registry.js.map +1 -1
  10. package/dist/cjs/runtimes/react/css-runtime/components/styles-context-provider.js +2 -0
  11. package/dist/cjs/runtimes/react/css-runtime/components/styles-context-provider.js.map +1 -1
  12. package/dist/cjs/runtimes/react/css-runtime/constants.js +3 -0
  13. package/dist/cjs/runtimes/react/css-runtime/constants.js.map +1 -1
  14. package/dist/cjs/runtimes/react/css-runtime/hooks/use-base-styles.js +2 -2
  15. package/dist/cjs/runtimes/react/css-runtime/hooks/use-base-styles.js.map +1 -1
  16. package/dist/cjs/runtimes/react/css-runtime/hooks/use-controlled-styles.js +4 -3
  17. package/dist/cjs/runtimes/react/css-runtime/hooks/use-controlled-styles.js.map +1 -1
  18. package/dist/cjs/runtimes/react/css-runtime/hooks/use-css-reset.js +4 -7
  19. package/dist/cjs/runtimes/react/css-runtime/hooks/use-css-reset.js.map +1 -1
  20. package/dist/cjs/runtimes/react/css-runtime/hooks/use-legacy-controlled-style.js +2 -2
  21. package/dist/cjs/runtimes/react/css-runtime/hooks/use-legacy-controlled-style.js.map +1 -1
  22. package/dist/cjs/runtimes/react/css-runtime/hooks/use-style.js +4 -3
  23. package/dist/cjs/runtimes/react/css-runtime/hooks/use-style.js.map +1 -1
  24. package/dist/cjs/runtimes/react/css-runtime/serialize-css.js +24 -7
  25. package/dist/cjs/runtimes/react/css-runtime/serialize-css.js.map +1 -1
  26. package/dist/cjs/runtimes/react/css-runtime/stylesheet-engine.js +9 -3
  27. package/dist/cjs/runtimes/react/css-runtime/stylesheet-engine.js.map +1 -1
  28. package/dist/cjs/runtimes/react/root-style-registry.js +5 -1
  29. package/dist/cjs/runtimes/react/root-style-registry.js.map +1 -1
  30. package/dist/cjs/runtimes/react/server/components/element-data.js +1 -0
  31. package/dist/cjs/runtimes/react/server/components/element-data.js.map +1 -1
  32. package/dist/cjs/testing/window.js +50 -0
  33. package/dist/cjs/testing/window.js.map +1 -0
  34. package/dist/esm/api/graphql-api-client.js +1 -1
  35. package/dist/esm/api/rest-api-client.js +1 -1
  36. package/dist/esm/api-handler/handlers/manifest.js +1 -1
  37. package/dist/esm/next/components/tests/controls/page-control-prop-rendering.js +3 -18
  38. package/dist/esm/next/components/tests/controls/page-control-prop-rendering.js.map +1 -1
  39. package/dist/esm/next/document.js +2 -1
  40. package/dist/esm/next/document.js.map +1 -1
  41. package/dist/esm/next/root-style-registry.js +11 -2
  42. package/dist/esm/next/root-style-registry.js.map +1 -1
  43. package/dist/esm/runtimes/react/css-runtime/components/styles-context-provider.js +2 -0
  44. package/dist/esm/runtimes/react/css-runtime/components/styles-context-provider.js.map +1 -1
  45. package/dist/esm/runtimes/react/css-runtime/constants.js +2 -0
  46. package/dist/esm/runtimes/react/css-runtime/constants.js.map +1 -1
  47. package/dist/esm/runtimes/react/css-runtime/hooks/use-base-styles.js +2 -2
  48. package/dist/esm/runtimes/react/css-runtime/hooks/use-base-styles.js.map +1 -1
  49. package/dist/esm/runtimes/react/css-runtime/hooks/use-controlled-styles.js +4 -3
  50. package/dist/esm/runtimes/react/css-runtime/hooks/use-controlled-styles.js.map +1 -1
  51. package/dist/esm/runtimes/react/css-runtime/hooks/use-css-reset.js +4 -7
  52. package/dist/esm/runtimes/react/css-runtime/hooks/use-css-reset.js.map +1 -1
  53. package/dist/esm/runtimes/react/css-runtime/hooks/use-legacy-controlled-style.js +2 -2
  54. package/dist/esm/runtimes/react/css-runtime/hooks/use-legacy-controlled-style.js.map +1 -1
  55. package/dist/esm/runtimes/react/css-runtime/hooks/use-style.js +4 -3
  56. package/dist/esm/runtimes/react/css-runtime/hooks/use-style.js.map +1 -1
  57. package/dist/esm/runtimes/react/css-runtime/serialize-css.js +34 -8
  58. package/dist/esm/runtimes/react/css-runtime/serialize-css.js.map +1 -1
  59. package/dist/esm/runtimes/react/css-runtime/stylesheet-engine.js +9 -3
  60. package/dist/esm/runtimes/react/css-runtime/stylesheet-engine.js.map +1 -1
  61. package/dist/esm/runtimes/react/root-style-registry.js +7 -2
  62. package/dist/esm/runtimes/react/root-style-registry.js.map +1 -1
  63. package/dist/esm/runtimes/react/server/components/element-data.js +1 -0
  64. package/dist/esm/runtimes/react/server/components/element-data.js.map +1 -1
  65. package/dist/esm/testing/window.js +26 -0
  66. package/dist/esm/testing/window.js.map +1 -0
  67. package/dist/types/next/components/tests/controls/page-control-prop-rendering.d.ts.map +1 -1
  68. package/dist/types/next/root-style-registry.d.ts +1 -1
  69. package/dist/types/next/root-style-registry.d.ts.map +1 -1
  70. package/dist/types/runtimes/react/css-runtime/__tests__/runtime-integration/utils.d.ts +2 -1
  71. package/dist/types/runtimes/react/css-runtime/__tests__/runtime-integration/utils.d.ts.map +1 -1
  72. package/dist/types/runtimes/react/css-runtime/components/styles-context-provider.d.ts +2 -1
  73. package/dist/types/runtimes/react/css-runtime/components/styles-context-provider.d.ts.map +1 -1
  74. package/dist/types/runtimes/react/css-runtime/constants.d.ts +1 -0
  75. package/dist/types/runtimes/react/css-runtime/constants.d.ts.map +1 -1
  76. package/dist/types/runtimes/react/css-runtime/hooks/use-controlled-styles.d.ts.map +1 -1
  77. package/dist/types/runtimes/react/css-runtime/hooks/use-style.d.ts.map +1 -1
  78. package/dist/types/runtimes/react/css-runtime/serialize-css.d.ts +7 -3
  79. package/dist/types/runtimes/react/css-runtime/serialize-css.d.ts.map +1 -1
  80. package/dist/types/runtimes/react/css-runtime/stylesheet-engine.d.ts +3 -1
  81. package/dist/types/runtimes/react/css-runtime/stylesheet-engine.d.ts.map +1 -1
  82. package/dist/types/runtimes/react/root-style-registry.d.ts +12 -2
  83. package/dist/types/runtimes/react/root-style-registry.d.ts.map +1 -1
  84. package/dist/types/runtimes/react/server/components/element-data.d.ts.map +1 -1
  85. package/dist/types/testing/window.d.ts +9 -0
  86. package/dist/types/testing/window.d.ts.map +1 -0
  87. package/package.json +3 -3
@@ -34,6 +34,7 @@ function RootStyleRegistry({
34
34
  stylesRegistry,
35
35
  classNamePrefix = import_constants.DEFAULT_CSS_CLASS_NAME_PREFIX,
36
36
  enableCssReset = import_constants.DEFAULT_CSS_RESET_ENABLED,
37
+ forceImportant = import_constants.DEFAULT_CSS_FORCE_IMPORTANT,
37
38
  shouldRenderStyleElements = import_constants.DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS
38
39
  }) {
39
40
  (0, import_use_dynamic_browser_style_updates.useDynamicBrowserStyleUpdates)(stylesRegistry);
@@ -42,6 +43,7 @@ function RootStyleRegistry({
42
43
  {
43
44
  classNamePrefix,
44
45
  enableCssReset,
46
+ forceImportant,
45
47
  stylesRegistry,
46
48
  shouldRenderStyleElements,
47
49
  children
@@ -51,7 +53,8 @@ function RootStyleRegistry({
51
53
  function DefaultRootStyleRegistry({
52
54
  children,
53
55
  classNamePrefix,
54
- enableCssReset
56
+ enableCssReset,
57
+ forceImportant
55
58
  }) {
56
59
  const [stylesRegistry] = (0, import_react.useState)(import_utils.createMakeswiftStylesRegistry);
57
60
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -60,6 +63,7 @@ function DefaultRootStyleRegistry({
60
63
  stylesRegistry,
61
64
  classNamePrefix,
62
65
  enableCssReset,
66
+ forceImportant,
63
67
  children
64
68
  }
65
69
  );
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/runtimes/react/root-style-registry.tsx"],"sourcesContent":["'use client'\n\nimport { useState, type PropsWithChildren } from 'react'\nimport { StylesContextProvider } from './css-runtime/components/styles-context-provider'\nimport { StylesRegistry } from './css-runtime/styles-registry'\nimport { useDynamicBrowserStyleUpdates } from './css-runtime/hooks/use-dynamic-browser-style-updates'\nimport {\n DEFAULT_CSS_CLASS_NAME_PREFIX,\n DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n DEFAULT_CSS_RESET_ENABLED,\n} from './css-runtime/constants'\nimport { createMakeswiftStylesRegistry } from './css-runtime/utils'\n\nexport type RootStyleProps = {\n /**\n * The prefix used for generated class names.\n * If not provided, a default prefix will be used.\n */\n classNamePrefix?: string\n /**\n * Toggle the built-in CSS reset.\n * Set to `false` when using `@layer`-based CSS frameworks like Tailwind.\n */\n enableCssReset?: boolean\n}\n\nexport function RootStyleRegistry({\n children,\n stylesRegistry,\n classNamePrefix = DEFAULT_CSS_CLASS_NAME_PREFIX,\n enableCssReset = DEFAULT_CSS_RESET_ENABLED,\n shouldRenderStyleElements = DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n}: PropsWithChildren<{\n stylesRegistry: StylesRegistry\n classNamePrefix?: string\n enableCssReset?: boolean\n shouldRenderStyleElements?: boolean\n}>) {\n useDynamicBrowserStyleUpdates(stylesRegistry)\n\n return (\n <StylesContextProvider\n classNamePrefix={classNamePrefix}\n enableCssReset={enableCssReset}\n stylesRegistry={stylesRegistry}\n shouldRenderStyleElements={shouldRenderStyleElements}\n >\n {children}\n </StylesContextProvider>\n )\n}\n\nexport function DefaultRootStyleRegistry({\n children,\n classNamePrefix,\n enableCssReset,\n}: PropsWithChildren<RootStyleProps>) {\n const [stylesRegistry] = useState(createMakeswiftStylesRegistry)\n return (\n <RootStyleRegistry\n stylesRegistry={stylesRegistry}\n classNamePrefix={classNamePrefix}\n enableCssReset={enableCssReset}\n >\n {children}\n </RootStyleRegistry>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCI;AAvCJ,mBAAiD;AACjD,qCAAsC;AAEtC,+CAA8C;AAC9C,uBAIO;AACP,mBAA8C;AAevC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B,GAKI;AACF,8EAA8B,cAAc;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,CAAC,cAAc,QAAI,uBAAS,0CAA6B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../../../src/runtimes/react/root-style-registry.tsx"],"sourcesContent":["'use client'\n\nimport { useState, type PropsWithChildren } from 'react'\nimport { StylesContextProvider } from './css-runtime/components/styles-context-provider'\nimport { StylesRegistry } from './css-runtime/styles-registry'\nimport { useDynamicBrowserStyleUpdates } from './css-runtime/hooks/use-dynamic-browser-style-updates'\nimport {\n DEFAULT_CSS_CLASS_NAME_PREFIX,\n DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n DEFAULT_CSS_RESET_ENABLED,\n DEFAULT_CSS_FORCE_IMPORTANT,\n} from './css-runtime/constants'\nimport { createMakeswiftStylesRegistry } from './css-runtime/utils'\n\n/**\n * Style configuration must remain unchanged while the document is mounted.\n * Changing it during development may require a full page reload.\n */\nexport type RootStyleProps = {\n /**\n * The prefix used for generated class names.\n * If not provided, a default prefix will be used.\n */\n classNamePrefix?: string\n /**\n * Toggle the built-in CSS reset.\n * Set to `false` when using `@layer`-based CSS frameworks like Tailwind.\n */\n enableCssReset?: boolean\n /**\n * Append `!important` to Makeswift-generated style rule declarations to\n * increase their priority relative to external styles.\n */\n forceImportant?: boolean\n}\n\nexport function RootStyleRegistry({\n children,\n stylesRegistry,\n classNamePrefix = DEFAULT_CSS_CLASS_NAME_PREFIX,\n enableCssReset = DEFAULT_CSS_RESET_ENABLED,\n forceImportant = DEFAULT_CSS_FORCE_IMPORTANT,\n shouldRenderStyleElements = DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS,\n}: PropsWithChildren<{\n stylesRegistry: StylesRegistry\n classNamePrefix?: string\n enableCssReset?: boolean\n forceImportant?: boolean\n shouldRenderStyleElements?: boolean\n}>) {\n useDynamicBrowserStyleUpdates(stylesRegistry)\n\n return (\n <StylesContextProvider\n classNamePrefix={classNamePrefix}\n enableCssReset={enableCssReset}\n forceImportant={forceImportant}\n stylesRegistry={stylesRegistry}\n shouldRenderStyleElements={shouldRenderStyleElements}\n >\n {children}\n </StylesContextProvider>\n )\n}\n\nexport function DefaultRootStyleRegistry({\n children,\n classNamePrefix,\n enableCssReset,\n forceImportant,\n}: PropsWithChildren<RootStyleProps>) {\n const [stylesRegistry] = useState(createMakeswiftStylesRegistry)\n return (\n <RootStyleRegistry\n stylesRegistry={stylesRegistry}\n classNamePrefix={classNamePrefix}\n enableCssReset={enableCssReset}\n forceImportant={forceImportant}\n >\n {children}\n </RootStyleRegistry>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqDI;AAnDJ,mBAAiD;AACjD,qCAAsC;AAEtC,+CAA8C;AAC9C,uBAKO;AACP,mBAA8C;AAwBvC,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,4BAA4B;AAC9B,GAMI;AACF,8EAA8B,cAAc;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEO,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsC;AACpC,QAAM,CAAC,cAAc,QAAI,uBAAS,0CAA6B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}
@@ -59,6 +59,7 @@ async function ServerElementData({
59
59
  const stylesheet = new import_stylesheet_engine.StylesheetEngine({
60
60
  breakpointsData: (0, import_read_only_state.getBreakpoints)(state),
61
61
  classNamePrefix: context.rootStyleProps?.classNamePrefix,
62
+ forceImportant: context.rootStyleProps?.forceImportant,
62
63
  documentKey,
63
64
  elementKey: elementData.key,
64
65
  propPathComponents: [],
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../../../src/runtimes/react/server/components/element-data.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { partitionRecord } from '../../../../utils/partition'\n\nimport {\n type State,\n type ElementData,\n getReactComponent,\n getBreakpoints,\n getComponentPropControllerDescriptors,\n} from '../../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../../components/shared/FallbackComponent'\nimport { isLegacyDescriptor } from '../../../../prop-controllers/descriptors'\n\nimport { type ServerRenderContext, getStore } from '../render-context'\nimport { resolveProps } from '../resolve-props'\nimport { StylesheetEngine } from '../../css-runtime/stylesheet-engine'\nimport { type ControlledStyleData } from '../../css-runtime/types'\nimport { RSCEmittedStyle } from '../../css-runtime/components/rsc-emitted-style'\n\nexport async function ServerElementData({\n documentKey,\n context,\n elementData,\n injectedProps,\n}: {\n documentKey: string\n context: ServerRenderContext\n elementData: ElementData\n injectedProps: Record<string, unknown>\n}): Promise<ReactNode> {\n const state = getStore(context).getState()\n\n const Component = getReactComponent(state, elementData.type)\n if (Component == null) {\n return (\n <FallbackComponent\n text=\"Component not found\"\n details={`Unknown component '${elementData.type}'`}\n />\n )\n }\n\n const [legacyDescriptors, definitions] = getControlDefs(state, elementData)\n const legacyKeys = Object.keys(legacyDescriptors)\n if (legacyKeys.length > 0) {\n console.warn(`Unexpected legacy control data in server element '${elementData.key}`, {\n elementData,\n legacyKeys,\n })\n }\n\n const classStyleData = new Map<string, ControlledStyleData>()\n const stylesheet = new StylesheetEngine({\n breakpointsData: getBreakpoints(state),\n classNamePrefix: context.rootStyleProps?.classNamePrefix,\n documentKey,\n elementKey: elementData.key,\n propPathComponents: [],\n onDefineStyle: styleData => {\n const { onBoxModelChange, ...serializableStyleData } = styleData\n classStyleData.set(styleData.className, serializableStyleData)\n },\n })\n\n const props = {\n ...(await resolveProps(context, elementData, documentKey, definitions, stylesheet)),\n ...injectedProps,\n }\n\n const styleElements = Array.from(classStyleData, ([className, styleData]) => (\n <RSCEmittedStyle key={className} namespace={elementData.key} serializableData={styleData} />\n ))\n\n return (\n <>\n {/* Make the component the first child so that `findDOMNode` resolves to its first\n rendered DOM node (if any) rather than the component's `<style>` element */}\n <Component key={elementData.key} {...props} />\n {styleElements}\n </>\n )\n}\n\nconst getControlDefs = (state: State, elementData: ElementData) => {\n const descriptors = getComponentPropControllerDescriptors(state, elementData.type) ?? {}\n return partitionRecord(descriptors, isLegacyDescriptor)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCM;AAnCN,uBAAgC;AAEhC,6BAMO;AAEP,+BAAkC;AAClC,yBAAmC;AAEnC,4BAAmD;AACnD,2BAA6B;AAC7B,+BAAiC;AAEjC,+BAAgC;AAEhC,eAAsB,kBAAkB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,QAAM,YAAQ,gCAAS,OAAO,EAAE,SAAS;AAEzC,QAAM,gBAAY,0CAAkB,OAAO,YAAY,IAAI;AAC3D,MAAI,aAAa,MAAM;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,sBAAsB,YAAY,IAAI;AAAA;AAAA,IACjD;AAAA,EAEJ;AAEA,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,OAAO,WAAW;AAC1E,QAAM,aAAa,OAAO,KAAK,iBAAiB;AAChD,MAAI,WAAW,SAAS,GAAG;AACzB,YAAQ,KAAK,qDAAqD,YAAY,GAAG,IAAI;AAAA,MACnF;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,oBAAI,IAAiC;AAC5D,QAAM,aAAa,IAAI,0CAAiB;AAAA,IACtC,qBAAiB,uCAAe,KAAK;AAAA,IACrC,iBAAiB,QAAQ,gBAAgB;AAAA,IACzC;AAAA,IACA,YAAY,YAAY;AAAA,IACxB,oBAAoB,CAAC;AAAA,IACrB,eAAe,eAAa;AAC1B,YAAM,EAAE,kBAAkB,GAAG,sBAAsB,IAAI;AACvD,qBAAe,IAAI,UAAU,WAAW,qBAAqB;AAAA,IAC/D;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,GAAI,UAAM,mCAAa,SAAS,aAAa,aAAa,aAAa,UAAU;AAAA,IACjF,GAAG;AAAA,EACL;AAEA,QAAM,gBAAgB,MAAM,KAAK,gBAAgB,CAAC,CAAC,WAAW,SAAS,MACrE,4CAAC,4CAAgC,WAAW,YAAY,KAAK,kBAAkB,aAAzD,SAAoE,CAC3F;AAED,SACE,4EAGE;AAAA,gDAAC,aAAiC,GAAG,SAArB,YAAY,GAAgB;AAAA,IAC3C;AAAA,KACH;AAEJ;AAEA,MAAM,iBAAiB,CAAC,OAAc,gBAA6B;AACjE,QAAM,kBAAc,8DAAsC,OAAO,YAAY,IAAI,KAAK,CAAC;AACvF,aAAO,kCAAgB,aAAa,qCAAkB;AACxD;","names":[]}
1
+ {"version":3,"sources":["../../../../../../src/runtimes/react/server/components/element-data.tsx"],"sourcesContent":["import { type ReactNode } from 'react'\n\nimport { partitionRecord } from '../../../../utils/partition'\n\nimport {\n type State,\n type ElementData,\n getReactComponent,\n getBreakpoints,\n getComponentPropControllerDescriptors,\n} from '../../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../../components/shared/FallbackComponent'\nimport { isLegacyDescriptor } from '../../../../prop-controllers/descriptors'\n\nimport { type ServerRenderContext, getStore } from '../render-context'\nimport { resolveProps } from '../resolve-props'\nimport { StylesheetEngine } from '../../css-runtime/stylesheet-engine'\nimport { type ControlledStyleData } from '../../css-runtime/types'\nimport { RSCEmittedStyle } from '../../css-runtime/components/rsc-emitted-style'\n\nexport async function ServerElementData({\n documentKey,\n context,\n elementData,\n injectedProps,\n}: {\n documentKey: string\n context: ServerRenderContext\n elementData: ElementData\n injectedProps: Record<string, unknown>\n}): Promise<ReactNode> {\n const state = getStore(context).getState()\n\n const Component = getReactComponent(state, elementData.type)\n if (Component == null) {\n return (\n <FallbackComponent\n text=\"Component not found\"\n details={`Unknown component '${elementData.type}'`}\n />\n )\n }\n\n const [legacyDescriptors, definitions] = getControlDefs(state, elementData)\n const legacyKeys = Object.keys(legacyDescriptors)\n if (legacyKeys.length > 0) {\n console.warn(`Unexpected legacy control data in server element '${elementData.key}`, {\n elementData,\n legacyKeys,\n })\n }\n\n const classStyleData = new Map<string, ControlledStyleData>()\n const stylesheet = new StylesheetEngine({\n breakpointsData: getBreakpoints(state),\n classNamePrefix: context.rootStyleProps?.classNamePrefix,\n forceImportant: context.rootStyleProps?.forceImportant,\n documentKey,\n elementKey: elementData.key,\n propPathComponents: [],\n onDefineStyle: styleData => {\n const { onBoxModelChange, ...serializableStyleData } = styleData\n classStyleData.set(styleData.className, serializableStyleData)\n },\n })\n\n const props = {\n ...(await resolveProps(context, elementData, documentKey, definitions, stylesheet)),\n ...injectedProps,\n }\n\n const styleElements = Array.from(classStyleData, ([className, styleData]) => (\n <RSCEmittedStyle key={className} namespace={elementData.key} serializableData={styleData} />\n ))\n\n return (\n <>\n {/* Make the component the first child so that `findDOMNode` resolves to its first\n rendered DOM node (if any) rather than the component's `<style>` element */}\n <Component key={elementData.key} {...props} />\n {styleElements}\n </>\n )\n}\n\nconst getControlDefs = (state: State, elementData: ElementData) => {\n const descriptors = getComponentPropControllerDescriptors(state, elementData.type) ?? {}\n return partitionRecord(descriptors, isLegacyDescriptor)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqCM;AAnCN,uBAAgC;AAEhC,6BAMO;AAEP,+BAAkC;AAClC,yBAAmC;AAEnC,4BAAmD;AACnD,2BAA6B;AAC7B,+BAAiC;AAEjC,+BAAgC;AAEhC,eAAsB,kBAAkB;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKuB;AACrB,QAAM,YAAQ,gCAAS,OAAO,EAAE,SAAS;AAEzC,QAAM,gBAAY,0CAAkB,OAAO,YAAY,IAAI;AAC3D,MAAI,aAAa,MAAM;AACrB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS,sBAAsB,YAAY,IAAI;AAAA;AAAA,IACjD;AAAA,EAEJ;AAEA,QAAM,CAAC,mBAAmB,WAAW,IAAI,eAAe,OAAO,WAAW;AAC1E,QAAM,aAAa,OAAO,KAAK,iBAAiB;AAChD,MAAI,WAAW,SAAS,GAAG;AACzB,YAAQ,KAAK,qDAAqD,YAAY,GAAG,IAAI;AAAA,MACnF;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,QAAM,iBAAiB,oBAAI,IAAiC;AAC5D,QAAM,aAAa,IAAI,0CAAiB;AAAA,IACtC,qBAAiB,uCAAe,KAAK;AAAA,IACrC,iBAAiB,QAAQ,gBAAgB;AAAA,IACzC,gBAAgB,QAAQ,gBAAgB;AAAA,IACxC;AAAA,IACA,YAAY,YAAY;AAAA,IACxB,oBAAoB,CAAC;AAAA,IACrB,eAAe,eAAa;AAC1B,YAAM,EAAE,kBAAkB,GAAG,sBAAsB,IAAI;AACvD,qBAAe,IAAI,UAAU,WAAW,qBAAqB;AAAA,IAC/D;AAAA,EACF,CAAC;AAED,QAAM,QAAQ;AAAA,IACZ,GAAI,UAAM,mCAAa,SAAS,aAAa,aAAa,aAAa,UAAU;AAAA,IACjF,GAAG;AAAA,EACL;AAEA,QAAM,gBAAgB,MAAM,KAAK,gBAAgB,CAAC,CAAC,WAAW,SAAS,MACrE,4CAAC,4CAAgC,WAAW,YAAY,KAAK,kBAAkB,aAAzD,SAAoE,CAC3F;AAED,SACE,4EAGE;AAAA,gDAAC,aAAiC,GAAG,SAArB,YAAY,GAAgB;AAAA,IAC3C;AAAA,KACH;AAEJ;AAEA,MAAM,iBAAiB,CAAC,OAAc,gBAA6B;AACjE,QAAM,kBAAc,8DAAsC,OAAO,YAAY,IAAI,KAAK,CAAC;AACvF,aAAO,kCAAgB,aAAa,qCAAkB;AACxD;","names":[]}
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+ var window_exports = {};
20
+ __export(window_exports, {
21
+ windowMocks: () => windowMocks
22
+ });
23
+ module.exports = __toCommonJS(window_exports);
24
+ function mockPostMessage() {
25
+ const postMessageMock = jest.spyOn(window, "postMessage").mockImplementation(() => {
26
+ });
27
+ const originalMessageChannel = window.MessageChannel;
28
+ const stubPort = () => ({ onmessage: null, postMessage: () => {
29
+ }, close: () => {
30
+ } });
31
+ window.MessageChannel = class {
32
+ port1 = stubPort();
33
+ port2 = stubPort();
34
+ };
35
+ return {
36
+ mock: postMessageMock,
37
+ restore: () => {
38
+ postMessageMock.mockRestore();
39
+ window.MessageChannel = originalMessageChannel;
40
+ }
41
+ };
42
+ }
43
+ const windowMocks = {
44
+ mockPostMessage
45
+ };
46
+ // Annotate the CommonJS export names for ESM import in node:
47
+ 0 && (module.exports = {
48
+ windowMocks
49
+ });
50
+ //# sourceMappingURL=window.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../src/testing/window.ts"],"sourcesContent":["/*\n * Mock `window.postMessage` together with `MessageChannel`\n */\nfunction mockPostMessage(): { mock: jest.SpyInstance; restore: () => void } {\n const postMessageMock = jest.spyOn(window, 'postMessage').mockImplementation(() => {})\n\n const originalMessageChannel = window.MessageChannel\n const stubPort = () => ({ onmessage: null, postMessage: () => {}, close: () => {} })\n window.MessageChannel = class {\n port1 = stubPort()\n port2 = stubPort()\n } as unknown as typeof MessageChannel\n\n return {\n mock: postMessageMock,\n restore: () => {\n postMessageMock.mockRestore()\n window.MessageChannel = originalMessageChannel\n },\n }\n}\n\nexport const windowMocks = {\n mockPostMessage,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,SAAS,kBAAmE;AAC1E,QAAM,kBAAkB,KAAK,MAAM,QAAQ,aAAa,EAAE,mBAAmB,MAAM;AAAA,EAAC,CAAC;AAErF,QAAM,yBAAyB,OAAO;AACtC,QAAM,WAAW,OAAO,EAAE,WAAW,MAAM,aAAa,MAAM;AAAA,EAAC,GAAG,OAAO,MAAM;AAAA,EAAC,EAAE;AAClF,SAAO,iBAAiB,MAAM;AAAA,IAC5B,QAAQ,SAAS;AAAA,IACjB,QAAQ,SAAS;AAAA,EACnB;AAEA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS,MAAM;AACb,sBAAgB,YAAY;AAC5B,aAAO,iBAAiB;AAAA,IAC1B;AAAA,EACF;AACF;AAEO,MAAM,cAAc;AAAA,EACzB;AACF;","names":[]}
@@ -4,7 +4,7 @@ class MakeswiftGraphQLApiClient {
4
4
  graphqlClient;
5
5
  constructor({ endpoint }) {
6
6
  this.graphqlClient = new GraphQLClient(endpoint, {
7
- "makeswift-runtime-version": "0.29.0-canary.22"
7
+ "makeswift-runtime-version": "0.29.0-canary.23"
8
8
  });
9
9
  }
10
10
  async getUnversionedResources({
@@ -188,7 +188,7 @@ class MakeswiftRestAPIClient {
188
188
  const requestHeaders = new Headers({
189
189
  "x-api-key": this.apiKey,
190
190
  "makeswift-site-api-key": this.apiKey,
191
- "makeswift-runtime-version": "0.29.0-canary.22"
191
+ "makeswift-runtime-version": "0.29.0-canary.23"
192
192
  });
193
193
  if (siteVersion?.token) {
194
194
  requestUrl.searchParams.set("version", siteVersion.version);
@@ -8,7 +8,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
8
8
  return ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
9
9
  }
10
10
  return ApiResponse.json({
11
- version: "0.29.0-canary.22",
11
+ version: "0.29.0-canary.23",
12
12
  interactionMode: true,
13
13
  clientSideNavigation: false,
14
14
  elementFromPoint: false,
@@ -9,6 +9,7 @@ import { MakeswiftComponent } from "../../../../runtimes/react/components/Makesw
9
9
  import { Page } from "../../page";
10
10
  import { isServer } from "../../../../utils/is-server";
11
11
  import { renderToString } from "../../../../runtimes/react/testing/render-to-string";
12
+ import { windowMocks } from "../../../../testing/window";
12
13
  import * as Testing from "../../../testing";
13
14
  const ROOT_ID = "00000000-0000-0000-0000-000000000000";
14
15
  const ELEMENT_ID = "11111111-1111-1111-1111-111111111111";
@@ -29,22 +30,6 @@ async function serverSideRender(children) {
29
30
  );
30
31
  return dom.window.document;
31
32
  }
32
- function stubBuilderMessageChannel() {
33
- const postMessageSpy = jest.spyOn(window, "postMessage").mockImplementation(() => {
34
- });
35
- const originalMessageChannel = window.MessageChannel;
36
- const stubPort = () => ({ onmessage: null, postMessage: () => {
37
- }, close: () => {
38
- } });
39
- window.MessageChannel = class {
40
- port1 = stubPort();
41
- port2 = stubPort();
42
- };
43
- return () => {
44
- postMessageSpy.mockRestore();
45
- window.MessageChannel = originalMessageChannel;
46
- };
47
- }
48
33
  async function testPageControlPropRendering(controlDefinition, {
49
34
  toData,
50
35
  value,
@@ -95,7 +80,7 @@ async function testPageControlPropRendering(controlDefinition, {
95
80
  return /* @__PURE__ */ jsx(Testing.ReactProvider, { runtime, siteVersion, children: component });
96
81
  };
97
82
  if (!isServer()) {
98
- const restoreMessageChannel = isReadOnly ? null : stubBuilderMessageChannel();
83
+ const postMessageMock = windowMocks.mockPostMessage();
99
84
  const rootElementData = Testing.createRootComponent(
100
85
  [elementData, ...rootElements],
101
86
  ROOT_ID
@@ -112,7 +97,7 @@ async function testPageControlPropRendering(controlDefinition, {
112
97
  if (expectedRenders != null) {
113
98
  expect(Number(screen.getByTestId(renderCountTestId).textContent)).toBe(expectedRenders);
114
99
  }
115
- restoreMessageChannel?.();
100
+ postMessageMock.restore();
116
101
  } else {
117
102
  console.assert(action == null);
118
103
  console.assert(rootElements.length === 0);
@@ -1 +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":[]}
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 { 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":[]}
@@ -52,7 +52,8 @@ function InnerRootStyleRegistry({
52
52
  const outerStylesContext = useContext(StylesContext);
53
53
  const outerStylesProps = {
54
54
  classNamePrefix: outerStylesContext?.classNamePrefix,
55
- enableCssReset: outerStylesContext?.enableCssReset
55
+ enableCssReset: outerStylesContext?.enableCssReset,
56
+ forceImportant: outerStylesContext?.forceImportant
56
57
  };
57
58
  return /* @__PURE__ */ jsx(
58
59
  RootStyleRegistry,
@@ -1 +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":[]}
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 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":[]}
@@ -6,9 +6,18 @@ import {
6
6
  function NextRootStyleRegistry({
7
7
  children,
8
8
  classNamePrefix,
9
- enableCssReset
9
+ enableCssReset,
10
+ forceImportant
10
11
  }) {
11
- return /* @__PURE__ */ jsx(ReactRootStyleRegistry, { classNamePrefix, enableCssReset, children });
12
+ return /* @__PURE__ */ jsx(
13
+ ReactRootStyleRegistry,
14
+ {
15
+ classNamePrefix,
16
+ enableCssReset,
17
+ forceImportant,
18
+ children
19
+ }
20
+ );
12
21
  }
13
22
  export {
14
23
  NextRootStyleRegistry
@@ -1 +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":[]}
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 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":[]}
@@ -6,6 +6,7 @@ function StylesContextProvider({
6
6
  children,
7
7
  classNamePrefix,
8
8
  enableCssReset,
9
+ forceImportant,
9
10
  stylesRegistry,
10
11
  shouldRenderStyleElements
11
12
  }) {
@@ -15,6 +16,7 @@ function StylesContextProvider({
15
16
  value: {
16
17
  classNamePrefix,
17
18
  enableCssReset,
19
+ forceImportant,
18
20
  stylesRegistry,
19
21
  shouldRenderStyleElements
20
22
  },
@@ -1 +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":[]}
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 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":[]}
@@ -1,10 +1,12 @@
1
1
  import { MakeswiftStylePrecedence } from "./types";
2
2
  const DEFAULT_CSS_CLASS_NAME_PREFIX = "ms";
3
3
  const DEFAULT_CSS_RESET_ENABLED = true;
4
+ const DEFAULT_CSS_FORCE_IMPORTANT = false;
4
5
  const DEFAULT_CSS_PRECEDENCE = MakeswiftStylePrecedence.MEDIUM;
5
6
  const DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS = true;
6
7
  export {
7
8
  DEFAULT_CSS_CLASS_NAME_PREFIX,
9
+ DEFAULT_CSS_FORCE_IMPORTANT,
8
10
  DEFAULT_CSS_PRECEDENCE,
9
11
  DEFAULT_CSS_RESET_ENABLED,
10
12
  DEFAULT_SHOULD_RENDER_STYLE_ELEMENTS
@@ -1 +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":[]}
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_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":[]}
@@ -4,11 +4,11 @@ import { MakeswiftStylePrecedence } from "../types";
4
4
  import React from "react";
5
5
  import { MakeswiftStyle } from "../components/makeswift-style";
6
6
  function useBaseStyles({ styles }) {
7
- const { stylesRegistry } = useStylesContext();
7
+ const { forceImportant, stylesRegistry } = useStylesContext();
8
8
  const { content: rawContent, contentHash } = toRawCss([styles]);
9
9
  let styleData = stylesRegistry.getBaseStyles().get(contentHash);
10
10
  if (styleData == null) {
11
- const css = processCss({ content: rawContent });
11
+ const css = processCss({ content: rawContent, forceImportant });
12
12
  styleData = {
13
13
  css,
14
14
  cssObject: styles,
@@ -1 +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":[]}
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 { 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":[]}
@@ -4,7 +4,7 @@ import { useStylesContext } from "./use-styles-context";
4
4
  import { StylesheetEngine } from "../stylesheet-engine";
5
5
  import { useDocumentKey } from "../../hooks/use-document-context";
6
6
  function useControlledStyles({ namespace }) {
7
- const { classNamePrefix, stylesRegistry } = useStylesContext();
7
+ const { classNamePrefix, forceImportant, stylesRegistry } = useStylesContext();
8
8
  const documentKey = useDocumentKey();
9
9
  if (documentKey == null) {
10
10
  throw new Error("Root document key not found when attempting to use controlled styles");
@@ -26,10 +26,11 @@ function useControlledStyles({ namespace }) {
26
26
  elementKey,
27
27
  propPathComponents,
28
28
  onDefineStyle,
29
- classNamePrefix
29
+ classNamePrefix,
30
+ forceImportant
30
31
  });
31
32
  },
32
- [classNamePrefix, stylesRegistry, namespace, documentKey]
33
+ [classNamePrefix, forceImportant, stylesRegistry, namespace, documentKey]
33
34
  );
34
35
  const styleElements = React.createElement(ControlledStyles, {
35
36
  classNameToStyles: stylesRegistry.getControlledStyles(namespace)
@@ -1 +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":[]}
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, 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":[]}
@@ -4,26 +4,23 @@ import { MakeswiftStylePrecedence } from "../types";
4
4
  import { MakeswiftStyle } from "../components/makeswift-style";
5
5
  import React from "react";
6
6
  function useCssReset({ styles }) {
7
- const { enableCssReset, stylesRegistry } = useStylesContext();
7
+ const { enableCssReset, forceImportant, stylesRegistry } = useStylesContext();
8
8
  if (!enableCssReset)
9
9
  return { styleElement: null };
10
10
  const { content: rawContent, contentHash } = toRawCss(styles);
11
11
  let styleData = stylesRegistry.getCssResets().get(contentHash);
12
12
  if (styleData == null) {
13
- const css2 = processCss({ content: rawContent });
14
13
  styleData = {
15
- css: css2,
14
+ css: processCss({ content: rawContent, forceImportant }),
16
15
  cssObjects: styles,
17
16
  contentHash
18
17
  };
19
18
  stylesRegistry.setCssReset(styleData);
20
19
  }
21
- const css = processCss({ content: rawContent });
22
- const href = `makeswift-css-reset-${contentHash}`;
23
20
  const styleElement = React.createElement(MakeswiftStyle, {
24
21
  key: contentHash,
25
- href,
26
- css,
22
+ href: `makeswift-css-reset-${contentHash}`,
23
+ css: styleData.css,
27
24
  precedence: MakeswiftStylePrecedence.RESET
28
25
  });
29
26
  return {
@@ -1 +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"]}
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, 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":[]}
@@ -5,7 +5,7 @@ import { ControlledStyles } from "../components/controlled-styles";
5
5
  import { toCssStatements } from "../serialize-css";
6
6
  import { useDocumentKey } from "../../hooks/use-document-context";
7
7
  function useLegacyControlledStyle(style, elementKey, propName) {
8
- const { classNamePrefix, stylesRegistry } = useStylesContext();
8
+ const { classNamePrefix, forceImportant, stylesRegistry } = useStylesContext();
9
9
  const documentKey = useDocumentKey();
10
10
  if (documentKey == null) {
11
11
  throw new Error("Root document key not found when attempting to use legacy controlled styles");
@@ -15,7 +15,7 @@ function useLegacyControlledStyle(style, elementKey, propName) {
15
15
  data: `${documentKey}-${elementKey}-${propName}`,
16
16
  classNamePrefix
17
17
  });
18
- const { css, contentHash } = toCssStatements(style, className);
18
+ const { css, contentHash } = toCssStatements(style, className, { forceImportant });
19
19
  const data = {
20
20
  className,
21
21
  css,
@@ -1 +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":[]}
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, 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":[]}
@@ -5,14 +5,15 @@ import { useStylesContext } from "./use-styles-context";
5
5
  import { toCssStatements } from "../serialize-css";
6
6
  import { MakeswiftStyle } from "../components/makeswift-style";
7
7
  function useStyle(style) {
8
- const { classNamePrefix, stylesRegistry } = useStylesContext();
8
+ const { classNamePrefix, forceImportant, stylesRegistry } = useStylesContext();
9
+ const serializedStyle = JSON.stringify(style);
9
10
  const className = generateClassName({
10
- data: JSON.stringify(style),
11
+ data: forceImportant ? `${serializedStyle}-important` : serializedStyle,
11
12
  classNamePrefix
12
13
  });
13
14
  let styleData = stylesRegistry.getUncontrolledClassStyles().get(className);
14
15
  if (styleData == null) {
15
- const { css } = toCssStatements(style, className);
16
+ const { css } = toCssStatements(style, className, { forceImportant });
16
17
  styleData = {
17
18
  className,
18
19
  css,
@@ -1 +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":[]}
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, 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":[]}