@mochi-inc-japan/react-native-stylex-sheet 1.0.0

package/lib/module/tests/index.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["render","React","StyleSheet","View","stylex","finalStyle","reduceStyles","describe","it","styles","create","view","backgroundColor","height","width","style","props","expect","toMatchObject","_toJSON","view2","Comp","createElement","toJSON","sameArgs","orgStyles","vars","defineVars","colors","default","primary","secondary","sizes","small","medium","variants","createVariants","var1","var2","length","toBe","mix","shape","borderRadius","round","square","test","fontSize","themes","createThemes","borderBlockColor","light","dark","sx","useStylex","outputStyle","theme","RNStyleXProvider"],"sources":["index.test.tsx"],"sourcesContent":["import { render } from '@testing-library/react-native';\nimport React from 'react';\nimport { StyleSheet, View } from 'react-native';\n\nimport * as stylex from '../';\nimport { Variants } from '../utils/types';\nimport { finalStyle, reduceStyles } from './test-utils';\n\n// ---------------------------------------------------------------------------\n// Basic\n// ---------------------------------------------------------------------------\n\ndescribe('Basic', () => {\n  it('create() + props() returns base styles', () => {\n    const styles = stylex.create({\n      view: {\n        backgroundColor: 'red',\n        height: 100,\n        width: 100,\n      },\n    });\n\n    const { style } = stylex.props(styles.view);\n    expect(style[0]).toMatchObject({\n      backgroundColor: 'red',\n      height: 100,\n      width: 100,\n    });\n  });\n\n  it('stylex.props() renders base styles', () => {\n    const styles = stylex.create({\n      view: { backgroundColor: 'red', height: 100, width: 100 },\n      view2: { height: 200, width: 200 },\n    });\n\n    function Comp() {\n      return <View {...stylex.props(styles.view, styles.view2)} />;\n    }\n    const { toJSON } = render(<Comp />);\n    expect(toJSON()?.props.style[1]).toMatchObject({\n      height: 200,\n      width: 200,\n    });\n  });\n\n  it('stylex.props() has backward compatibility on StyleSheet', () => {\n    const sameArgs = {\n      view: { backgroundColor: 'red', height: 100, width: 100 },\n      view2: { height: 200, width: 200 },\n    };\n    const styles = stylex.create(sameArgs);\n\n    const orgStyles = StyleSheet.create(sameArgs);\n\n    expect(stylex.props(styles.view, styles.view2).style).toMatchObject([\n      orgStyles.view,\n      orgStyles.view2,\n    ]);\n  });\n});\n\n// ---------------------------------------------------------------------------\n// Variants\n// ---------------------------------------------------------------------------\n\ndescribe('Variants', () => {\n  it('variants are applied correctly', () => {\n    const vars = stylex.defineVars({\n      colors: {\n        default: 'white',\n        primary: 'red',\n        secondary: 'blue',\n      },\n      sizes: {\n        default: 10,\n        small: 5,\n        medium: 15,\n      },\n    });\n\n    const variants = stylex.createVariants({\n      var1: {\n        backgroundColor: vars.colors,\n      },\n      var2: {\n        width: vars.sizes,\n      },\n    });\n\n    const styles = stylex.create({\n      view: {\n        backgroundColor: variants.var1.backgroundColor,\n        width: variants.var2.width,\n      },\n    });\n\n    expect(stylex.props(styles.view).style[0]).toMatchObject({\n      backgroundColor: 'white',\n      width: 10,\n    });\n\n    expect(stylex.props(styles.view).style.length).toBe(1);\n\n    expect(\n      stylex.props(\n        stylex.mix<Variants<typeof variants>>(styles.view, {\n          var1: 'primary',\n          var2: 'medium',\n        })\n      ).style\n    ).toMatchObject([\n      {\n        backgroundColor: 'white',\n        width: 10,\n      },\n      {\n        backgroundColor: 'red',\n      },\n      {\n        width: 15,\n      },\n    ]);\n  });\n\n  it('multiple style have same variant value is applied correctly', () => {\n    const variants = stylex.createVariants({\n      shape: {\n        borderRadius: {\n          default: 4,\n          round: 8,\n          square: 0,\n          test: 1,\n        },\n        fontSize: {\n          default: 14,\n          round: 16,\n          square: 18,\n        },\n      },\n    });\n    const styles = stylex.create({\n      view: {\n        ...variants.shape,\n      },\n    });\n\n    expect(\n      reduceStyles(\n        stylex.props(\n          stylex.mix<Variants<typeof variants>>(styles.view, {\n            shape: 'round',\n          })\n        ).style\n      )\n    ).toMatchObject({ borderRadius: 8, fontSize: 16 });\n    expect(\n      reduceStyles(\n        stylex.props(\n          stylex.mix<Variants<typeof variants>>(styles.view, {\n            shape: 'test',\n          })\n        ).style\n      )\n    ).toMatchObject({ borderRadius: 1, fontSize: 14 });\n  });\n});\n\n// ---------------------------------------------------------------------------\n// Theme queries\n// ---------------------------------------------------------------------------\n\ndescribe('Theme', () => {\n  it('theme usage implicitly', () => {\n    const { themes } = stylex.createThemes(['light', 'dark']);\n    const styles = stylex.create({\n      view: {\n        borderBlockColor: {\n          default: 'black',\n          [themes.light]: 'white',\n          [themes.dark]: 'gray',\n        },\n      },\n    });\n\n    function Comp() {\n      const sx = stylex.useStylex();\n      return <View {...sx.props(styles.view)} />;\n    }\n\n    const outputStyle = (theme: keyof typeof themes) => {\n      return finalStyle(\n        <stylex.RNStyleXProvider theme={themes[theme]}>\n          <Comp />\n        </stylex.RNStyleXProvider>\n      );\n    };\n\n    expect(outputStyle('light')).toMatchObject({\n      borderBlockColor: 'white',\n    });\n    expect(outputStyle('dark')).toMatchObject({\n      borderBlockColor: 'gray',\n    });\n  });\n\n  it('theme usage implicitly', () => {\n    const { themes } = stylex.createThemes(['light', 'dark']);\n    const styles = stylex.create({\n      view: {\n        borderBlockColor: {\n          default: 'black',\n          [themes.light]: 'white',\n          [themes.dark]: 'gray',\n        },\n      },\n    });\n\n    function Comp() {\n      const sx = stylex.useStylex();\n      return <View {...sx.props(sx.mix(styles.view))} />;\n    }\n\n    const outputStyle = (theme: keyof typeof themes) => {\n      return finalStyle(\n        <stylex.RNStyleXProvider theme={themes[theme]}>\n          <Comp />\n        </stylex.RNStyleXProvider>\n      );\n    };\n\n    expect(outputStyle('light')).toMatchObject({\n      borderBlockColor: 'white',\n    });\n    expect(outputStyle('dark')).toMatchObject({\n      borderBlockColor: 'gray',\n    });\n  });\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/module/tests/media.test.js

@@ -0,0 +1,222 @@
+import React from 'react';
+import { View } from 'react-native';
+import * as stylex from '../';
+import { mockDimensions, finalStyle } from './test-utils';
+
+// ---------------------------------------------------------------------------
+// Media queries
+// ---------------------------------------------------------------------------
+
+describe('Media', () => {
+  it('single media queries default', () => {
+    const media = stylex.defineConsts({
+      md: '(width >= 750px)',
+      lg: '(width >= 1080px)'
+    });
+    const styles = stylex.create({
+      view: {
+        backgroundColor: {
+          default: 'yellow',
+          [media.md]: 'blue',
+          [media.lg]: 'green'
+        }
+      }
+    });
+    function Comp() {
+      const sx = stylex.useStylex();
+      return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.view)));
+    }
+    mockDimensions({
+      width: 640
+    });
+    expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
+      backgroundColor: 'yellow'
+    });
+  });
+  it('usage from hooks implicitly', () => {
+    const media = stylex.defineConsts({
+      md: '(width >= 750px)',
+      lg: '(width >= 1080px)'
+    });
+    const styles = stylex.create({
+      view: {
+        backgroundColor: {
+          default: 'yellow',
+          [media.md]: 'blue',
+          [media.lg]: 'green'
+        }
+      }
+    });
+    function Comp() {
+      const sx = stylex.useStylex();
+      return /*#__PURE__*/React.createElement(View, sx.props(styles.view));
+    }
+    mockDimensions({
+      width: 750
+    });
+    expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
+      backgroundColor: 'blue'
+    });
+  });
+  it('single media queries md', () => {
+    const media = stylex.defineConsts({
+      md: '(width >= 750px)',
+      lg: '(width >= 1080px)'
+    });
+    const styles = stylex.create({
+      view: {
+        backgroundColor: {
+          default: 'yellow',
+          [media.md]: 'blue',
+          [media.lg]: 'green'
+        }
+      }
+    });
+    function Comp() {
+      const sx = stylex.useStylex();
+      return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.view)));
+    }
+    mockDimensions({
+      width: 750
+    });
+    expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
+      backgroundColor: 'blue'
+    });
+  });
+  it('single media queries lg', () => {
+    const media = stylex.defineConsts({
+      md: '(width >= 750px)',
+      lg: '(width >= 1080px)'
+    });
+    const styles = stylex.create({
+      view: {
+        backgroundColor: {
+          default: 'yellow',
+          [media.md]: 'blue',
+          [media.lg]: 'green'
+        }
+      }
+    });
+    function Comp() {
+      const sx = stylex.useStylex();
+      return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.view)));
+    }
+    mockDimensions({
+      width: 1080
+    });
+    expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
+      backgroundColor: 'green'
+    });
+  });
+  it('multi-range media query matches width inside range', () => {
+    const media = stylex.defineConsts({
+      md: '(750px <= width < 1080px)',
+      lg: '(width >= 1080px)'
+    });
+    const styles = stylex.create({
+      view: {
+        backgroundColor: {
+          default: 'yellow',
+          [media.md]: 'blue',
+          [media.lg]: 'green'
+        }
+      }
+    });
+    function Comp() {
+      const sx = stylex.useStylex();
+      return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.view)));
+    }
+    mockDimensions({
+      width: 900
+    });
+    expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
+      backgroundColor: 'blue'
+    });
+  });
+  it('multi-range media query does not match width outside range', () => {
+    const media = stylex.defineConsts({
+      md: '(750px <= width < 1080px)',
+      lg: '(width >= 1080px)'
+    });
+    const styles = stylex.create({
+      view: {
+        backgroundColor: {
+          default: 'yellow',
+          [media.md]: 'blue',
+          [media.lg]: 'green'
+        }
+      }
+    });
+    function Comp() {
+      const sx = stylex.useStylex();
+      return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.view)));
+    }
+    mockDimensions({
+      width: 1080
+    });
+    expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
+      backgroundColor: 'green'
+    });
+  });
+  it('multiple properties each with independent breakpoints', () => {
+    const media = stylex.defineConsts({
+      md: '(width >= 750px)',
+      lg: '(width >= 1080px)'
+    });
+    const styles = stylex.create({
+      view: {
+        backgroundColor: {
+          default: 'yellow',
+          [media.md]: 'blue',
+          [media.lg]: 'green'
+        },
+        width: {
+          default: 100,
+          [media.md]: 200,
+          [media.lg]: 300
+        }
+      }
+    });
+    function Comp() {
+      const sx = stylex.useStylex();
+      return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.view)));
+    }
+    mockDimensions({
+      width: 750
+    });
+    expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
+      backgroundColor: 'blue',
+      width: 200
+    });
+  });
+  it('multiple style entries with media queries are merged in order', () => {
+    const media = stylex.defineConsts({
+      md: '(width >= 750px)'
+    });
+    const styles = stylex.create({
+      base: {
+        backgroundColor: {
+          default: 'yellow'
+        },
+        height: 100
+      },
+      override: {
+        backgroundColor: {
+          [media.md]: 'purple'
+        }
+      }
+    });
+    function Comp() {
+      const sx = stylex.useStylex();
+      return /*#__PURE__*/React.createElement(View, sx.props(sx.mix(styles.base), sx.mix(styles.override)));
+    }
+    mockDimensions({
+      width: 750
+    });
+    expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, null, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
+      backgroundColor: 'purple',
+      height: 100
+    });
+  });
+});
+//# sourceMappingURL=media.test.js.map

