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

package/lib/commonjs/utils/base.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.props = exports.mix = exports.create = void 0;
+var _reactNative = require("react-native");
+var _media = require("./media");
+var _variant = require("./variant");
+var _theme = require("./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 _reactNative.StyleSheet.create(result);
+}
+const create = args => {
+  return Object.entries(args).reduce((current, _ref3) => {
+    let [key, value] = _ref3;
+    current[key] = bundleStyleSheet(value);
+    return current;
+  }, {});
+};
+exports.create = create;
+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 = (0, _theme.resolveTheme)(_target, config.theme);
+    themeSheet && results.push(themeSheet);
+  }
+  if (variantArgs) {
+    results = [...results, ...(0, _variant.variants)(_target, variantArgs)];
+  }
+  if (config.media) {
+    results = [...results, ...(0, _media.media)(_target, config.media)];
+  }
+  return results;
+};
+exports.mix = mix;
+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];
+    }, [])
+  };
+};
+exports.props = props;
+//# sourceMappingURL=base.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_media","_variant","_theme","bundleStyleSheet","styleObject","result","Object","entries","reduce","current","_ref","key","value","forEach","_ref2","variantKey","variantValue","default","StyleSheet","create","args","_ref3","exports","mix","target","variantArgs","_target","config","Array","isArray","results","theme","themeSheet","resolveTheme","push","variants","media","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/commonjs/utils/hooks.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStylex = exports.RNStyleXProvider = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _base = require("./base");
+var _media = require("./media");
+const RNStyleXContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+const RNStyleXProvider = componentProps => {
+  var _componentProps$windo, _componentProps$theme;
+  const {
+    width
+  } = (0, _reactNative.useWindowDimensions)();
+  const correctedWidth = (_componentProps$windo = componentProps.windowWidth) !== null && _componentProps$windo !== void 0 ? _componentProps$windo : _reactNative.PixelRatio.getPixelSizeForLayoutSize(width);
+  const theme = (_componentProps$theme = componentProps.theme) !== null && _componentProps$theme !== void 0 ? _componentProps$theme : 'default';
+  const value = (0, _react.useMemo)(() => {
+    const media = componentProps.media && (0, _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 (0, _base.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 (0, _base.mix)([arg[0], {
+            ...config,
+            ...arg[1]
+          }], variants);
+        }
+        return (0, _base.mix)([arg, config], variants);
+      }
+    };
+  }, [correctedWidth, theme]);
+  return /*#__PURE__*/(0, _react.createElement)(RNStyleXContext.Provider, {
+    value
+  }, _react.Children.only(componentProps.children));
+};
+exports.RNStyleXProvider = RNStyleXProvider;
+const useStylex = () => {
+  const context = (0, _react.useContext)(RNStyleXContext);
+  if (!context) {
+    throw new Error('useStylex must be used within a RNStyleXProvider');
+  }
+  return context;
+};
+exports.useStylex = useStylex;
+//# sourceMappingURL=hooks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_base","_media","RNStyleXContext","createContext","undefined","RNStyleXProvider","componentProps","_componentProps$windo","_componentProps$theme","width","useWindowDimensions","correctedWidth","windowWidth","PixelRatio","getPixelSizeForLayoutSize","theme","value","useMemo","media","detectMedia","props","_len","arguments","length","args","Array","_key","sheets","map","v","isArray","mix","arg","variants","config","createElement","Provider","Children","only","children","exports","useStylex","context","useContext","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,IAAAA,MAAA,GAAAC,OAAA;AAOA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAH,OAAA;AAcA,MAAMI,eAAe,gBAAG,IAAAC,oBAAa,EAAwBC,SAAS,CAAC;AAEhE,MAAMC,gBAAgB,GAC3BC,cAGC,IACE;EAAA,IAAAC,qBAAA,EAAAC,qBAAA;EACH,MAAM;IAAEC;EAAM,CAAC,GAAG,IAAAC,gCAAmB,EAAC,CAAC;EACvC,MAAMC,cAAc,IAAAJ,qBAAA,GAClBD,cAAc,CAACM,WAAW,cAAAL,qBAAA,cAAAA,qBAAA,GAAIM,uBAAU,CAACC,yBAAyB,CAACL,KAAK,CAAC;EAC3E,MAAMM,KAAK,IAAAP,qBAAA,GAAGF,cAAc,CAACS,KAAK,cAAAP,qBAAA,cAAAA,qBAAA,GAAI,SAAS;EAE/C,MAAMQ,KAAK,GAAG,IAAAC,cAAO,EAAY,MAAM;IACrC,MAAMC,KAAK,GAAGZ,cAAc,CAACY,KAAK,IAAI,IAAAC,kBAAW,EAACb,cAAc,CAACY,KAAK,EAAEP,cAAc,CAAC;IACvF,OAAO;MACLC,WAAW,EAAED,cAAc;MAC3BI,KAAK;MACLK,KAAKA,CAAA,EAAU;QAAA,SAAAC,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,CAACE,GAAG,CAACF,CAAuC,CAC3D,CAAC;QACD,OAAO,IAAAT,WAAK,EAAC,GAAGO,MAAM,CAAC;MACzB,CAAC;MACDI,GAAGA,CAACC,GAAG,EAAEC,QAAQ,EAAE;QACjB,IAAI,CAACD,GAAG,EAAE,OAAO,EAAE;QACnB,MAAME,MAAM,GAAG;UACbnB,KAAK;UACLG,KAAK,EAAEA,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,IAAI,CAACN;QACvB,CAAC;QACD,IAAIa,KAAK,CAACK,OAAO,CAACE,GAAG,CAAC,EAAE;UACtB,OAAO,IAAAD,SAAG,EAAC,CAACC,GAAG,CAAC,CAAC,CAAC,EAAE;YAAE,GAAGE,MAAM;YAAE,GAAGF,GAAG,CAAC,CAAC;UAAE,CAAC,CAAC,EAAEC,QAAQ,CAAC;QAC1D;QACA,OAAO,IAAAF,SAAG,EAAC,CAACC,GAAG,EAAEE,MAAM,CAAC,EAAED,QAAQ,CAAC;MACrC;IACF,CAAC;EACH,CAAC,EAAE,CAACtB,cAAc,EAAEI,KAAK,CAAC,CAAC;EAC3B,oBAAO,IAAAoB,oBAAa,EAClBjC,eAAe,CAACkC,QAAQ,EACxB;IAAEpB;EAAM,CAAC,EACTqB,eAAQ,CAACC,IAAI,CAAChC,cAAc,CAACiC,QAAQ,CACvC,CAAC;AACH,CAAC;AAACC,OAAA,CAAAnC,gBAAA,GAAAA,gBAAA;AAEK,MAAMoC,SAAS,GAAGA,CAAA,KAAM;EAC7B,MAAMC,OAAO,GAAG,IAAAC,iBAAU,EAACzC,eAAe,CAAC;EAC3C,IAAI,CAACwC,OAAO,EAAE;IACZ,MAAM,IAAIE,KAAK,CAAC,kDAAkD,CAAC;EACrE;EACA,OAAOF,OAAO;AAChB,CAAC;AAACF,OAAA,CAAAC,SAAA,GAAAA,SAAA","ignoreList":[]}

