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

package/lib/preprocess-rules/react-native-web.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * 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.
+ *
+ * 
+ */
+
+/// # Handle CSS shorthands in a React Native compatible way.
+///
+/// This means:
+/// - disallowing certain properties altogether by throwing errors
+/// - disallowing multiple values within many shorthands
+/// - Treating certain non-standard properties as aliases for real CSS properties
+
+const shorthands = {
+  all: _ => {
+    throw new Error('all is not supported');
+  },
+  animation: value => {
+    throw new Error('animation is not supported');
+  },
+  background: value => {
+    throw new Error('background is not supported. Use background-color, border-image etc. instead.');
+  },
+  border: rawValue => {
+    throw new Error('border is not supported. Use border-width, border-style and border-color instead.');
+  },
+  borderInline: rawValue => {
+    throw new Error('borderInline is not supported. Use borderInlineWidth, borderInlineStyle and borderInlineColor instead.');
+  },
+  // @Deprecated
+  borderBlock: rawValue => {
+    throw new Error('borderBlock is not supported. Use borderBlockWidth, borderBlockStyle and borderBlockColor instead.');
+  },
+  // @Deprecated
+  borderTop: rawValue => {
+    throw new Error('borderTop is not supported. Use borderTopWidth, borderTopStyle and borderTopColor instead.');
+  },
+  // @Deprecated
+  borderInlineEnd: rawValue => {
+    throw new Error('borderInlineEnd is not supported. Use borderInlineEndWidth, borderInlineEndStyle and borderInlineEndColor instead.');
+  },
+  // @Deprecated
+  borderRight: rawValue => {
+    throw new Error('borderRight is not supported. Use borderRightWidth, borderRightStyle and borderRightColor instead.');
+  },
+  // @Deprecated
+  borderBottom: rawValue => {
+    throw new Error('borderBottom is not supported. Use borderBottomWidth, borderBottomStyle and borderBottomColor instead.');
+  },
+  // @Deprecated
+  borderInlineStart: rawValue => {
+    throw new Error('borderInlineStart is not supported. Use borderInlineStartWidth, borderInlineStartStyle and borderInlineStartColor instead.');
+  },
+  // @Deprecated
+  borderLeft: rawValue => {
+    throw new Error(['`borderLeft` is not supported.', 'You could use `borderLeftWidth`, `borderLeftStyle` and `borderLeftColor`,', 'but it is preferable to use `borderInlineStartWidth`, `borderInlineStartStyle` and `borderInlineStartColor`.'].join(' '));
+  },
+  margin: value => {
+    const values = typeof value === 'number' ? [value] : (0, _splitCssValue.default)(value);
+    if (values.length === 1) {
+      return [['margin', values[0]]];
+    } else {
+      throw new Error('margin shorthand with multiple values is not supported. Use marginTop, marginInlineEnd, marginBottom and marginInlineStart instead.');
+    }
+  },
+  padding: rawValue => {
+    const values = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
+    if (values.length === 1) {
+      return [['padding', values[0]]];
+    }
+    throw new Error('padding shorthand with multiple values is not supported. Use paddingTop, paddingInlineEnd, paddingBottom and paddingInlineStart instead.');
+  }
+};
+const aliases = {
+  // @UNSUPPORTED
+  borderHorizontal: shorthands.borderInline,
+  // @UNSUPPORTED
+  borderVertical: shorthands.borderBlock,
+  // @UNSUPPORTED
+  borderBlockStart: shorthands.borderTop,
+  // @UNSUPPORTED
+  borderEnd: shorthands.borderInlineEnd,
+  // @UNSUPPORTED
+  borderBlockEnd: shorthands.borderBottom,
+  // @UNSUPPORTED
+  borderStart: shorthands.borderInlineStart,
+  borderHorizontalWidth: value => [['borderInlineWidth', value]],
+  borderHorizontalStyle: value => [['borderInlineStyle', value]],
+  borderHorizontalColor: value => [['borderInlineColor', value]],
+  borderVerticalWidth: value => [['borderBlockWidth', value]],
+  borderVerticalStyle: value => [['borderBlockStyle', value]],
+  borderVerticalColor: value => [['borderBlockColor', value]],
+  borderBlockStartColor: value => [['borderTopColor', value]],
+  borderBlockEndColor: value => [['borderBottomColor', value]],
+  borderBlockStartStyle: value => [['borderTopStyle', value]],
+  borderBlockEndStyle: value => [['borderBottomStyle', value]],
+  borderBlockStartWidth: value => [['borderTopWidth', value]],
+  borderBlockEndWidth: value => [['borderBottomWidth', value]],
+  borderStartColor: value => [['borderInlineStartColor', value]],
+  borderEndColor: value => [['borderInlineEndColor', value]],
+  borderStartStyle: value => [['borderInlineStartStyle', value]],
+  borderEndStyle: value => [['borderInlineEndStyle', value]],
+  borderStartWidth: value => [['borderInlineStartWidth', value]],
+  borderEndWidth: value => [['borderInlineEndWidth', value]],
+  borderTopStartRadius: value => [['borderStartStartRadius', value]],
+  borderTopEndRadius: value => [['borderStartEndRadius', value]],
+  borderBottomStartRadius: value => [['borderEndStartRadius', value]],
+  borderBottomEndRadius: value => [['borderEndEndRadius', value]],
+  marginBlockStart: value => [['marginTop', value]],
+  marginBlockEnd: value => [['marginBottom', value]],
+  marginStart: value => [['marginInlineStart', value]],
+  marginEnd: value => [['marginInlineEnd', value]],
+  marginHorizontal: value => [['marginInline', value]],
+  marginVertical: value => [['marginBlock', value]],
+  paddingBlockStart: rawValue => [['paddingTop', rawValue]],
+  paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
+  paddingStart: value => [['paddingInlineStart', value]],
+  paddingEnd: value => [['paddingInlineEnd', value]],
+  paddingHorizontal: value => [['paddingInline', value]],
+  paddingVertical: value => [['paddingBlock', value]],
+  insetBlockStart: value => [['top', value]],
+  insetBlockEnd: value => [['bottom', value]],
+  start: value => [['insetInlineStart', value]],
+  end: value => [['insetInlineEnd', value]]
+};
+const expansions = {
+  ...shorthands,
+  ...aliases
+};
+var _default = expansions;
+exports.default = _default;