package/lib/module/tests/media.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","stylex","mockDimensions","finalStyle","describe","it","media","defineConsts","md","lg","styles","create","view","backgroundColor","default","Comp","sx","useStylex","createElement","props","mix","width","expect","RNStyleXProvider","toMatchObject","base","height","override"],"sources":["media.test.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport * as stylex from '../';\nimport { mockDimensions, finalStyle } from './test-utils';\n\n// ---------------------------------------------------------------------------\n// Media queries\n// ---------------------------------------------------------------------------\n\ndescribe('Media', () => {\n  it('single media queries default', () => {\n    const media = stylex.defineConsts({\n      md: '(width >= 750px)',\n      lg: '(width >= 1080px)',\n    });\n\n    const styles = stylex.create({\n      view: {\n        backgroundColor: {\n          default: 'yellow',\n          [media.md]: 'blue',\n          [media.lg]: 'green',\n        },\n      },\n    });\n\n    function Comp() {\n      const sx = stylex.useStylex();\n      return <View {...sx.props(sx.mix(styles.view))} />;\n    }\n\n    mockDimensions({ width: 640 });\n    expect(\n      finalStyle(\n        <stylex.RNStyleXProvider>\n          <Comp />\n        </stylex.RNStyleXProvider>\n      )\n    ).toMatchObject({\n      backgroundColor: 'yellow',\n    });\n  });\n\n  it('usage from hooks implicitly', () => {\n    const media = stylex.defineConsts({\n      md: '(width >= 750px)',\n      lg: '(width >= 1080px)',\n    });\n\n    const styles = stylex.create({\n      view: {\n        backgroundColor: {\n          default: 'yellow',\n          [media.md]: 'blue',\n          [media.lg]: 'green',\n        },\n      },\n    });\n\n    function Comp() {\n      const sx = stylex.useStylex();\n      return <View {...sx.props(styles.view)} />;\n    }\n\n    mockDimensions({ width: 750 });\n    expect(\n      finalStyle(\n        <stylex.RNStyleXProvider>\n          <Comp />\n        </stylex.RNStyleXProvider>\n      )\n    ).toMatchObject({\n      backgroundColor: 'blue',\n    });\n  });\n\n  it('single media queries md', () => {\n    const media = stylex.defineConsts({\n      md: '(width >= 750px)',\n      lg: '(width >= 1080px)',\n    });\n\n    const styles = stylex.create({\n      view: {\n        backgroundColor: {\n          default: 'yellow',\n          [media.md]: 'blue',\n          [media.lg]: 'green',\n        },\n      },\n    });\n\n    function Comp() {\n      const sx = stylex.useStylex();\n      return <View {...sx.props(sx.mix(styles.view))} />;\n    }\n\n    mockDimensions({ width: 750 });\n    expect(\n      finalStyle(\n        <stylex.RNStyleXProvider>\n          <Comp />\n        </stylex.RNStyleXProvider>\n      )\n    ).toMatchObject({\n      backgroundColor: 'blue',\n    });\n  });\n\n  it('single media queries lg', () => {\n    const media = stylex.defineConsts({\n      md: '(width >= 750px)',\n      lg: '(width >= 1080px)',\n    });\n\n    const styles = stylex.create({\n      view: {\n        backgroundColor: {\n          default: 'yellow',\n          [media.md]: 'blue',\n          [media.lg]: 'green',\n        },\n      },\n    });\n\n    function Comp() {\n      const sx = stylex.useStylex();\n      return <View {...sx.props(sx.mix(styles.view))} />;\n    }\n\n    mockDimensions({ width: 1080 });\n    expect(\n      finalStyle(\n        <stylex.RNStyleXProvider>\n          <Comp />\n        </stylex.RNStyleXProvider>\n      )\n    ).toMatchObject({\n      backgroundColor: 'green',\n    });\n  });\n\n  it('multi-range media query matches width inside range', () => {\n    const media = stylex.defineConsts({\n      md: '(750px <= width < 1080px)',\n      lg: '(width >= 1080px)',\n    });\n\n    const styles = stylex.create({\n      view: {\n        backgroundColor: {\n          default: 'yellow',\n          [media.md]: 'blue',\n          [media.lg]: 'green',\n        },\n      },\n    });\n\n    function Comp() {\n      const sx = stylex.useStylex();\n      return <View {...sx.props(sx.mix(styles.view))} />;\n    }\n\n    mockDimensions({ width: 900 });\n    expect(\n      finalStyle(\n        <stylex.RNStyleXProvider>\n          <Comp />\n        </stylex.RNStyleXProvider>\n      )\n    ).toMatchObject({\n      backgroundColor: 'blue',\n    });\n  });\n\n  it('multi-range media query does not match width outside range', () => {\n    const media = stylex.defineConsts({\n      md: '(750px <= width < 1080px)',\n      lg: '(width >= 1080px)',\n    });\n\n    const styles = stylex.create({\n      view: {\n        backgroundColor: {\n          default: 'yellow',\n          [media.md]: 'blue',\n          [media.lg]: 'green',\n        },\n      },\n    });\n\n    function Comp() {\n      const sx = stylex.useStylex();\n      return <View {...sx.props(sx.mix(styles.view))} />;\n    }\n\n    mockDimensions({ width: 1080 });\n    expect(\n      finalStyle(\n        <stylex.RNStyleXProvider>\n          <Comp />\n        </stylex.RNStyleXProvider>\n      )\n    ).toMatchObject({\n      backgroundColor: 'green',\n    });\n  });\n\n  it('multiple properties each with independent breakpoints', () => {\n    const media = stylex.defineConsts({\n      md: '(width >= 750px)',\n      lg: '(width >= 1080px)',\n    });\n\n    const styles = stylex.create({\n      view: {\n        backgroundColor: {\n          default: 'yellow',\n          [media.md]: 'blue',\n          [media.lg]: 'green',\n        },\n        width: {\n          default: 100,\n          [media.md]: 200,\n          [media.lg]: 300,\n        },\n      },\n    });\n\n    function Comp() {\n      const sx = stylex.useStylex();\n      return <View {...sx.props(sx.mix(styles.view))} />;\n    }\n\n    mockDimensions({ width: 750 });\n    expect(\n      finalStyle(\n        <stylex.RNStyleXProvider>\n          <Comp />\n        </stylex.RNStyleXProvider>\n      )\n    ).toMatchObject({\n      backgroundColor: 'blue',\n      width: 200,\n    });\n  });\n\n  it('multiple style entries with media queries are merged in order', () => {\n    const media = stylex.defineConsts({\n      md: '(width >= 750px)',\n    });\n\n    const styles = stylex.create({\n      base: {\n        backgroundColor: {\n          default: 'yellow',\n        },\n        height: 100,\n      },\n      override: {\n        backgroundColor: {\n          [media.md]: 'purple',\n        },\n      },\n    });\n\n    function Comp() {\n      const sx = stylex.useStylex();\n      return (\n        <View {...sx.props(sx.mix(styles.base), sx.mix(styles.override))} />\n      );\n    }\n\n    mockDimensions({ width: 750 });\n    expect(\n      finalStyle(\n        <stylex.RNStyleXProvider>\n          <Comp />\n        </stylex.RNStyleXProvider>\n      )\n    ).toMatchObject({\n      backgroundColor: 'purple',\n      height: 100,\n    });\n  });\n});\n"],"mappings":"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","ignoreList":[]}