package/lib/commonjs/utils/media.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.detectMedia = void 0;
+exports.matchMediaRangeQuery = matchMediaRangeQuery;
+exports.media = void 0;
+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)']
+exports.media = media;
+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;
+};
+exports.detectMedia = detectMedia;
+const VALID_SIGNS = ['<=', '<', '>=', '>'];
+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/commonjs/utils/media.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["media","target","mediaParam","result","push","keys","Object","i","length","key","matchMediaRangeQuery","exports","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/commonjs/utils/theme.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createThemes = createThemes;
+exports.resolveTheme = exports.getThemeKey = void 0;
+var _variant = require("./variant");
+const getThemeKey = theme => (0, _variant.createVariantKey)('@theme', theme);
+exports.getThemeKey = getThemeKey;
+const resolveTheme = (target, themeKey) => target[themeKey];
+exports.resolveTheme = resolveTheme;
+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

package/lib/commonjs/utils/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_variant","require","getThemeKey","theme","createVariantKey","exports","resolveTheme","target","themeKey","createThemes","themes","Set","size","length","Error","themesObj","reduce","current"],"sources":["theme.ts"],"sourcesContent":["import { RNStyle, VariantStyleSheet } from './types';\nimport { createVariantKey } from './variant';\n\nexport const getThemeKey = (theme: string) => createVariantKey('@theme', theme);\n\nexport const resolveTheme = <\n  T extends VariantStyleSheet<any, RNStyle> = VariantStyleSheet<any, any>\n>(\n  target: T,\n  themeKey: string\n) => target[themeKey];\n\ntype AllowNoKeyAccessObject<R extends Record<string, any>> = {\n  [K in keyof R]: R[K];\n} & { [key: string]: undefined };\n\nexport function createThemes<\n  const T extends string[]\n>(\n  themes: T\n): {\n  themes: AllowNoKeyAccessObject<{\n    [K in T[number]]: string\n  }>\n} {\n  if (new Set(themes).size !== themes.length) {\n    throw new Error('Themes must be unique');\n  }\n  const themesObj = themes.reduce((current, theme) => {\n    current[theme as T[number]] = getThemeKey(theme);\n    return current;\n  }, {} as { [K in T[number]]: string });\n  return {\n    themes: themesObj as AllowNoKeyAccessObject<{\n      [K in T[number]]: string\n    }>,\n  };\n}\n"],"mappings":";;;;;;;AACA,IAAAA,QAAA,GAAAC,OAAA;AAEO,MAAMC,WAAW,GAAIC,KAAa,IAAK,IAAAC,yBAAgB,EAAC,QAAQ,EAAED,KAAK,CAAC;AAACE,OAAA,CAAAH,WAAA,GAAAA,WAAA;AAEzE,MAAMI,YAAY,GAAGA,CAG1BC,MAAS,EACTC,QAAgB,KACbD,MAAM,CAACC,QAAQ,CAAC;AAACH,OAAA,CAAAC,YAAA,GAAAA,YAAA;AAMf,SAASG,YAAYA,CAG1BC,MAAS,EAKT;EACA,IAAI,IAAIC,GAAG,CAACD,MAAM,CAAC,CAACE,IAAI,KAAKF,MAAM,CAACG,MAAM,EAAE;IAC1C,MAAM,IAAIC,KAAK,CAAC,uBAAuB,CAAC;EAC1C;EACA,MAAMC,SAAS,GAAGL,MAAM,CAACM,MAAM,CAAC,CAACC,OAAO,EAAEd,KAAK,KAAK;IAClDc,OAAO,CAACd,KAAK,CAAc,GAAGD,WAAW,CAACC,KAAK,CAAC;IAChD,OAAOc,OAAO;EAChB,CAAC,EAAE,CAAC,CAAiC,CAAC;EACtC,OAAO;IACLP,MAAM,EAAEK;EAGV,CAAC;AACH","ignoreList":[]}

package/lib/commonjs/utils/tokens.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defineConsts = defineConsts;
+exports.defineVars = defineVars;
+function defineVars(defaults) {
+  return Object.freeze({
+    ...defaults
+  });
+}
+
+// NOTE: RNでは、build前compileがないので、defineConstsはdefineVarsのAliasとして扱う
+function defineConsts(consts) {
+  return defineVars(consts);
+}
+//# sourceMappingURL=tokens.js.map

package/lib/commonjs/utils/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["defineVars","defaults","Object","freeze","defineConsts","consts"],"sources":["tokens.ts"],"sourcesContent":["import { VariantStyle } from './types';\n\nexport function defineVars<\n  T extends Record<string, string | number | VariantStyle<string | number>>\n>(defaults: T): Readonly<T> {\n  return Object.freeze({ ...defaults });\n}\n\n// NOTE: RNでは、build前compileがないので、defineConstsはdefineVarsのAliasとして扱う\nexport function defineConsts<\n  T extends Record<string, string | number | VariantStyle<string | number>>\n>(consts: T): Readonly<T> {\n  return defineVars(consts);\n}\n"],"mappings":";;;;;;;AAEO,SAASA,UAAUA,CAExBC,QAAW,EAAe;EAC1B,OAAOC,MAAM,CAACC,MAAM,CAAC;IAAE,GAAGF;EAAS,CAAC,CAAC;AACvC;;AAEA;AACO,SAASG,YAAYA,CAE1BC,MAAS,EAAe;EACxB,OAAOL,UAAU,CAACK,MAAM,CAAC;AAC3B","ignoreList":[]}