package/lib/stylex-create.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = styleXCreateSet;
 var _convertToClassName = _interopRequireDefault(require("./convert-to-className"));
-var _expandShorthands = _interopRequireDefault(require("./expand-shorthands"));
+var _index = _interopRequireWildcard(require("./preprocess-rules/index"));
 var _objectUtils = require("./utils/object-utils");
 var messages = _interopRequireWildcard(require("./messages"));
 var _stylexInclude = require("./stylex-include");
@@ -40,6 +40,9 @@ function styleXCreateSet(namespaces) {
     if (typeof namespace !== 'object' || Array.isArray(namespace)) {
       throw new Error(messages.ILLEGAL_NAMESPACE_VALUE);
     }
+
+    // namespace = preflatten(namespace);
+
     const [resolvedNamespace, injected] = styleXCreateNamespace(namespace, options);
     const compiledNamespace = (0, _objectUtils.flattenObject)(resolvedNamespace);
     resolvedNamespaces[namespaceName] = {
@@ -72,16 +75,18 @@ function styleXCreateSet(namespaces) {
 function styleXCreateNamespace(style, options) {
   const namespaceEntries = (0, _objectUtils.objEntries)(style);
 
-  // First the shorthand properties are expanded.
-  // e.g. `margin` gets expanded to `marginTop`, `marginBottom`, `marginStart`, `marginEnd`.
-  // `entries` is an array of [key, value] pairs.
+  // First handle shorthands. The strategy for this is based on the `styleResolution` option.
   const entries = namespaceEntries.flatMap(_ref => {
     let [key, value] = _ref;
+    // Detect style ...spreads and leave them unmodified
     if (value instanceof _stylexInclude.IncludedStyles) {
       return [[key, value]];
     }
+    // Detect nested style objects.
     if (value != null && typeof value === 'object' && !Array.isArray(value)) {
-      if (!key.startsWith(':') && !key.startsWith('@')) {
+      // Nested Objects are only allowed for legacy :pseudo, @media or long-hand properties for now.
+      // In the future, we will try to support shorthands as well.
+      if (!key.startsWith(':') && !key.startsWith('@') && (0, _index.getExpandedKeys)(options).includes(key)) {
         throw new Error(messages.INVALID_PSEUDO);
       }
       return [[key, (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(value).flatMap(_ref2 => {
@@ -89,7 +94,7 @@ function styleXCreateNamespace(style, options) {
         if (innerValue != null && typeof innerValue === 'object' && !Array.isArray(innerValue)) {
           throw new Error(messages.ILLEGAL_NESTED_PSEUDO);
         }
-        return (0, _expandShorthands.default)([innerKey, innerValue]);
+        return (0, _index.default)([innerKey, innerValue], options);
       }))]];
     } else {
       if (value !== null && typeof value !== 'string' && typeof value !== 'number' && !Array.isArray(value)) {
@@ -98,7 +103,7 @@ function styleXCreateNamespace(style, options) {
       if (Array.isArray(value) && value.some(val => typeof val === 'object')) {
         throw new Error(messages.ILLEGAL_PROP_ARRAY_VALUE);
       }
-      return (0, _expandShorthands.default)([key, value]);
+      return (0, _index.default)([key, value], options);
     }
   });
 
@@ -113,18 +118,39 @@ function styleXCreateNamespace(style, options) {
     if (val instanceof _stylexInclude.IncludedStyles) {
       resolvedNamespace[key] = val;
     } else if (val != null && typeof val === 'object' && !Array.isArray(val)) {
-      const pseudo = key;
-      const innerObj = {};
-      for (const [innerKey, innerVal] of (0, _objectUtils.objEntries)(val)) {
-        if (innerVal === null) {
-          innerObj[innerKey] = null;
-        } else {
-          const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([innerKey, innerVal], pseudo, options);
-          innerObj[updatedKey] = className;
-          injectedStyles[updatedKey + pseudo] = [className, cssRule];
+      if (key.startsWith(':') || key.startsWith('@')) {
+        const pseudo = key;
+        const innerObj = {};
+        for (const [innerKey, innerVal] of (0, _objectUtils.objEntries)(val)) {
+          if (innerVal === null) {
+            innerObj[innerKey] = null;
+          } else if (typeof innerVal === 'object' && !Array.isArray(innerVal)) {
+            throw new Error(messages.ILLEGAL_NESTED_PSEUDO);
+          } else {
+            const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([innerKey, innerVal], pseudo, options);
+            innerObj[updatedKey] = className;
+            injectedStyles[updatedKey + pseudo] = [className, cssRule];
+          }
+        }
+        resolvedNamespace[key] = innerObj;
+      } else {
+        const propKey = key;
+        const classNames = [];
+        for (const [pseudo, innerVal] of (0, _objectUtils.objEntries)(val)) {
+          if (pseudo !== 'default' && !pseudo.startsWith(':') && !pseudo.startsWith('@')) {
+            throw new Error(messages.INVALID_PSEUDO);
+          }
+          if (typeof innerVal === 'object' && !Array.isArray(innerVal)) {
+            throw new Error(messages.ILLEGAL_NESTED_PSEUDO);
+          }
+          if (innerVal !== null) {
+            const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([propKey, innerVal], pseudo === 'default' ? undefined : pseudo, options);
+            injectedStyles[updatedKey + pseudo] = [className, cssRule];
+            classNames.push(className);
+          }
         }
+        resolvedNamespace[key] = classNames.join(' ');
       }
-      resolvedNamespace[key] = innerObj;
     } else {
       if (val === null) {
         resolvedNamespace[key] = null;

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) {