package/lib/module/tests/mock.test.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { View } from 'react-native';
+import { mockDimensions, finalStyle } from './test-utils';
+jest.mock('../utils/media', () => {
+  const originalModule = jest.requireActual('../utils/media');
+  return {
+    ...originalModule,
+    media: jest.fn(originalModule.media)
+  };
+});
+it('preset media effectively key access', async () => {
+  const mediaUtils = await import('../utils/media');
+  const stylex = await import('../');
+  const mocked = jest.mocked(mediaUtils.media);
+  const mediaVal = stylex.defineConsts({
+    md: '(width >= 750px)',
+    lg: '(width >= 1080px)'
+  });
+  const styles = stylex.create({
+    view: {
+      backgroundColor: {
+        default: 'yellow',
+        [mediaVal.md]: 'blue',
+        [mediaVal.lg]: 'green'
+      },
+      width: {
+        default: 100,
+        [mediaVal.md]: 200,
+        [mediaVal.lg]: 300
+      }
+    }
+  });
+  mockDimensions({
+    width: 750
+  });
+  function Comp() {
+    const sx = stylex.useStylex();
+    return /*#__PURE__*/React.createElement(View, sx.props(styles.view));
+  }
+  expect(finalStyle(/*#__PURE__*/React.createElement(stylex.RNStyleXProvider, {
+    media: mediaVal
+  }, /*#__PURE__*/React.createElement(Comp, null)))).toMatchObject({
+    backgroundColor: 'blue',
+    width: 200
+  });
+  expect(jest.isMockFunction(mocked)).toBe(true);
+  expect(mocked.mock.calls[0][1]).toBe(mediaVal.md);
+});
+//# sourceMappingURL=mock.test.js.map

