@stylexjs/shared 0.1.0-beta.7 → 0.2.0-beta.10

package/lib/stylex-defaultValue.js

@@ -10,22 +10,38 @@ var _dashify = _interopRequireDefault(require("./utils/dashify"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
+function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
+function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
 var _set = /*#__PURE__*/new WeakSet();
+var _mediaWidths = /*#__PURE__*/new WeakMap();
+var _mediaHeights = /*#__PURE__*/new WeakMap();
 class StylexValueBuilder {
   constructor(defaultValue) {
     _classPrivateMethodInitSpec(this, _set);
+    _classPrivateFieldInitSpec(this, _mediaWidths, {
+      writable: true,
+      value: []
+    });
+    _classPrivateFieldInitSpec(this, _mediaHeights, {
+      writable: true,
+      value: []
+    });
     this.default = defaultValue;
   }
-  // @media Queries
-
-  mediaPrint(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media print', value);
-  }
   mediaWidth(_ref, value) {
     let [min, max] = _ref;
+    if (_classPrivateFieldGet(this, _mediaWidths).some(_ref2 => {
+      let [m, M] = _ref2;
+      return m <= min && min < M || m < max && max <= M || min <= m && max >= M;
+    })) {
+      throw new Error(messages.OVERLAPPING_MEDIA_WIDTHS);
+    }
+    _classPrivateFieldGet(this, _mediaWidths).push([min, max]);
     if (min > 0 && max < Infinity) {
       return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-width: ${min}px and max-width: ${max}px)`, value);
     } else if (min === 0) {
@@ -35,8 +51,15 @@ class StylexValueBuilder {
     }
     throw new Error(messages.INVALID_MEDIA_QUERY);
   }
-  mediaHeight(_ref2, value) {
-    let [min, max] = _ref2;
+  mediaHeight(_ref3, value) {
+    let [min, max] = _ref3;
+    if (_classPrivateFieldGet(this, _mediaHeights).some(_ref4 => {
+      let [m, M] = _ref4;
+      return m <= min && min < M || m < max && max <= M || min <= m && max >= M;
+    })) {
+      throw new Error(messages.OVERLAPPING_MEDIA_HEIGHTS);
+    }
+    _classPrivateFieldGet(this, _mediaHeights).push([min, max]);
     if (min > 0 && max < Infinity) {
       return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-height: ${min}px and max-height: ${max}px)`, value);
     } else if (min === 0) {
@@ -46,110 +69,184 @@ class StylexValueBuilder {
     }
     throw new Error(messages.INVALID_MEDIA_QUERY);
   }
-  mediaAspectRatio(_ref3, value) {
-    let [min, max] = _ref3;
-    if (min > 0 && max < Infinity) {
-      return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-aspect-ratio: ${min} and max-aspect-ratio: $, })`, value);
-    } else if (min === 0) {
-      return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (max-aspect-ratio: ${max})`, value);
-    } else if (max === Infinity) {
-      return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-aspect-ratio: ${min})`, value);
-    }
-    throw new Error(messages.INVALID_MEDIA_QUERY);
-  }
-  mediaPortrait(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (orientation: portrait)', value);
-  }
-  mediaLandscape(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (orientation: landscape)', value);
-  }
-  mediaSRGBDisplay(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (color-gamut: srgb)', value);
-  }
-  mediaP3Display(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (color-gamut: p3)', value);
-  }
-  mediaRec2020Display(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (color-gamut: rec2020)', value);
-  }
-  mediaIsFullscreen(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (display-mode: fullscreen)', value);
-  }
+
+  // mediaAspectRatio<TAddedValue>(
+  //   [min, max]: [number, number],
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   if (min > 0 && max < Infinity) {
+  //     return this.#set(
+  //       `@media (min-aspect-ratio: ${min} and max-aspect-ratio: $, })`,
+  //       value
+  //     );
+  //   } else if (min === 0) {
+  //     return this.#set(`@media (max-aspect-ratio: ${max})`, value);
+  //   } else if (max === Infinity) {
+  //     return this.#set(`@media (min-aspect-ratio: ${min})`, value);
+  //   }
+  //   throw new Error(messages.INVALID_MEDIA_QUERY);
+  // }
+
+  // mediaPortrait<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (orientation: portrait)', value);
+  // }
+
+  // mediaLandscape<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (orientation: landscape)', value);
+  // }
+
+  // mediaSRGBDisplay<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (color-gamut: srgb)', value);
+  // }
+
+  // mediaP3Display<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (color-gamut: p3)', value);
+  // }
+
+  // mediaRec2020Display<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (color-gamut: rec2020)', value);
+  // }
+
+  // mediaIsFullscreen<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (display-mode: fullscreen)', value);
+  // }
 
   // These are confusing, so skipping them for now
   // mediaIsStandalone
   // mediaIsMinimalUI
 
-  mediaSDRDisplay(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (dynamic-range: standard)', value);
-  }
-  mediaHDRDisplay(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (dynamic-range: high)', value);
-  }
-  mediaSupportsHDRVideo(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (video-dynamic-range: high)', value);
-  }
+  // mediaSDRDisplay<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (dynamic-range: standard)', value);
+  // }
+
+  // mediaHDRDisplay<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (dynamic-range: high)', value);
+  // }
+
+  // mediaSupportsHDRVideo<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (video-dynamic-range: high)', value);
+  // }
 
   //<TAddedValue> mediaHasColor(value: TAddedValue): StylexValueBuilder<TValue | TAddedValue> {
   //  return this.#set('@media (color)', value);
   // }
 
-  primaryInputCanHover(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (hover: hover)', value);
-  }
-  primaryInputCanNotHover(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (hover: none)', value);
-  }
-  someInputCanHover(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (any-hover: hover)', value);
-  }
-  noInputCanHover(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (any-hover: none)', value);
-  }
-  somePointerIsFine(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (any-pointer: fine)', value);
-  }
-  somePointerIsCoarse(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (any-pointer: coarse)', value);
-  }
-  primaryPointerIsFine(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (pointer: fine)', value);
-  }
-  primaryPointerIsCoarse(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (pointer: coarse)', value);
-  }
-  lightMode(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (prefers-color-scheme: light)', value);
-  }
-  darkMode(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (prefers-color-scheme: dark)', value);
-  }
-  userPrefersMoreContrast(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (prefers-contrast: more)', value);
-  }
-  userPrefersLessContrast(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (prefers-contrast: less)', value);
-  }
-  userPrefersReducedMotion(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (prefers-reduced-motion)', value);
-  }
-  noScript(value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, '@media (scripting: none)', value);
-  }
-  matchMediaUNSAFE(query, value) {
+  // primaryInputCanHover<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (hover: hover)', value);
+  // }
+  // primaryInputCanNotHover<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (hover: none)', value);
+  // }
+
+  // someInputCanHover<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (any-hover: hover)', value);
+  // }
+
+  // noInputCanHover<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (any-hover: none)', value);
+  // }
+
+  // somePointerIsFine<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (any-pointer: fine)', value);
+  // }
+
+  // somePointerIsCoarse<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (any-pointer: coarse)', value);
+  // }
+
+  // primaryPointerIsFine<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (pointer: fine)', value);
+  // }
+
+  // primaryPointerIsCoarse<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (pointer: coarse)', value);
+  // }
+
+  // lightMode<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (prefers-color-scheme: light)', value);
+  // }
+
+  // darkMode<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (prefers-color-scheme: dark)', value);
+  // }
+
+  // userPrefersMoreContrast<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (prefers-contrast: more)', value);
+  // }
+
+  // userPrefersLessContrast<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (prefers-contrast: less)', value);
+  // }
+
+  // userPrefersReducedMotion<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (prefers-reduced-motion)', value);
+  // }
+
+  // noScript<TAddedValue>(
+  //   value: TAddedValue
+  // ): StylexValueBuilder<TValue | TAddedValue> {
+  //   return this.#set('@media (scripting: none)', value);
+  // }
+
+  // Choosing a catch-all for now for familiarity
+  matchMedia(query, value) {
     return _classPrivateMethodGet(this, _set, _set2).call(this, `@media ${query}`, value);
   }
   supports(selector, value) {
-    const toSelector = _ref4 => {
-      let [k, v] = _ref4;
+    const toSelector = _ref5 => {
+      let [k, v] = _ref5;
       return `(${(0, _dashify.default)(k)}: ${String(v)})`;
     };
     const query = Object.entries(selector).map(toSelector).join(' and ');
     return _classPrivateMethodGet(this, _set, _set2).call(this, `@supports ${query}`, value);
   }
   supportsNot(selector, value) {
-    const toSelector = _ref5 => {
-      let [k, v] = _ref5;
+    const toSelector = _ref6 => {
+      let [k, v] = _ref6;
       return `(not (${(0, _dashify.default)(k)}: ${String(v)}))`;
     };
     const query = Object.entries(selector).map(toSelector).join(' and ');
@@ -203,12 +300,6 @@ class StylexValueBuilder {
   invalid(value) {
     return _classPrivateMethodGet(this, _set, _set2).call(this, ':invalid', value);
   }
-  isUNSAFE(selector, value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, `:is(${selector})`, value);
-  }
-  notUNSAFE(selector, value) {
-    return _classPrivateMethodGet(this, _set, _set2).call(this, `:not(${selector})`, value);
-  }
   lang(value) {
     return _classPrivateMethodGet(this, _set, _set2).call(this, ':lang', value);
   }
@@ -251,9 +342,50 @@ class StylexValueBuilder {
   visited(value) {
     return _classPrivateMethodGet(this, _set, _set2).call(this, ':visited', value);
   }
+  get not() {
+    return {
+      hover: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:hover)', value),
+      focus: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:focus)', value),
+      focusVisible: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:focus-visible)', value),
+      focusWithin: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:focus-within)', value),
+      active: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:active)', value),
+      anyLink: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:any-link)', value),
+      autofill: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:autofill)', value),
+      checked: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:checked)', value),
+      defaultSelection: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:default)', value),
+      disabled: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:disabled)', value),
+      empty: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:empty)', value),
+      enabled: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:enabled)', value),
+      fullscreen: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:fullscreen)', value),
+      indeterminate: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:indeterminate)', value),
+      invalid: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:invalid)', value),
+      lang: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:lang)', value),
+      dirRTLUNSFAE: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:dir-rtlunsfae)', value),
+      link: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:link)', value),
+      optional: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:optional)', value),
+      pictureInPicture: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:picture-in-picture)', value),
+      placeholderShown: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:placeholder-shown)', value),
+      paused: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:paused)', value),
+      playing: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:playing)', value),
+      readOnly: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:read-only)', value),
+      readWrite: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:read-write)', value),
+      required: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:required)', value),
+      target: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:target)', value),
+      valid: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:valid)', value),
+      visited: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:visited)', value)
+    };
+  }
   pseudoUNSAFE(selector, value) {
     return _classPrivateMethodGet(this, _set, _set2).call(this, `:${selector}`, value);
   }
+  // These can be used to write arbitrary CSS selectors
+  // Which is UNSAFE!
+  _isUNSAFE(selector, value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, `:is(${selector})`, value);
+  }
+  _notUNSAFE(selector, value) {
+    return _classPrivateMethodGet(this, _set, _set2).call(this, `:not(${selector})`, value);
+  }
 }
 exports.StylexValueBuilder = StylexValueBuilder;
 function _set2(key, value) {

package/lib/stylex-keyframes.js

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = styleXKeyframes;
 var _hash = _interopRequireDefault(require("./hash"));
-var _expandShorthands = _interopRequireDefault(require("./expand-shorthands"));
+var _index = _interopRequireDefault(require("./preprocess-rules/index"));
 var _generateLtr = _interopRequireDefault(require("./physical-rtl/generate-ltr"));
 var _generateRtl = _interopRequireDefault(require("./physical-rtl/generate-rtl"));
 var _transformValue = _interopRequireDefault(require("./transform-value"));
 var _dashify = _interopRequireDefault(require("./utils/dashify"));
 var _objectUtils = require("./utils/object-utils");
+var _defaultOptions = require("./utils/default-options");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
@@ -27,11 +28,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // It also expands shorthand properties to maintain parity with
 // `stylex.create`.
 function styleXKeyframes(frames) {
-  let {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions.defaultOptions;
+  const {
     stylexSheetName = '<>',
     classNamePrefix = 'x'
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const expandedObject = (0, _objectUtils.objMap)(frames, frame => _objectUtils.Pipe.create(frame).pipe(expandFrameShorthands).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value))).done());
+  } = options;
+  const expandedObject = (0, _objectUtils.objMap)(frames, frame => _objectUtils.Pipe.create(frame).pipe(frame => expandFrameShorthands(frame, options)).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value))).done());
   const ltrStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, _generateLtr.default));
   const rtlStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, entry => (0, _generateRtl.default)(entry) ?? entry));
   const ltrString = constructKeyframesObj(ltrStyles);
@@ -47,16 +49,27 @@ function styleXKeyframes(frames) {
     priority: 1
   }];
 }
-function expandFrameShorthands(frame) {
-  return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(frame).flatMap(pair => (0, _expandShorthands.default)(pair)));
+function expandFrameShorthands(frame, options) {
+  return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(frame).flatMap(pair => (0, _index.default)(pair, options).map(_ref => {
+    let [key, value] = _ref;
+    if (typeof value === 'string' || typeof value === 'number') {
+      return [key, value];
+    }
+    return null;
+  }).filter(Boolean))
+  // Keyframes are not combined. The nulls can be skipped
+  .filter(_ref2 => {
+    let [_key, value] = _ref2;
+    return value != null;
+  }));
 }
 
 // Create t
 function constructKeyframesObj(frames) {
-  return (0, _objectUtils.objEntries)(frames).map(_ref => {
-    let [key, value] = _ref;
-    return `${key}{${(0, _objectUtils.objEntries)(value).map(_ref2 => {
-      let [k, v] = _ref2;
+  return (0, _objectUtils.objEntries)(frames).map(_ref3 => {
+    let [key, value] = _ref3;
+    return `${key}{${(0, _objectUtils.objEntries)(value).map(_ref4 => {
+      let [k, v] = _ref4;
       return `${k}:${v};`;
     }).join('')}}`;
   }).join('');

package/lib/utils/Rule.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Rule = exports.RawRuleRTLTuple = exports.RawRuleList = exports.RawRule = exports.CompiledRuleTuple2 = exports.CompiledRule = void 0;
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * 
+ */
+
+/**
+ * This could be an interface, but we use a class so that we can
+ * use instanceof to check for it.
+ */
+// eslint-disable-next-line no-unused-vars
+class Rule {}
+
+/**
+ * This is a class that represents a raw style rule.
+ *
+ * It exists to track the actual CSS rule that should be compiled
+ * even as we transform the structure of the RawStyles object.
+ */
+exports.Rule = Rule;
+class RawRule extends Rule {
+  constructor(key, value, psuedos, atRules) {
+    super();
+    this.key = key;
+    this.value = value;
+    this.psuedos = psuedos;
+    this.atRules = atRules;
+  }
+}
+exports.RawRule = RawRule;
+class RawRuleList extends Rule {
+  constructor(rules) {
+    super();
+    this.rules = rules;
+  }
+}
+exports.RawRuleList = RawRuleList;
+class RawRuleRTLTuple extends Rule {
+  constructor(rule1, rule2) {
+    super();
+    this.rules = [rule1, rule2];
+  }
+}
+exports.RawRuleRTLTuple = RawRuleRTLTuple;
+class CompiledRule extends Rule {
+  constructor(key, value, psuedos, atRules, className) {
+    super();
+    this.key = key;
+    this.value = value;
+    this.psuedos = psuedos;
+    this.atRules = atRules;
+    this.className = className;
+  }
+}
+exports.CompiledRule = CompiledRule;
+class CompiledRuleTuple2 extends Rule {
+  constructor(rule1, rule2) {
+    super();
+    this.rules = [rule1, rule2];
+  }
+}
+exports.CompiledRuleTuple2 = CompiledRuleTuple2;

package/lib/utils/default-options.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultOptions = void 0;
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * 
+ */
+
+// {
+//   ...options,
+//   dev: !!(options as any).dev,
+//   test: !!(options as any).test,
+//   stylexSheetName: (options as any).stylexSheetName ?? undefined,
+//   classNamePrefix: (options as any).classNamePrefix ?? 'x',
+//   importSources: (options as any).importSources ?? [name, 'stylex'],
+//   definedStylexCSSVariables:
+//     (options as any).definedStylexCSSVariables ?? {},
+//   genConditionalClasses: !!(options as any).genConditionalClasses,
+//   skipShorthandExpansion: !!(options as any).skipShorthandExpansion,
+// } as StyleXOptions;
+
+const defaultOptions = {
+  dev: false,
+  test: false,
+  classNamePrefix: 'x',
+  styleResolution: 'application-order'
+};
+exports.defaultOptions = defaultOptions;

package/lib/utils/genCSSRule.js

@@ -13,12 +13,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generateCSSRule;
-function generateCSSRule(className, decls, pseudo) {
-  if (pseudo === '::thumb') {
-    const selector = THUMB_VARIANTS.map(suffix => '.' + className + suffix).join(', ');
-    return `${selector}{${decls}}`;
+exports.genCSSRule = genCSSRule;
+const THUMB_VARIANTS = ['::-webkit-slider-thumb', '::-moz-range-thumb', '::-ms-thumb'];
+function genCSSRule(className, decls, pseudos, atRules) {
+  const pseudo = pseudos.filter(p => p !== '::thumb').join('');
+  let selectorForAtRules = `.${className}` + atRules.map(() => `.${className}`).join('') + pseudo;
+  if (pseudos.includes('::thumb')) {
+    selectorForAtRules = THUMB_VARIANTS.map(suffix => selectorForAtRules + suffix).join(', ');
   }
-  return pseudo != null && pseudo[0] === '@' ? `${pseudo}{.${className}.${className}{${decls}}}` : pseudo != null && pseudo[0] === ':' ? `.${className}${pseudo}{${decls}}` : `.${className}{${decls}}`;
-}
-const THUMB_VARIANTS = ['::-webkit-slider-thumb', '::-moz-range-thumb', '::-ms-thumb'];
+  return atRules.reduce((acc, atRule) => `${atRule}{${acc}}`, `${selectorForAtRules}{${decls}}`);
+}

package/lib/utils/normalize-value.js

@@ -27,6 +27,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // changes 500ms to 0.5s, then `LeadingZero` makes it .5s
 const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _fontSizePxToRem.default];
 function normalizeValue(value, key) {
+  if (value == null) {
+    return value;
+  }
   const parsedAST = (0, _postcssValueParser.default)(value);
   return normalizers.reduce((ast, fn) => fn(ast, key), parsedAST).toString();
 }

package/lib/utils/object-utils.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Pipe = void 0;
+exports.arraySort = exports.arrayEquals = exports.Pipe = void 0;
 exports.flattenObject = flattenObject;
+exports.isPlainObject = isPlainObject;
 exports.objEntries = objEntries;
 exports.objFromEntries = objFromEntries;
 exports.objMap = objMap;
@@ -23,6 +24,9 @@ var _stylexInclude = require("../stylex-include");
 
 // A bunch of object utils with better Flow types
 
+function isPlainObject(obj) {
+  return typeof obj === 'object' && obj != null && !Array.isArray(obj) && (obj === null || obj === void 0 ? void 0 : obj.constructor) === Object;
+}
 function flattenObject(obj) {
   const result = {};
   for (const [key, value] of objEntries(obj)) {
@@ -91,4 +95,21 @@ class Pipe {
     return new Pipe(val);
   }
 }
-exports.Pipe = Pipe;
+
+// Function that sorts an array without mutating it and returns a new array
+exports.Pipe = Pipe;
+const arraySort = (arr, fn) => [...arr].sort(fn);
+exports.arraySort = arraySort;
+const arrayEquals = function (arr1, arr2) {
+  let equals = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : (a, b) => a === b;
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+  for (let i = 0; i < arr1.length; i++) {
+    if (!equals(arr1[i], arr2[i])) {
+      return false;
+    }
+  }
+  return true;
+};
+exports.arrayEquals = arrayEquals;