Fix faux ESM yoga-layout import

packages/layout/src/image/measureImage.js

@@ -1,10 +1,14 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import getRatio from './getRatio';
 import getMargin from '../node/getMargin';
 import getPadding from '../node/getPadding';
 import isHeightAuto from '../page/isHeightAuto';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 const SAFETY_HEIGHT = 10;
 
 /**

packages/layout/src/node/getBorderWidth.js

@@ -1,4 +1,8 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
+
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
 
 const getComputedBorder = (yogaNode, edge) =>
   yogaNode ? yogaNode.getComputedBorder(edge) : 0;

packages/layout/src/node/getMargin.js

@@ -1,4 +1,8 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
+
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
 
 const getComputedMargin = (node, edge) => {
   const { yogaNode } = node;

packages/layout/src/node/getPadding.js

@@ -1,4 +1,8 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
+
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
 
 const getComputedPadding = (node, edge) => {
   const { yogaNode } = node;

packages/layout/src/node/setAlign.js

@@ -1,6 +1,11 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
+
 import { upperFirst } from '@react-pdf/fns';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 const ALIGN = {
   'flex-start': Yoga.ALIGN_FLEX_START,
   center: Yoga.ALIGN_CENTER,

packages/layout/src/node/setBorderWidth.js

@@ -1,7 +1,11 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import setYogaValue from './setYogaValue';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 /**
  * Set border top attribute to node's Yoga instance
  *

packages/layout/src/node/setDisplay.js

@@ -1,4 +1,8 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
+
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
 
 /**
  * Set display attribute to node's Yoga instance

packages/layout/src/node/setFlexDirection.js

@@ -1,4 +1,8 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
+
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
 
 const FLEX_DIRECTIONS = {
   row: Yoga.FLEX_DIRECTION_ROW,

packages/layout/src/node/setFlexWrap.js

@@ -1,4 +1,8 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
+
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
 
 const FLEX_WRAP = {
   wrap: Yoga.WRAP_WRAP,

packages/layout/src/node/setGap.js

@@ -1,6 +1,11 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
+
 import { isNil, matchPercent } from '@react-pdf/fns';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 const checkPercents = (attr, value) => {
   const percent = matchPercent(value);
 

packages/layout/src/node/setJustifyContent.js

@@ -1,6 +1,11 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
+
 import { isNil } from '@react-pdf/fns';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 const JUSTIFY_CONTENT = {
   center: Yoga.JUSTIFY_CENTER,
   'flex-end': Yoga.JUSTIFY_FLEX_END,

packages/layout/src/node/setMargin.js

@@ -1,7 +1,11 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import setYogaValue from './setYogaValue';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 /**
  * Set margin top attribute to node's Yoga instance
  *

packages/layout/src/node/setOverflow.js

@@ -1,6 +1,11 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
+
 import { isNil } from '@react-pdf/fns';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 const OVERFLOW = {
   hidden: Yoga.OVERFLOW_HIDDEN,
   scroll: Yoga.OVERFLOW_SCROLL,

packages/layout/src/node/setPadding.js

@@ -1,7 +1,11 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import setYogaValue from './setYogaValue';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 /**
  * Set padding top attribute to node's Yoga instance
  *

packages/layout/src/node/setPosition.js

@@ -1,7 +1,11 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import setYogaValue from './setYogaValue';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 /**
  * Set position top attribute to node's Yoga instance
  *

packages/layout/src/node/setPositionType.js

@@ -1,6 +1,11 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
+
 import { isNil } from '@react-pdf/fns';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 /**
  * Set position type attribute to node's Yoga instance
  *

packages/layout/src/steps/resolveDimensions.js

@@ -1,4 +1,4 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 import * as P from '@react-pdf/primitives';
 import { isNil, compose } from '@react-pdf/fns';
 
@@ -58,6 +58,10 @@ import measureText from '../text/measureText';
 import measureImage from '../image/measureImage';
 import measureCanvas from '../canvas/measureCanvas';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 const YOGA_CONFIG = Yoga.Config.create();
 
 YOGA_CONFIG.setPointScaleFactor(0);

packages/layout/src/svg/measureSvg.js

@@ -1,4 +1,8 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
+
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
 
 const getAspectRatio = viewbox => {
   if (!viewbox) return null;

packages/layout/src/text/measureText.js

@@ -1,11 +1,15 @@
 /* eslint-disable no-param-reassign */
 
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import layoutText from './layoutText';
 import linesWidth from './linesWidth';
 import linesHeight from './linesHeight';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 const ALIGNMENT_FACTORS = { center: 0.5, right: 1 };
 
 /**

packages/layout/tests/node/getBorderWidth.test.js

@@ -1,7 +1,11 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import getBorderWidth from '../../src/node/getBorderWidth';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 const getComputedBorder = value => {
   if (value === Yoga.EDGE_TOP) return 1;
   if (value === Yoga.EDGE_RIGHT) return 2;

packages/layout/tests/node/getMargin.test.js

@@ -1,7 +1,11 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import getMargin from '../../src/node/getMargin';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 const getComputedMargin = value => {
   if (value === Yoga.EDGE_TOP) return 1;
   if (value === Yoga.EDGE_RIGHT) return 2;

packages/layout/tests/node/getPadding.test.js

@@ -1,7 +1,11 @@
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import getPadding from '../../src/node/getPadding';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 const getComputedPadding = value => {
   if (value === Yoga.EDGE_TOP) return 1;
   if (value === Yoga.EDGE_RIGHT) return 2;

packages/layout/tests/node/setAlignContent.test.js

@@ -1,8 +1,12 @@
 import { jest } from '@jest/globals';
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import setAlignContent from '../../src/node/setAlignContent';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 describe('node setAlignContent', () => {
   const mock = jest.fn();
   const node = { yogaNode: { setAlignContent: mock } };

packages/layout/tests/node/setAlignItems.test.js

@@ -1,8 +1,12 @@
 import { jest } from '@jest/globals';
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import setAlignItems from '../../src/node/setAlignItems';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 describe('node setAlignItems', () => {
   const mock = jest.fn();
   const node = { yogaNode: { setAlignItems: mock } };

packages/layout/tests/node/setAlignSelf.test.js

@@ -1,8 +1,12 @@
 import { jest } from '@jest/globals';
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import setAlignSelf from '../../src/node/setAlignSelf';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 describe('node setAlignSelf', () => {
   const mock = jest.fn();
   const node = { yogaNode: { setAlignSelf: mock } };

packages/layout/tests/node/setBorderWidth.test.js

@@ -1,5 +1,5 @@
 import { jest } from '@jest/globals';
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import setBorder, {
   setBorderTop,
@@ -8,6 +8,10 @@ import setBorder, {
   setBorderLeft,
 } from '../../src/node/setBorderWidth';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 describe('node setBorderWidth', () => {
   const mock = jest.fn();
   const node = { yogaNode: { setBorder: mock } };

packages/layout/tests/node/setDisplay.test.js

@@ -1,8 +1,12 @@
 import { jest } from '@jest/globals';
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import setDisplay from '../../src/node/setDisplay';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 describe('node setDisplay', () => {
   const mock = jest.fn();
   const node = { yogaNode: { setDisplay: mock } };

packages/layout/tests/node/setFlexDirection.test.js

@@ -1,8 +1,12 @@
 import { jest } from '@jest/globals';
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import setFlexDirection from '../../src/node/setFlexDirection';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 describe('node setFlexDirection', () => {
   const mock = jest.fn();
   const node = { yogaNode: { setFlexDirection: mock } };

packages/layout/tests/node/setFlexWrap.test.js

@@ -1,8 +1,12 @@
 import { jest } from '@jest/globals';
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import setFlexWrap from '../../src/node/setFlexWrap';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 describe('node setFlexWrap', () => {
   const mock = jest.fn();
   const node = { yogaNode: { setFlexWrap: mock } };

packages/layout/tests/node/setJustifyContent.test.js

@@ -1,8 +1,12 @@
 import { jest } from '@jest/globals';
-import Yoga from 'yoga-layout/sync';
+import yogaModule from 'yoga-layout/sync';
 
 import setJustifyContent from '../../src/node/setJustifyContent';
 
+// yoga-layout sets default export using non-standard __esModule property, so we need to
+// make an additional check in case it's used in a bundler that does not support it.
+const Yoga = 'default' in yogaModule ? yogaModule.default : yogaModule;
+
 describe('node setJustifyContent', () => {
   const mock = jest.fn();
   const node = { yogaNode: { setJustifyContent: mock } };