package/lib/module/tests/mock.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","mockDimensions","finalStyle","jest","mock","originalModule","requireActual","media","fn","it","mediaUtils","stylex","mocked","mediaVal","defineConsts","md","lg","styles","create","view","backgroundColor","default","width","Comp","sx","useStylex","createElement","props","expect","RNStyleXProvider","toMatchObject","isMockFunction","toBe","calls"],"sources":["mock.test.tsx"],"sourcesContent":["import React from 'react';\nimport { View } from 'react-native';\n\nimport { mockDimensions, finalStyle } from './test-utils';\n\njest.mock('../utils/media', () => {\n  const originalModule = jest.requireActual('../utils/media');\n\n  return {\n    ...originalModule,\n    media: jest.fn(originalModule.media),\n  };\n});\n\nit('preset media effectively key access', async () => {\n  const mediaUtils = await import( '../utils/media');\n  const stylex = await import( '../');\n\n  const mocked = jest.mocked(mediaUtils.media);\n\n  const mediaVal = stylex.defineConsts({\n    md: '(width >= 750px)',\n    lg: '(width >= 1080px)',\n  });\n\n  const styles = stylex.create({\n    view: {\n      backgroundColor: {\n        default: 'yellow',\n        [mediaVal.md]: 'blue',\n        [mediaVal.lg]: 'green',\n      },\n      width: {\n        default: 100,\n        [mediaVal.md]: 200,\n        [mediaVal.lg]: 300,\n      },\n    },\n  });\n\n  mockDimensions({ width: 750 });\n\n  function Comp() {\n    const sx = stylex.useStylex();\n    return <View {...sx.props(styles.view)} />;\n  }\n\n  expect(\n    finalStyle(\n      <stylex.RNStyleXProvider media={mediaVal}>\n        <Comp />\n      </stylex.RNStyleXProvider>\n    )\n  ).toMatchObject({\n    backgroundColor: 'blue',\n    width: 200,\n  });\n\n  expect(jest.isMockFunction(mocked)).toBe(true);\n  expect(mocked.mock.calls[0][1]).toBe(mediaVal.md);\n});\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,SAASC,cAAc,EAAEC,UAAU,QAAQ,cAAc;AAEzDC,IAAI,CAACC,IAAI,CAAC,gBAAgB,EAAE,MAAM;EAChC,MAAMC,cAAc,GAAGF,IAAI,CAACG,aAAa,CAAC,gBAAgB,CAAC;EAE3D,OAAO;IACL,GAAGD,cAAc;IACjBE,KAAK,EAAEJ,IAAI,CAACK,EAAE,CAACH,cAAc,CAACE,KAAK;EACrC,CAAC;AACH,CAAC,CAAC;AAEFE,EAAE,CAAC,qCAAqC,EAAE,YAAY;EACpD,MAAMC,UAAU,GAAG,MAAM,MAAM,CAAE,gBAAgB,CAAC;EAClD,MAAMC,MAAM,GAAG,MAAM,MAAM,CAAE,KAAK,CAAC;EAEnC,MAAMC,MAAM,GAAGT,IAAI,CAACS,MAAM,CAACF,UAAU,CAACH,KAAK,CAAC;EAE5C,MAAMM,QAAQ,GAAGF,MAAM,CAACG,YAAY,CAAC;IACnCC,EAAE,EAAE,kBAAkB;IACtBC,EAAE,EAAE;EACN,CAAC,CAAC;EAEF,MAAMC,MAAM,GAAGN,MAAM,CAACO,MAAM,CAAC;IAC3BC,IAAI,EAAE;MACJC,eAAe,EAAE;QACfC,OAAO,EAAE,QAAQ;QACjB,CAACR,QAAQ,CAACE,EAAE,GAAG,MAAM;QACrB,CAACF,QAAQ,CAACG,EAAE,GAAG;MACjB,CAAC;MACDM,KAAK,EAAE;QACLD,OAAO,EAAE,GAAG;QACZ,CAACR,QAAQ,CAACE,EAAE,GAAG,GAAG;QAClB,CAACF,QAAQ,CAACG,EAAE,GAAG;MACjB;IACF;EACF,CAAC,CAAC;EAEFf,cAAc,CAAC;IAAEqB,KAAK,EAAE;EAAI,CAAC,CAAC;EAE9B,SAASC,IAAIA,CAAA,EAAG;IACd,MAAMC,EAAE,GAAGb,MAAM,CAACc,SAAS,CAAC,CAAC;IAC7B,oBAAO1B,KAAA,CAAA2B,aAAA,CAAC1B,IAAI,EAAKwB,EAAE,CAACG,KAAK,CAACV,MAAM,CAACE,IAAI,CAAI,CAAC;EAC5C;EAEAS,MAAM,CACJ1B,UAAU,cACRH,KAAA,CAAA2B,aAAA,CAACf,MAAM,CAACkB,gBAAgB;IAACtB,KAAK,EAAEM;EAAS,gBACvCd,KAAA,CAAA2B,aAAA,CAACH,IAAI,MAAE,CACgB,CAC3B,CACF,CAAC,CAACO,aAAa,CAAC;IACdV,eAAe,EAAE,MAAM;IACvBE,KAAK,EAAE;EACT,CAAC,CAAC;EAEFM,MAAM,CAACzB,IAAI,CAAC4B,cAAc,CAACnB,MAAM,CAAC,CAAC,CAACoB,IAAI,CAAC,IAAI,CAAC;EAC9CJ,MAAM,CAAChB,MAAM,CAACR,IAAI,CAAC6B,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAACD,IAAI,CAACnB,QAAQ,CAACE,EAAE,CAAC;AACnD,CAAC,CAAC","ignoreList":[]}

package/lib/module/tests/test-utils.js