package/lib/commonjs/utils/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/lib/commonjs/utils/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["import type { StyleSheet } from 'react-native';\n\nexport type StyleObject = StyleSheet.NamedStyles<any>;\nexport type RNStyle = StyleObject[string];\n\nexport type VariantStyle<S> = { [key: string]: S };\nexport type VariantStyleSheet<Key extends string, S extends RNStyle> = {\n  [key in Key]: S;\n};\n\nexport type XRNStyle<S extends RNStyle = RNStyle> = {\n  [key in keyof S]: VariantStyle<S[key]> | S[key];\n};\n\ntype ExtractVariantKeys<\n  X extends XRNStyle<S>,\n  S extends RNStyle = RNStyle\n> = Extract<keyof Extract<X[keyof X], VariantStyle<any>>, string>;\n\nexport type NamedStyles<T = string, R extends RNStyle = RNStyle> = {\n  [P in keyof T]: XRNStyle<R>;\n};\n\nexport type XRNStyleSheets<\n  X extends NamedStyles<any, S>,\n  S extends RNStyle = RNStyle\n> = {\n  [key in keyof X]: VariantStyleSheet<ExtractVariantKeys<X[key]>, S>;\n};\n\ntype ExtractPostFix<T extends string> = T extends `@${string}_${infer PostFix}`\n  ? PostFix\n  : 'default';\n\n// NOTE: This map for keyof (X | Y) = (keyof X & keyof Y) != (keyof X | keyof Y).\n// different object value is composed to union type and keyof is applied later\n// without explicit individual object evaluation by this utility type.\ntype KeysOfUnion<T> = T extends T ? keyof T : never;\n\nexport type Variants<\n  A extends Record<string, Record<string, Record<string, any>>>\n> = {\n  [key in keyof A]?:\n    | number\n    | boolean\n    | ExtractPostFix<Extract<KeysOfUnion<A[key][keyof A[key]]>, string>>;\n};\n\nexport type VariantValue<S extends RNStyle = RNStyle> = {\n  [key in keyof S]: VariantStyle<S[key]>;\n}; // Style Fields\n"],"mappings":"","ignoreList":[]}