@@ -0,0 +1,52 @@
+import { render } from '@testing-library/react-native';
+const aspectRatio = 19.5 / 9; // iPhone 14
+
+export function mockDimensions(_ref) {
+  let {
+    width = 750,
+    height = width * aspectRatio,
+    pixelRatio = 1
+  } = _ref;
+  jest.resetModules();
+  jest.doMock('react-native/Libraries/Utilities/useWindowDimensions', () => ({
+    __esModule: true,
+    default: jest.fn().mockReturnValue({
+      width,
+      height
+    })
+  }));
+  // The react-native index.js exports PixelRatio via a lazy getter:
+  //   get PixelRatio() { return require('./Libraries/Utilities/PixelRatio').default }
+  // so the mock must be wrapped under `default`.
+  jest.doMock('react-native/Libraries/Utilities/PixelRatio', () => ({
+    __esModule: true,
+    default: {
+      get: () => pixelRatio,
+      getFontScale: () => 1,
+      getPixelSizeForLayoutSize: layoutSize => layoutSize * pixelRatio,
+      roundToNearestPixel: layoutSize => Math.round(layoutSize * pixelRatio) / pixelRatio
+    }
+  }));
+  jest.doMock('react-native/Libraries/Utilities/Dimensions', () => ({
+    __esModule: true,
+    default: {
+      get: jest.fn().mockReturnValue({
+        width,
+        height
+      }),
+      addEventListener: jest.fn(),
+      removeEventListener: jest.fn()
+    }
+  }));
+}
+export function reduceStyles(s) {
+  return s.reduce((s1, s2) => ({
+    ...s1,
+    ...s2
+  }), {});
+}
+export function finalStyle(Component) {
+  var _render$toJSON;
+  return reduceStyles((_render$toJSON = render(Component).toJSON()) === null || _render$toJSON === void 0 ? void 0 : _render$toJSON.props.style);
+}
+//# sourceMappingURL=test-utils.js.map

package/lib/module/tests/test-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["render","aspectRatio","mockDimensions","_ref","width","height","pixelRatio","jest","resetModules","doMock","__esModule","default","fn","mockReturnValue","get","getFontScale","getPixelSizeForLayoutSize","layoutSize","roundToNearestPixel","Math","round","addEventListener","removeEventListener","reduceStyles","s","reduce","s1","s2","finalStyle","Component","_render$toJSON","toJSON","props","style"],"sources":["test-utils.tsx"],"sourcesContent":["import { render } from '@testing-library/react-native';\n\nconst aspectRatio = 19.5 / 9; // iPhone 14\n\nexport function mockDimensions({\n  width = 750,\n  height = width * aspectRatio,\n  pixelRatio = 1,\n}: {\n  width?: number;\n  height?: number;\n  pixelRatio?: number;\n}) {\n  jest.resetModules();\n  jest.doMock('react-native/Libraries/Utilities/useWindowDimensions', () => ({\n    __esModule: true,\n    default: jest.fn().mockReturnValue({ width, height }),\n  }));\n  // The react-native index.js exports PixelRatio via a lazy getter:\n  //   get PixelRatio() { return require('./Libraries/Utilities/PixelRatio').default }\n  // so the mock must be wrapped under `default`.\n  jest.doMock('react-native/Libraries/Utilities/PixelRatio', () => ({\n    __esModule: true,\n    default: {\n      get: () => pixelRatio,\n      getFontScale: () => 1,\n      getPixelSizeForLayoutSize: (layoutSize: number) =>\n        layoutSize * pixelRatio,\n      roundToNearestPixel: (layoutSize: number) =>\n        Math.round(layoutSize * pixelRatio) / pixelRatio,\n    },\n  }));\n  jest.doMock('react-native/Libraries/Utilities/Dimensions', () => ({\n    __esModule: true,\n    default: {\n      get: jest.fn().mockReturnValue({ width, height }),\n      addEventListener: jest.fn(),\n      removeEventListener: jest.fn(),\n    },\n  }));\n}\n\nexport function reduceStyles(s: any) {\n  return s.reduce((s1: any, s2: any) => ({ ...s1, ...s2 }), {});\n}\n\nexport function finalStyle(Component: React.ReactElement) {\n  return reduceStyles(\n    render(\n      Component\n    ).toJSON()?.props.style\n  );\n}\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,+BAA+B;AAEtD,MAAMC,WAAW,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC;;AAE9B,OAAO,SAASC,cAAcA,CAAAC,IAAA,EAQ3B;EAAA,IAR4B;IAC7BC,KAAK,GAAG,GAAG;IACXC,MAAM,GAAGD,KAAK,GAAGH,WAAW;IAC5BK,UAAU,GAAG;EAKf,CAAC,GAAAH,IAAA;EACCI,IAAI,CAACC,YAAY,CAAC,CAAC;EACnBD,IAAI,CAACE,MAAM,CAAC,sDAAsD,EAAE,OAAO;IACzEC,UAAU,EAAE,IAAI;IAChBC,OAAO,EAAEJ,IAAI,CAACK,EAAE,CAAC,CAAC,CAACC,eAAe,CAAC;MAAET,KAAK;MAAEC;IAAO,CAAC;EACtD,CAAC,CAAC,CAAC;EACH;EACA;EACA;EACAE,IAAI,CAACE,MAAM,CAAC,6CAA6C,EAAE,OAAO;IAChEC,UAAU,EAAE,IAAI;IAChBC,OAAO,EAAE;MACPG,GAAG,EAAEA,CAAA,KAAMR,UAAU;MACrBS,YAAY,EAAEA,CAAA,KAAM,CAAC;MACrBC,yBAAyB,EAAGC,UAAkB,IAC5CA,UAAU,GAAGX,UAAU;MACzBY,mBAAmB,EAAGD,UAAkB,IACtCE,IAAI,CAACC,KAAK,CAACH,UAAU,GAAGX,UAAU,CAAC,GAAGA;IAC1C;EACF,CAAC,CAAC,CAAC;EACHC,IAAI,CAACE,MAAM,CAAC,6CAA6C,EAAE,OAAO;IAChEC,UAAU,EAAE,IAAI;IAChBC,OAAO,EAAE;MACPG,GAAG,EAAEP,IAAI,CAACK,EAAE,CAAC,CAAC,CAACC,eAAe,CAAC;QAAET,KAAK;QAAEC;MAAO,CAAC,CAAC;MACjDgB,gBAAgB,EAAEd,IAAI,CAACK,EAAE,CAAC,CAAC;MAC3BU,mBAAmB,EAAEf,IAAI,CAACK,EAAE,CAAC;IAC/B;EACF,CAAC,CAAC,CAAC;AACL;AAEA,OAAO,SAASW,YAAYA,CAACC,CAAM,EAAE;EACnC,OAAOA,CAAC,CAACC,MAAM,CAAC,CAACC,EAAO,EAAEC,EAAO,MAAM;IAAE,GAAGD,EAAE;IAAE,GAAGC;EAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC/D;AAEA,OAAO,SAASC,UAAUA,CAACC,SAA6B,EAAE;EAAA,IAAAC,cAAA;EACxD,OAAOP,YAAY,EAAAO,cAAA,GACjB9B,MAAM,CACJ6B,SACF,CAAC,CAACE,MAAM,CAAC,CAAC,cAAAD,cAAA,uBAFVA,cAAA,CAEYE,KAAK,CAACC,KACpB,CAAC;AACH","ignoreList":[]}

package/lib/module/utils/base.js

@@ -0,0 +1,63 @@
+import { StyleSheet } from 'react-native';
+import { media } from './media';
+import { variants } from './variant';
+import { resolveTheme } from './theme';
+function bundleStyleSheet(styleObject) {
+  const result = Object.entries(styleObject).reduce((current, _ref) => {
+    let [key, value] = _ref;
+    if (typeof value === 'object') {
+      Object.entries(value).forEach(_ref2 => {
+        let [variantKey, variantValue] = _ref2;
+        if (!current[variantKey]) {
+          current[variantKey] = {};
+        }
+        current[variantKey][key] = variantValue;
+      });
+    } else {
+      current.default || (current.default = {});
+      current.default[key] = value;
+    }
+    return current;
+  }, {});
+  return StyleSheet.create(result);
+}
+export const create = args => {
+  return Object.entries(args).reduce((current, _ref3) => {
+    let [key, value] = _ref3;
+    current[key] = bundleStyleSheet(value);
+    return current;
+  }, {});
+};
+export const mix = (target, variantArgs) => {
+  if (!target) return [];
+  const [_target, config] = Array.isArray(target) ? target : [target, {}];
+  let results = _target.default ? [_target.default] : [];
+  if (config.theme) {
+    const themeSheet = resolveTheme(_target, config.theme);
+    themeSheet && results.push(themeSheet);
+  }
+  if (variantArgs) {
+    results = [...results, ...variants(_target, variantArgs)];
+  }
+  if (config.media) {
+    results = [...results, ...media(_target, config.media)];
+  }
+  return results;
+};
+export const props = function () {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  return {
+    style: args.reduce((acc, arg) => {
+      var _default;
+      if (!arg) return acc;
+      if (Array.isArray(arg)) {
+        return [...acc, ...arg];
+      }
+      const xStyleBase = (_default = arg.default) !== null && _default !== void 0 ? _default : arg;
+      return [...acc, xStyleBase];
+    }, [])
+  };
+};
+//# sourceMappingURL=base.js.map

package/lib/module/utils/base.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","media","variants","resolveTheme","bundleStyleSheet","styleObject","result","Object","entries","reduce","current","_ref","key","value","forEach","_ref2","variantKey","variantValue","default","create","args","_ref3","mix","target","variantArgs","_target","config","Array","isArray","results","theme","themeSheet","push","props","_len","arguments","length","_key","style","acc","arg","_default","xStyleBase"],"sources":["base.ts"],"sourcesContent":["import { StyleSheet } from 'react-native';\nimport {\n  XRNStyleSheets,\n  XRNStyle,\n  NamedStyles,\n  RNStyle,\n  VariantStyleSheet,\n} from './types';\nimport { media } from './media';\nimport { variants } from './variant';\nimport { resolveTheme } from './theme';\n\nfunction bundleStyleSheet<S extends RNStyle>(styleObject: XRNStyle<S>) {\n  const result = Object.entries(styleObject).reduce((current, [key, value]) => {\n    if (typeof value === 'object') {\n      Object.entries(value).forEach(([variantKey, variantValue]) => {\n        if (!current[variantKey]) {\n          current[variantKey] = {};\n        }\n        (current[variantKey] as any)[key] = variantValue;\n      });\n    } else {\n      current.default ||= {};\n      (current.default as any)[key] = value;\n    }\n    return current;\n  }, {} as Record<string, RNStyle>);\n  return StyleSheet.create(result);\n}\n\nexport const create = <T extends NamedStyles<any, R>, R extends RNStyle>(\n  args: T\n): XRNStyleSheets<T, R> => {\n  return Object.entries(args).reduce((current, [key, value]) => {\n    (current as any)[key] = bundleStyleSheet(value);\n    return current;\n  }, {} as XRNStyleSheets<T, R>);\n};\n\nexport const mix = <\n  Variants extends { [key: string]: string | number | boolean | undefined },\n  Theme extends string = string,\n  T extends VariantStyleSheet<string, RNStyle> = VariantStyleSheet<\n    string,\n    RNStyle\n  >\n>(\n  target?: T | [T, { theme?: Theme; media?: number | string }],\n  variantArgs?: Variants\n): RNStyle[] => {\n  if (!target) return [];\n  const [_target, config] = Array.isArray(target) ? target : [target as T, {}];\n  let results = _target.default ? [_target.default] : ([] as RNStyle[]);\n  if (config.theme) {\n    const themeSheet = resolveTheme(_target, config.theme);\n    themeSheet && results.push(themeSheet);\n  }\n  if (variantArgs) {\n    results = [...results, ...variants(_target, variantArgs)];\n  }\n  if (config.media) {\n    results = [...results, ...media(_target, config.media)];\n  }\n  return results;\n};\n\ntype PropValue = VariantStyleSheet<string, RNStyle> | RNStyle;\nexport const props = <T extends RNStyle>(\n  ...args: (PropValue | RNStyle[] | false | null | undefined)[]\n): { style: T[] } => {\n  return {\n    style: args.reduce((acc: T[], arg) => {\n      if (!arg) return acc;\n      if (Array.isArray(arg)) {\n        return [...acc, ...arg] as T[];\n      }\n      const xStyleBase =\n        (arg as VariantStyleSheet<string, RNStyle>).default ?? arg;\n      return [...acc, xStyleBase] as T[];\n    }, []) as T[],\n  };\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/utils/hooks.js

@@ -0,0 +1,52 @@
+import { Children, createContext, createElement, useContext, useMemo } from 'react';
+import { PixelRatio, useWindowDimensions } from 'react-native';
+import { mix, props } from './base';
+import { detectMedia } from './media';
+const RNStyleXContext = /*#__PURE__*/createContext(undefined);
+export const RNStyleXProvider = componentProps => {
+  var _componentProps$windo, _componentProps$theme;
+  const {
+    width
+  } = useWindowDimensions();
+  const correctedWidth = (_componentProps$windo = componentProps.windowWidth) !== null && _componentProps$windo !== void 0 ? _componentProps$windo : PixelRatio.getPixelSizeForLayoutSize(width);
+  const theme = (_componentProps$theme = componentProps.theme) !== null && _componentProps$theme !== void 0 ? _componentProps$theme : 'default';
+  const value = useMemo(() => {
+    const media = componentProps.media && detectMedia(componentProps.media, correctedWidth);
+    return {
+      windowWidth: correctedWidth,
+      theme,
+      props() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        const sheets = args.map(v => Array.isArray(v) ? v : v && this.mix(v));
+        return props(...sheets);
+      },
+      mix(arg, variants) {
+        if (!arg) return [];
+        const config = {
+          theme,
+          media: media !== null && media !== void 0 ? media : this.windowWidth
+        };
+        if (Array.isArray(arg)) {
+          return mix([arg[0], {
+            ...config,
+            ...arg[1]
+          }], variants);
+        }
+        return mix([arg, config], variants);
+      }
+    };
+  }, [correctedWidth, theme]);
+  return /*#__PURE__*/createElement(RNStyleXContext.Provider, {
+    value
+  }, Children.only(componentProps.children));
+};
+export const useStylex = () => {
+  const context = useContext(RNStyleXContext);
+  if (!context) {
+    throw new Error('useStylex must be used within a RNStyleXProvider');
+  }
+  return context;
+};
+//# sourceMappingURL=hooks.js.map