package/lib/commonjs/utils/variant.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.variants = exports.createVariants = exports.createVariantValue = exports.createVariantKey = void 0;
+const createVariantKey = (variantKey, key) => `@${variantKey}_${key}`;
+exports.createVariantKey = createVariantKey;
+const createVariantValue = (variantKey, args) => {
+  return Object.entries(args).reduce((current, _ref) => {
+    let [key, value] = _ref;
+    if (key === 'default') {
+      current.default = value;
+    } else {
+      current[createVariantKey(variantKey, key)] = value;
+    }
+    return current;
+  }, {});
+};
+exports.createVariantValue = createVariantValue;
+/**
+ * INPUT;
+ *  {
+ *    shape: {
+ *      borderRadius: {
+ *        default: 4,
+ *        round: 8,
+ *        square: 0,
+ *      },
+ *      fontSize: {
+ *        default: 14,
+ *        round: 16,
+ *        square: 18,
+ *      }
+ *    }
+ *  }
+ * OUTPUT;
+ *  {
+ *    shape: {
+ *      borderRadius: {
+ *        default: 4,
+ *        @shape_round: 8,
+ *        @shape_square: 0,
+ *      },
+ *      fontSize: {
+ *        default: 14,
+ *        @shape_round: 16,
+ *        @shape_square: 18,
+ *      }
+ *    }
+ *  }
+ **/
+const createVariants = args => {
+  return Object.entries(args).reduce((current, _ref2) => {
+    let [variantKey, value] = _ref2;
+    current[variantKey] || (current[variantKey] = {});
+    Object.entries(value).forEach(_ref3 => {
+      let [styleField, variantValue] = _ref3;
+      current[variantKey][styleField] = createVariantValue(variantKey, variantValue);
+    });
+    return current;
+  }, {});
+};
+exports.createVariants = createVariants;
+const variants = (target, variants) => {
+  const results = [];
+  for (const [variantKey, variantValue] of Object.entries(variants)) {
+    if (variantValue === 'default') continue;
+    const nextStyle = target[`@${variantKey}_${variantValue}`];
+    nextStyle && results.push(nextStyle);
+  }
+  return results;
+};
+exports.variants = variants;
+//# sourceMappingURL=variant.js.map