package/lib/module/utils/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Children","createContext","createElement","useContext","useMemo","PixelRatio","useWindowDimensions","mix","props","detectMedia","RNStyleXContext","undefined","RNStyleXProvider","componentProps","_componentProps$windo","_componentProps$theme","width","correctedWidth","windowWidth","getPixelSizeForLayoutSize","theme","value","media","_len","arguments","length","args","Array","_key","sheets","map","v","isArray","arg","variants","config","Provider","only","children","useStylex","context","Error"],"sources":["hooks.ts"],"sourcesContent":["import {\n  Children,\n  createContext,\n  createElement,\n  useContext,\n  useMemo,\n} from 'react';\nimport { PixelRatio, useWindowDimensions } from 'react-native';\nimport { mix, props } from './base';\nimport { RNStyle, VariantStyleSheet } from './types';\nimport { detectMedia } from './media';\n\ntype IApi = {\n  props: typeof props;\n  mix: typeof mix;\n};\n\ntype UserConfig = {\n  windowWidth: number;\n  theme: string;\n};\n\ntype ValueType = UserConfig & IApi;\n\nconst RNStyleXContext = createContext<ValueType | undefined>(undefined);\n\nexport const RNStyleXProvider = (\n  componentProps: Partial<Pick<ValueType, 'windowWidth' | 'theme'>> & {\n    media?: Record<string, string>;\n    children: React.ReactNode;\n  }\n) => {\n  const { width } = useWindowDimensions();\n  const correctedWidth =\n    componentProps.windowWidth ?? PixelRatio.getPixelSizeForLayoutSize(width);\n  const theme = componentProps.theme ?? 'default';\n\n  const value = useMemo<ValueType>(() => {\n    const media = componentProps.media && detectMedia(componentProps.media, correctedWidth);\n    return {\n      windowWidth: correctedWidth,\n      theme,\n      props(...args) {\n        const sheets = args.map((v) =>\n          Array.isArray(v)\n            ? v\n            : v && this.mix(v as VariantStyleSheet<string, RNStyle>)\n        );\n        return props(...sheets);\n      },\n      mix(arg, variants) {\n        if (!arg) return [];\n        const config = {\n          theme,\n          media: media ?? this.windowWidth,\n        };\n        if (Array.isArray(arg)) {\n          return mix([arg[0], { ...config, ...arg[1] }], variants);\n        }\n        return mix([arg, config], variants);\n      },\n    };\n  }, [correctedWidth, theme]);\n  return createElement(\n    RNStyleXContext.Provider,\n    { value },\n    Children.only(componentProps.children)\n  );\n};\n\nexport const useStylex = () => {\n  const context = useContext(RNStyleXContext);\n  if (!context) {\n    throw new Error('useStylex must be used within a RNStyleXProvider');\n  }\n  return context;\n};\n"],"mappings":"AAAA,SACEA,QAAQ,EACRC,aAAa,EACbC,aAAa,EACbC,UAAU,EACVC,OAAO,QACF,OAAO;AACd,SAASC,UAAU,EAAEC,mBAAmB,QAAQ,cAAc;AAC9D,SAASC,GAAG,EAAEC,KAAK,QAAQ,QAAQ;AAEnC,SAASC,WAAW,QAAQ,SAAS;AAcrC,MAAMC,eAAe,gBAAGT,aAAa,CAAwBU,SAAS,CAAC;AAEvE,OAAO,MAAMC,gBAAgB,GAC3BC,cAGC,IACE;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EACH,MAAM;IAAEC;EAAM,CAAC,GAAGV,mBAAmB,CAAC,CAAC;EACvC,MAAMW,cAAc,IAAAH,qBAAA,GAClBD,cAAc,CAACK,WAAW,cAAAJ,qBAAA,cAAAA,qBAAA,GAAIT,UAAU,CAACc,yBAAyB,CAACH,KAAK,CAAC;EAC3E,MAAMI,KAAK,IAAAL,qBAAA,GAAGF,cAAc,CAACO,KAAK,cAAAL,qBAAA,cAAAA,qBAAA,GAAI,SAAS;EAE/C,MAAMM,KAAK,GAAGjB,OAAO,CAAY,MAAM;IACrC,MAAMkB,KAAK,GAAGT,cAAc,CAACS,KAAK,IAAIb,WAAW,CAACI,cAAc,CAACS,KAAK,EAAEL,cAAc,CAAC;IACvF,OAAO;MACLC,WAAW,EAAED,cAAc;MAC3BG,KAAK;MACLZ,KAAKA,CAAA,EAAU;QAAA,SAAAe,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAANC,IAAI,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;UAAJF,IAAI,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;QAAA;QACX,MAAMC,MAAM,GAAGH,IAAI,CAACI,GAAG,CAAEC,CAAC,IACxBJ,KAAK,CAACK,OAAO,CAACD,CAAC,CAAC,GACZA,CAAC,GACDA,CAAC,IAAI,IAAI,CAACxB,GAAG,CAACwB,CAAuC,CAC3D,CAAC;QACD,OAAOvB,KAAK,CAAC,GAAGqB,MAAM,CAAC;MACzB,CAAC;MACDtB,GAAGA,CAAC0B,GAAG,EAAEC,QAAQ,EAAE;QACjB,IAAI,CAACD,GAAG,EAAE,OAAO,EAAE;QACnB,MAAME,MAAM,GAAG;UACbf,KAAK;UACLE,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAI,CAACJ;QACvB,CAAC;QACD,IAAIS,KAAK,CAACK,OAAO,CAACC,GAAG,CAAC,EAAE;UACtB,OAAO1B,GAAG,CAAC,CAAC0B,GAAG,CAAC,CAAC,CAAC,EAAE;YAAE,GAAGE,MAAM;YAAE,GAAGF,GAAG,CAAC,CAAC;UAAE,CAAC,CAAC,EAAEC,QAAQ,CAAC;QAC1D;QACA,OAAO3B,GAAG,CAAC,CAAC0B,GAAG,EAAEE,MAAM,CAAC,EAAED,QAAQ,CAAC;MACrC;IACF,CAAC;EACH,CAAC,EAAE,CAACjB,cAAc,EAAEG,KAAK,CAAC,CAAC;EAC3B,oBAAOlB,aAAa,CAClBQ,eAAe,CAAC0B,QAAQ,EACxB;IAAEf;EAAM,CAAC,EACTrB,QAAQ,CAACqC,IAAI,CAACxB,cAAc,CAACyB,QAAQ,CACvC,CAAC;AACH,CAAC;AAED,OAAO,MAAMC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,OAAO,GAAGrC,UAAU,CAACO,eAAe,CAAC;EAC3C,IAAI,CAAC8B,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,kDAAkD,CAAC;EACrE;EACA,OAAOD,OAAO;AAChB,CAAC","ignoreList":[]}

package/lib/module/utils/media.js

@@ -0,0 +1,59 @@
+export const media = (target, mediaParam) => {
+  const result = [];
+  if (typeof mediaParam === 'string') {
+    target[mediaParam] && result.push(target[mediaParam]);
+  } else if (typeof mediaParam === 'number') {
+    const keys = Object.keys(target);
+    for (let i = keys.length - 1; i >= 0; i--) {
+      const key = keys[i];
+      // NOTE: Assuming only one media query will match, we can break after the first match.
+      // Because later media query will be more specific and override the previous one.
+      if (matchMediaRangeQuery(key, mediaParam)) {
+        result.push(target[key]);
+        break;
+      }
+    }
+  }
+  return result;
+};
+
+// NOTE: input mediaKeys
+// - ['(750px <= width < 1080px)', '(width > 750px)']
+export const detectMedia = (mediaKeys, width) => {
+  const targets = Array.isArray(mediaKeys) ? mediaKeys : Object.values(mediaKeys);
+  for (const val of targets) {
+    if (matchMediaRangeQuery(val, width)) {
+      return val;
+    }
+  }
+  return;
+};
+const VALID_SIGNS = ['<=', '<', '>=', '>'];
+export function matchMediaRangeQuery(query, windowWidth) {
+  const singleRangeRegex = /^\(width\s+([><=]+)\s+([0-9]+)px\)$/;
+  const multiRangeRegex = /^\(([0-9]+)px\s([><=]+)\swidth\s+([><=]+)\s+([0-9]+)px\)$/; // prettier-ignore
+  const singleRangeMatches = query.match(singleRangeRegex);
+  const multiRangeMatches = query.match(multiRangeRegex);
+  if (!singleRangeMatches && !multiRangeMatches) return false;
+  let result;
+  if (multiRangeMatches && multiRangeMatches.length === 5) {
+    const [, _width1, sign1, sign2, _width2] = multiRangeMatches;
+    const width1 = parseInt(_width1, 10);
+    const width2 = parseInt(_width2, 10);
+    if (VALID_SIGNS.includes(sign1) && VALID_SIGNS.includes(sign2)) {
+      result = eval(`${width1} ${sign1} ${windowWidth} && ${windowWidth} ${sign2} ${width2}`);
+    }
+  } else if (singleRangeMatches && singleRangeMatches.length === 3) {
+    const [, sign, _width] = singleRangeMatches;
+    const width = parseInt(_width, 10);
+    if (VALID_SIGNS.includes(sign)) {
+      result = eval(`${windowWidth} ${sign} ${width}`);
+    }
+  }
+  if (result === undefined) return false;
+  if (typeof result !== 'boolean') {
+    console.warn(`Unexpected media query result. Expected a boolean but got ${result}. Please make sure your media query syntax is correct.`);
+  }
+  return result;
+}
+//# sourceMappingURL=media.js.map

package/lib/module/utils/media.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["media","target","mediaParam","result","push","keys","Object","i","length","key","matchMediaRangeQuery","detectMedia","mediaKeys","width","targets","Array","isArray","values","val","VALID_SIGNS","query","windowWidth","singleRangeRegex","multiRangeRegex","singleRangeMatches","match","multiRangeMatches","_width1","sign1","sign2","_width2","width1","parseInt","width2","includes","eval","sign","_width","undefined","console","warn"],"sources":["media.ts"],"sourcesContent":["import { RNStyle, VariantStyleSheet } from './types';\nexport type Media = Record<string, string | boolean>;\n\nexport const media = <T extends VariantStyleSheet<string, RNStyle>>(\n  target: T,\n  mediaParam: number | string\n): T[keyof T][] => {\n  const result: T[keyof T][] = [];\n  if (typeof mediaParam === 'string') {\n    target[mediaParam] && result.push(target[mediaParam] as T[keyof T]);\n  } else if (typeof mediaParam === 'number') {\n    const keys = Object.keys(target);\n    for (let i = keys.length - 1; i >= 0; i--) {\n      const key = keys[i];\n      // NOTE: Assuming only one media query will match, we can break after the first match.\n      // Because later media query will be more specific and override the previous one.\n      if (matchMediaRangeQuery(key, mediaParam)) {\n        result.push(target[key] as T[keyof T]);\n        break;\n      }\n    }\n  }\n  return result;\n};\n\n// NOTE: input mediaKeys\n// - ['(750px <= width < 1080px)', '(width > 750px)']\nexport const detectMedia = (\n  mediaKeys: string[] | Record<string, string>,\n  width: number\n): string | undefined => {\n  const targets = Array.isArray(mediaKeys)\n    ? mediaKeys\n    : Object.values(mediaKeys);\n  for (const val of targets) {\n    if (matchMediaRangeQuery(val, width)) {\n      return val;\n    }\n  }\n  return;\n};\n\nconst VALID_SIGNS = ['<=', '<', '>=', '>'];\n\nexport function matchMediaRangeQuery(\n  query: string,\n  windowWidth: number\n): boolean {\n  const singleRangeRegex = /^\\(width\\s+([><=]+)\\s+([0-9]+)px\\)$/;\n  const multiRangeRegex = /^\\(([0-9]+)px\\s([><=]+)\\swidth\\s+([><=]+)\\s+([0-9]+)px\\)$/; // prettier-ignore\n  const singleRangeMatches = query.match(singleRangeRegex);\n  const multiRangeMatches = query.match(multiRangeRegex);\n\n  if (!singleRangeMatches && !multiRangeMatches) return false;\n\n  let result;\n\n  if (multiRangeMatches && multiRangeMatches.length === 5) {\n    const [, _width1, sign1, sign2, _width2] = multiRangeMatches;\n    const width1 = parseInt(_width1, 10);\n    const width2 = parseInt(_width2, 10);\n\n    if (VALID_SIGNS.includes(sign1) && VALID_SIGNS.includes(sign2)) {\n      result = eval(\n        `${width1} ${sign1} ${windowWidth} && ${windowWidth} ${sign2} ${width2}`\n      );\n    }\n  } else if (singleRangeMatches && singleRangeMatches.length === 3) {\n    const [, sign, _width] = singleRangeMatches;\n    const width = parseInt(_width, 10);\n\n    if (VALID_SIGNS.includes(sign)) {\n      result = eval(`${windowWidth} ${sign} ${width}`);\n    }\n  }\n\n  if (result === undefined) return false;\n\n  if (typeof result !== 'boolean') {\n    console.warn(\n      `Unexpected media query result. Expected a boolean but got ${result}. Please make sure your media query syntax is correct.`\n    );\n  }\n\n  return result;\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/module/utils/theme.js

@@ -0,0 +1,16 @@
+import { createVariantKey } from './variant';
+export const getThemeKey = theme => createVariantKey('@theme', theme);
+export const resolveTheme = (target, themeKey) => target[themeKey];
+export function createThemes(themes) {
+  if (new Set(themes).size !== themes.length) {
+    throw new Error('Themes must be unique');
+  }
+  const themesObj = themes.reduce((current, theme) => {
+    current[theme] = getThemeKey(theme);
+    return current;
+  }, {});
+  return {
+    themes: themesObj
+  };
+}
+//# sourceMappingURL=theme.js.map