package/lib/commonjs/utils/variant.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createVariantKey","variantKey","key","exports","createVariantValue","args","Object","entries","reduce","current","_ref","value","default","createVariants","_ref2","forEach","_ref3","styleField","variantValue","variants","target","results","nextStyle","push"],"sources":["variant.ts"],"sourcesContent":["import type {\n  RNStyle,\n  VariantStyle,\n  VariantStyleSheet,\n  VariantValue,\n} from './types';\n\ntype CreateVariantValueOutput<\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  K extends string,\n  A extends VariantStyle<any>\n> = {\n  [key in keyof A as key extends 'default'\n    ? 'default'\n    : `@${K}_${key & string}`]: A[key];\n};\n\nexport const createVariantKey = (variantKey: string, key: string) =>\n  `@${variantKey}_${key}`;\n\nexport const createVariantValue = <\n  K extends string,\n  A extends VariantStyle<any>\n>(\n  variantKey: K,\n  args: A\n): CreateVariantValueOutput<K, A> => {\n  return Object.entries(args).reduce((current, [key, value]) => {\n    if (key === 'default') {\n      (current as any).default = value;\n    } else {\n      (current as any)[createVariantKey(variantKey, key)] = value;\n    }\n    return current;\n  }, {} as CreateVariantValueOutput<K, A>);\n};\n\ntype VariantArg<S extends RNStyle = RNStyle> = Record<\n  string, // variantKey\n  VariantValue<S>\n>;\n\ntype VariantsOutput<\n  A extends Record<string, Record<string, Record<string, any>>>\n> = {\n  [key in Extract<keyof A, string>]: {\n    [subKey in keyof A[key]]: CreateVariantValueOutput<key, A[key][subKey]>;\n  };\n};\n\n/**\n * INPUT;\n *  {\n *    shape: {\n *      borderRadius: {\n *        default: 4,\n *        round: 8,\n *        square: 0,\n *      },\n *      fontSize: {\n *        default: 14,\n *        round: 16,\n *        square: 18,\n *      }\n *    }\n *  }\n * OUTPUT;\n *  {\n *    shape: {\n *      borderRadius: {\n *        default: 4,\n *        @shape_round: 8,\n *        @shape_square: 0,\n *      },\n *      fontSize: {\n *        default: 14,\n *        @shape_round: 16,\n *        @shape_square: 18,\n *      }\n *    }\n *  }\n **/\nexport const createVariants = <A extends VariantArg>(\n  args: A\n): VariantsOutput<A> => {\n  return Object.entries(args).reduce((current, [variantKey, value]) => {\n    current[variantKey] ||= {};\n    Object.entries(value).forEach(([styleField, variantValue]) => {\n      current[variantKey][styleField] = createVariantValue(\n        variantKey,\n        variantValue\n      );\n    });\n    return current;\n  }, {} as Record<string, any>) as VariantsOutput<A>;\n};\n\nexport const variants = <\n  V extends { [key: string]: string | number | boolean | undefined },\n  T extends VariantStyleSheet<any, RNStyle> = VariantStyleSheet<any, any>\n>(\n  target: T,\n  variants: V\n): T[keyof T][] => {\n  const results = [] as T[keyof T][];\n  for (const [variantKey, variantValue] of Object.entries(variants)) {\n    if (variantValue === 'default') continue;\n    const nextStyle = target[`@${variantKey}_${variantValue}`];\n    nextStyle && results.push(nextStyle as T[keyof T]);\n  }\n  return results;\n};\n"],"mappings":";;;;;;AAiBO,MAAMA,gBAAgB,GAAGA,CAACC,UAAkB,EAAEC,GAAW,KAC9D,IAAID,UAAU,IAAIC,GAAG,EAAE;AAACC,OAAA,CAAAH,gBAAA,GAAAA,gBAAA;AAEnB,MAAMI,kBAAkB,GAAGA,CAIhCH,UAAa,EACbI,IAAO,KAC4B;EACnC,OAAOC,MAAM,CAACC,OAAO,CAACF,IAAI,CAAC,CAACG,MAAM,CAAC,CAACC,OAAO,EAAAC,IAAA,KAAmB;IAAA,IAAjB,CAACR,GAAG,EAAES,KAAK,CAAC,GAAAD,IAAA;IACvD,IAAIR,GAAG,KAAK,SAAS,EAAE;MACpBO,OAAO,CAASG,OAAO,GAAGD,KAAK;IAClC,CAAC,MAAM;MACJF,OAAO,CAAST,gBAAgB,CAACC,UAAU,EAAEC,GAAG,CAAC,CAAC,GAAGS,KAAK;IAC7D;IACA,OAAOF,OAAO;EAChB,CAAC,EAAE,CAAC,CAAmC,CAAC;AAC1C,CAAC;AAACN,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAeF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMS,cAAc,GACzBR,IAAO,IACe;EACtB,OAAOC,MAAM,CAACC,OAAO,CAACF,IAAI,CAAC,CAACG,MAAM,CAAC,CAACC,OAAO,EAAAK,KAAA,KAA0B;IAAA,IAAxB,CAACb,UAAU,EAAEU,KAAK,CAAC,GAAAG,KAAA;IAC9DL,OAAO,CAACR,UAAU,CAAC,KAAnBQ,OAAO,CAACR,UAAU,CAAC,GAAK,CAAC,CAAC;IAC1BK,MAAM,CAACC,OAAO,CAACI,KAAK,CAAC,CAACI,OAAO,CAACC,KAAA,IAAgC;MAAA,IAA/B,CAACC,UAAU,EAAEC,YAAY,CAAC,GAAAF,KAAA;MACvDP,OAAO,CAACR,UAAU,CAAC,CAACgB,UAAU,CAAC,GAAGb,kBAAkB,CAClDH,UAAU,EACViB,YACF,CAAC;IACH,CAAC,CAAC;IACF,OAAOT,OAAO;EAChB,CAAC,EAAE,CAAC,CAAwB,CAAC;AAC/B,CAAC;AAACN,OAAA,CAAAU,cAAA,GAAAA,cAAA;AAEK,MAAMM,QAAQ,GAAGA,CAItBC,MAAS,EACTD,QAAW,KACM;EACjB,MAAME,OAAO,GAAG,EAAkB;EAClC,KAAK,MAAM,CAACpB,UAAU,EAAEiB,YAAY,CAAC,IAAIZ,MAAM,CAACC,OAAO,CAACY,QAAQ,CAAC,EAAE;IACjE,IAAID,YAAY,KAAK,SAAS,EAAE;IAChC,MAAMI,SAAS,GAAGF,MAAM,CAAC,IAAInB,UAAU,IAAIiB,YAAY,EAAE,CAAC;IAC1DI,SAAS,IAAID,OAAO,CAACE,IAAI,CAACD,SAAuB,CAAC;EACpD;EACA,OAAOD,OAAO;AAChB,CAAC;AAAClB,OAAA,CAAAgB,QAAA,GAAAA,QAAA","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,6 @@
+export { create, props, mix } from './utils/base';
+export { createVariants } from './utils/variant';
+export { defineConsts, defineVars } from './utils/tokens';
+export { useStylex, RNStyleXProvider } from './utils/hooks';
+export { createThemes } from './utils/theme';
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["create","props","mix","createVariants","defineConsts","defineVars","useStylex","RNStyleXProvider","createThemes"],"sources":["index.ts"],"sourcesContent":["export { create, props, mix } from './utils/base';\nexport { createVariants } from './utils/variant';\nexport { defineConsts, defineVars } from './utils/tokens';\nexport { useStylex, RNStyleXProvider } from './utils/hooks';\nexport { createThemes } from './utils/theme';\nexport type {\n  Variants,\n  XRNStyle,\n  RNStyle,\n  XRNStyleSheets,\n} from './utils/types';\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,KAAK,EAAEC,GAAG,QAAQ,cAAc;AACjD,SAASC,cAAc,QAAQ,iBAAiB;AAChD,SAASC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACzD,SAASC,SAAS,EAAEC,gBAAgB,QAAQ,eAAe;AAC3D,SAASC,YAAY,QAAQ,eAAe","ignoreList":[]}

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

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