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

package/lib/expand-shorthands.d.ts

@@ -0,0 +1,5 @@
+export const BANNED_PROPERTIES: { [key: string]: string };
+export const expandedKeys: $ReadOnlyArray<string>;
+export default function flatMapExpandedShorthands<T>(
+  objEntry: [string, T]
+): Array<[string, T]>;

package/lib/expand-shorthands.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.BANNED_PROPERTIES = void 0;
 exports.default = flatMapExpandedShorthands;
+exports.expandedKeys = void 0;
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /**
@@ -65,70 +67,236 @@ function splitValue(str) {
 
 /**
  * Shorthand properties:
- * - [x] all - Should be banned
- * - [ ] animation
- * - [ ] background
- * - [-] border
- * - [x] border-block-end
- * - [x] border-block-start
- * - [ ] border-bottom
- * - [x] border-color
- * - [x] border-image
- * - [x] border-inline-end
- * - [x] border-inline-start
- * - [ ] border-left
+ * - [!] all - BANNED
+ * - [!] animation - BANNED
+ * - [!] background - BANNED
+ * - [x] border - Expanded to border-{direction}. Not to border-*-(width|style|color).
+ *                This is to limit the number of atoms to 4 instead of 12.
+ * - [o] border-top - Only the shorthand is allowed.
+ * - [o] border-end - Only the shorthand is allowed.
+ * - [o] border-bottom - Only the shorthand is allowed.
+ * - [o] border-start - Only the shorthand is allowed.
+ * - [!] border-left - BANNED
+ * - [!] border-right
+ * - [!] border-*-width - BANNED
+ * - [!] border-*-style - BANNED
+ * - [!] border-*-color - BANNED
+ * - [ ] border-block-end
+ * - [ ] border-block-start
+ * - [ ] border-inline-start
+ * - [ ] border-inline-end
+ * - [!] border-image - BANNED
  * - [x] border-radius
- * - [ ] border-right
- * - [x] border-style
- * - [ ] border-top
- * - [x] border-width
- * - [ ] column-rule
- * - [ ] columns
- * - [ ] flex
- * - [ ] flex-flow
- * - [ ] font
- * - [ ] gap
- * - [ ] grid
- * - [ ] grid-area
- * - [ ] grid-column
- * - [ ] grid-row
- * - [ ] grid-template
- * - [ ] list-style
+ * - [o] column-rule - Only the shorthand is allowed.
+ * - [!] columns - BANNED
+ * - [!] flex - BANNED
+ * - [!] flex-flow - BANNED
+ * - [!] font - BANNED
+ * - [x] gap
+ * - [!] grid - BANNED
+ * - [!] grid-area - BANNED
+ * - [!] grid-column - BANNED
+ * - [!] grid-row - BANNED
+ * - [!] grid-template - BANNED
+ * - [!] grid-template-areas - BANNED
+ *
+ * - [o] list-style - Only the shorthand is allowed.
  * - [x] margin
- * - [ ] mask
- * - [ ] offset
- * - [ ] outline
+ * - [o] mask - Only the shorthand is allowed.
+ * - [o] offset - Only the shorthand is allowed.
+ * - [o] outline - Only the shorthand is allowed.
  * - [x] overflow
  * - [x] padding
- * - [ ] place-content
- * - [ ] place-items
- * - [ ] place-self
- * - [ ] scroll-margin
- * - [ ] scroll-padding
- * - [ ] text-decoration
- * - [ ] text-emphasis
- * - [ ] transition
+ * - [x] place-content
+ * - [x] place-items
+ * - [x] place-self
+ * - [X] scroll-margin
+ * - [x] scroll-padding
+ * - [o] text-decoration - Only the shorthand is allowed.
+ * - [o] text-emphasis - Only the shorthand is allowed.
+ * - [!] transition - BANNED
  */
 
+const BANNED_PROPERTIES = {
+  all: '`all` is not supported. Use individual properties instead.',
+  animation: '`animation` is not supported. Use individual properties like `animationName`, `animationDuration`, etc. instead.',
+  background: '`background` is not supported. Use individual properties like `backgroundImage`, `backgroundPosition`, etc. instead.',
+  borderColor: '`borderColor` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.',
+  borderStyle: '`borderStyle` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.',
+  borderWidth: '`borderWidth` is not supported. Use `border`, `borderTop`, `borderEnd`, `borderBottom` or `borderStart` instead.',
+  borderTopColor: '`borderTopColor` is not supported. Use `borderTop` instead.',
+  borderTopStyle: '`borderTopStyle` is not supported. Use `borderTop` instead.',
+  borderTopWidth: '`borderTopWidth` is not supported. Use `borderTop` instead.',
+  borderEndColor: '`borderEndColor` is not supported. Use `borderEnd` instead.',
+  borderEndStyle: '`borderEndStyle` is not supported. Use `borderEnd` instead.',
+  borderEndWidth: '`borderEndWidth` is not supported. Use `borderEnd` instead.',
+  borderBottomColor: '`borderBottomColor` is not supported. Use `borderBottom` instead.',
+  borderBottomStyle: '`borderBottomStyle` is not supported. Use `borderBottom` instead.',
+  borderBottomWidth: '`borderBottomWidth` is not supported. Use `borderBottom` instead.',
+  borderStartColor: '`borderStartColor` is not supported. Use `borderStart` instead.',
+  borderStartStyle: '`borderStartStyle` is not supported. Use `borderStart` instead.',
+  borderStartWidth: '`borderStartWidth` is not supported. Use `borderStart` instead.',
+  borderBlockStartColor: '`borderBlockStartColor` is not supported. Use `borderTop` instead.',
+  borderBlockStartStyle: '`borderBlockStartStyle` is not supported. Use `borderTop` instead.',
+  borderBlockStartWidth: '`borderBlockStartWidth` is not supported. Use `borderTop` instead.',
+  borderBlockEndColor: '`borderBlockEndColor` is not supported. Use `borderBottom` instead.',
+  borderBlockEndStyle: '`borderBlockEndStyle` is not supported. Use `borderBottom` instead.',
+  borderBlockEndWidth: '`borderBlockEndWidth` is not supported. Use `borderBottom` instead.',
+  borderInlineStartColor: '`borderInlineStartColor` is not supported. Use `borderStart` instead.',
+  borderInlineStartStyle: '`borderInlineStartStyle` is not supported. Use `borderStart` instead.',
+  borderInlineStartWidth: '`borderInlineStartWidth` is not supported. Use `borderStart` instead.',
+  borderInlineEndColor: '`borderInlineEndColor` is not supported. Use `borderEnd` instead.',
+  borderInlineEndStyle: '`borderInlineEndStyle` is not supported. Use `borderEnd` instead.',
+  borderInlineEndWidth: '`borderInlineEndWidth` is not supported. Use `borderEnd` instead.',
+  borderLeft: '`borderLeft` is not supported. Use `borderStart` instead.',
+  borderLeftColor: '`borderLeftColor` is not supported. Use `borderStart` instead.',
+  borderLeftStyle: '`borderLeftStyle` is not supported. Use `borderStart` instead.',
+  borderLeftWidth: '`borderLeftWidth` is not supported. Use `borderStart` instead.',
+  borderRight: '`borderRight` is not supported. Use `borderEnd` instead.',
+  borderRightColor: '`borderRightColor` is not supported. Use `borderEnd` instead.',
+  borderRightStyle: '`borderRightStyle` is not supported. Use `borderEnd` instead.',
+  borderRightWidth: '`borderRightWidth` is not supported. Use `borderEnd` instead.',
+  borderTopLeftRadius: '`borderTopLeftRadius` is not supported. Use `borderTopStartRadius` instead.',
+  borderTopRightRadius: '`borderTopRightRadius` is not supported. Use `borderTopEndRadius` instead.',
+  borderBottomLeftRadius: '`borderBottomLeftRadius` is not supported. Use `borderBottomStartRadius` instead.',
+  borderBottomRightRadius: '`borderBottomRightRadius` is not supported. Use `borderBottomEndRadius` instead.',
+  borderImageSource: '`borderImageSource` is not supported. Use `borderImage` instead.',
+  borderImageSlice: '`borderImageSlice` is not supported. Use `borderImage` instead.',
+  borderImageWidth: '`borderImageWidth` is not supported. Use `borderImage` instead.',
+  borderImageOutset: '`borderImageOutset` is not supported. Use `borderImage` instead.',
+  borderImageRepeat: '`borderImageRepeat` is not supported. Use `borderImage` instead.',
+  marginLeft: '`marginLeft` is not supported. Use `marginStart` instead.',
+  marginRight: '`marginRight` is not supported. Use `marginEnd` instead.',
+  paddingLeft: '`paddingLeft` is not supported. Use `paddingStart` instead.',
+  paddingRight: '`paddingRight` is not supported. Use `paddingEnd` instead.',
+  columnRuleWidth: '`columnRuleWidth` is not supported. Use `columnRule` instead.',
+  columnRuleStyle: '`columnRuleStyle` is not supported. Use `columnRule` instead.',
+  columnRuleColor: '`columnRuleColor` is not supported. Use `columnRule` instead.',
+  columns: '`columns` is not supported. Use `columnCount` and `columnWidth` instead.',
+  flex: '`flex` is not supported. Use `flexGrow`, `flexShrink`, and `flexBasis` instead.',
+  flexFlow: '`flexFlow` is not supported. Use `flexDirection` and `flexWrap` instead.',
+  font: '`font` is not supported. Use individual properties like `fontFamily`, `fontSize`, etc. instead.',
+  grid: '`grid` is not supported. Use individual properties like `gridTemplateColumns`, `gridTemplateRows`, etc. instead.',
+  gridColumn: '`gridColumn` is not supported. Use `gridColumnStart` and `gridColumnEnd` instead.',
+  gridRow: '`gridRow` is not supported. Use `gridRowStart` and `gridRowEnd` instead.',
+  gridArea: '`gridArea` is not supported. Use `gridRowStart`, `gridColumnStart`, `gridRowEnd`, and `gridColumnEnd` instead.',
+  gridTemplate: '`gridTemplate` is not supported. Use individual properties like `gridTemplateColumns`, `gridTemplateRows`, etc. instead.',
+  gridTemplateAreas: '`gridTemplateAreas` is not supported. Use `gridTemplateRows` and `gridTemplateColumns` instead.',
+  listStyleImage: '`listStyleImage` is not supported. Use `listStyle` instead.',
+  listStylePosition: '`listStylePosition` is not supported. Use `listStyle` instead.',
+  listStyleType: '`listStyleType` is not supported. Use `listStyle` instead.',
+  maskClip: '`maskClip` is not supported. Use `mask` instead.',
+  maskComposite: '`maskComposite` is not supported. Use `mask` instead.',
+  maskImage: '`maskImage` is not supported. Use `mask` instead.',
+  maskMode: '`maskMode` is not supported. Use `mask` instead.',
+  maskOrigin: '`maskOrigin` is not supported. Use `mask` instead.',
+  maskPosition: '`maskPosition` is not supported. Use `mask` instead.',
+  maskRepeat: '`maskRepeat` is not supported. Use `mask` instead.',
+  maskSize: '`maskSize` is not supported. Use `mask` instead.',
+  offsetAnchor: '`offsetAnchor` is not supported. Use `offset` instead.',
+  offsetDistance: '`offsetDistance` is not supported. Use `offset` instead.',
+  offsetPath: '`offsetPath` is not supported. Use `offset` instead.',
+  offsetPosition: '`offsetPosition` is not supported. Use `offset` instead.',
+  offsetRotate: '`offsetRotate` is not supported. Use `offset` instead.',
+  outlineColor: '`outlineColor` is not supported. Use `outline` instead.',
+  outlineStyle: '`outlineStyle` is not supported. Use `outline` instead.',
+  outlineWidth: '`outlineWidth` is not supported. Use `outline` instead.',
+  textDecorationColor: '`textDecorationColor` is not supported. Use `textDecoration` instead.',
+  textDecorationLine: '`textDecorationLine` is not supported. Use `textDecoration` instead.',
+  textDecorationStyle: '`textDecorationStyle` is not supported. Use `textDecoration` instead.',
+  textDecorationThickness: '`textDecorationThickness` is not supported. Use `textDecoration` instead.',
+  textEmphasisColor: '`textEmphasisColor` is not supported. Use `textEmphasis` instead.',
+  textEmphasisStyle: '`textEmphasisStyle` is not supported. Use `textEmphasis` instead.',
+  transition: '`transition` is not supported. Use individual properties like `transitionProperty`, `transitionDuration`, etc. instead.'
+};
+exports.BANNED_PROPERTIES = BANNED_PROPERTIES;
 const expansions = {
-  // ...aliases,
   border: rawValue => {
     return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
   },
-  /*
-  // Add this later, as this will be a breaking change
-  border: (rawValue: string) => {
-    if (typeof rawValue === 'number') {
-      return expansions.borderWidth(rawValue);
-    }
-    const [width, style, color] = splitValue(rawValue);
-    return [
-      ...expansions.borderWidth(width),
-      ...expansions.borderStyle(style),
-      ...expansions.borderColor(color),
-    ];
-  }
-  */
+  // border: (rawValue: string) => {
+  //   if (typeof rawValue === 'number') {
+  //     return expansions.borderWidth(rawValue);
+  //   }
+  //   const [width, style, color, more] = splitValue(rawValue);
+  //   if (more != null) {
+  //     throw new Error(messages.MULTIPLE_DIRECTIONS_IN_SHORTHAND);
+  //   }
+  //   if (style == null || color == null) {
+  //     throw new Error(
+  //       'Border shorthand requires at least 2 values - width, style and color.'
+  //     );
+  //   }
+  //   return [
+  //     ...expansions.borderWidth(width),
+  //     ...expansions.borderStyle(style),
+  //     ...expansions.borderColor(color),
+  //   ];
+  // },
+  // borderTop: (rawValue: string) => {
+  //   if (typeof rawValue === 'number') {
+  //     return [['borderTopWidth', rawValue + 'px']];
+  //   }
+  //   const [width, style, color] = splitValue(rawValue);
+  //   if (style == null || color == null) {
+  //     throw new Error(
+  //       'BorderTop shorthand requires at least 2 values - width, style and color.'
+  //     );
+  //   }
+  //   return [
+  //     ['borderTopWidth', width],
+  //     ['borderTopStyle', style],
+  //     ['borderTopColor', color],
+  //   ];
+  // },
+  // borderEnd: (rawValue: string) => {
+  //   if (typeof rawValue === 'number') {
+  //     return [['borderEndWidth', rawValue + 'px']];
+  //   }
+  //   const [width, style, color] = splitValue(rawValue);
+  //   if (style == null || color == null) {
+  //     throw new Error(
+  //       'BorderEnd shorthand requires at least 2 values - width, style and color.'
+  //     );
+  //   }
+  //   return [
+  //     ['borderEndWidth', width],
+  //     ['borderEndStyle', style],
+  //     ['borderEndColor', color],
+  //   ];
+  // },
+  // borderBottom: (rawValue: string) => {
+  //   if (typeof rawValue === 'number') {
+  //     return [['borderBottomWidth', rawValue + 'px']];
+  //   }
+  //   const [width, style, color] = splitValue(rawValue);
+  //   if (style == null || color == null) {
+  //     throw new Error(
+  //       'BorderBottom shorthand requires at least 2 values - width, style and color.'
+  //     );
+  //   }
+  //   return [
+  //     ['borderBottomWidth', width],
+  //     ['borderBottomStyle', style],
+  //     ['borderBottomColor', color],
+  //   ];
+  // },
+  // borderStart: (rawValue: string) => {
+  //   if (typeof rawValue === 'number') {
+  //     return [['borderStartWidth', rawValue + 'px']];
+  //   }
+  //   const [width, style, color] = splitValue(rawValue);
+  //   if (style == null || color == null) {
+  //     throw new Error(
+  //       'BorderStart shorthand requires at least 2 values - width, style and color.'
+  //     );
+  //   }
+  //   return [
+  //     ['borderStartWidth', width],
+  //     ['borderStartStyle', style],
+  //     ['borderStartColor', color],
+  //   ];
+  // },
   borderColor: rawValue => {
     const [top, right = top, bottom = top, left = right] = splitValue(rawValue);
     return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]];
@@ -175,8 +343,37 @@ const expansions = {
   },
   paddingVertical: rawValue => {
     return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
+  },
+  gap: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['rowGap', rawValue], ['columnGap', rawValue]];
+    }
+    const [row, column = row] = splitValue(rawValue);
+    return [['rowGap', row], ['columnGap', column]];
+  },
+  placeContent: rawValue => {
+    const [align, justify = align] = splitValue(rawValue);
+    return [['alignContent', align], ['justifyContent', justify]];
+  },
+  placeItems: rawValue => {
+    const [align, justify = align] = splitValue(rawValue);
+    return [['alignItems', align], ['justifyItems', justify]];
+  },
+  placeSelf: rawValue => {
+    const [align, justify = align] = splitValue(rawValue);
+    return [['alignSelf', align], ['justifySelf', justify]];
+  },
+  scrollMargin: rawValue => {
+    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
+    return [['scrollMarginTop', top], ['scrollMarginEnd', right], ['scrollMarginBottom', bottom], ['scrollMarginStart', left]];
+  },
+  scrollPadding: rawValue => {
+    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
+    return [['scrollPaddingTop', top], ['scrollPaddingEnd', right], ['scrollPaddingBottom', bottom], ['scrollPaddingStart', left]];
   }
 };
+const expandedKeys = [...Object.keys(expansions), ...Object.keys(BANNED_PROPERTIES)];
+exports.expandedKeys = expandedKeys;
 function flatMapExpandedShorthands(objEntry) {
   const [key, value] = objEntry;
   const expansion = expansions[key];

package/lib/index.d.ts

@@ -64,6 +64,7 @@ export type StyleXOptions = {
   stylexSheetName?: string | undefined;
   classNamePrefix: string;
   definedStylexCSSVariables?: { [key: string]: any };
+  allowUnsafeProperties: boolean;
   [key: string]: any;
 };
 

package/lib/messages.js

@@ -13,7 +13,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL = exports.NO_PARENT_PATH = exports.NON_STATIC_VALUE = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.LOCAL_ONLY = exports.LINT_UNCLOSED_FUNCTION = exports.INVALID_SPREAD = exports.INVALID_PSEUDO = exports.ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_TYPE = exports.ILLEGAL_ARGUMENT_LENGTH = exports.EXPECTED_FUNCTION_CALL = exports.ESCAPED_STYLEX_VALUE = void 0;
+exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL = exports.NO_PARENT_PATH = exports.NO_CONDITIONAL_SHORTHAND = exports.NON_STATIC_VALUE = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.MULTIPLE_DIRECTIONS_IN_SHORTHAND = exports.LOCAL_ONLY = exports.LINT_UNCLOSED_FUNCTION = exports.INVALID_SPREAD = exports.INVALID_PSEUDO = exports.ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_TYPE = exports.ILLEGAL_ARGUMENT_LENGTH = exports.EXPECTED_FUNCTION_CALL = exports.ESCAPED_STYLEX_VALUE = void 0;
 const ILLEGAL_ARGUMENT_LENGTH = 'stylex() should have 1 argument.';
 exports.ILLEGAL_ARGUMENT_LENGTH = ILLEGAL_ARGUMENT_LENGTH;
 const NON_STATIC_VALUE = 'Only static values are allowed inside of a stylex.create() call.';
@@ -30,6 +30,8 @@ const UNKNOWN_PROP_KEY = 'Unknown property key';
 exports.UNKNOWN_PROP_KEY = UNKNOWN_PROP_KEY;
 const INVALID_PSEUDO = 'Invalid pseudo selector, not on the whitelist.';
 exports.INVALID_PSEUDO = INVALID_PSEUDO;
+const NO_CONDITIONAL_SHORTHAND = 'You cannot use conditional style values for a shorthand property.';
+exports.NO_CONDITIONAL_SHORTHAND = NO_CONDITIONAL_SHORTHAND;
 const ILLEGAL_NAMESPACE_TYPE = 'Only a string literal namespace is allowed here.';
 exports.ILLEGAL_NAMESPACE_TYPE = ILLEGAL_NAMESPACE_TYPE;
 const UNKNOWN_NAMESPACE = 'Unknown namespace';
@@ -53,4 +55,6 @@ exports.UNEXPECTED_ARGUMENT = UNEXPECTED_ARGUMENT;
 const EXPECTED_FUNCTION_CALL = 'Expected a simple function call but found something else.';
 exports.EXPECTED_FUNCTION_CALL = EXPECTED_FUNCTION_CALL;
 const NO_PARENT_PATH = 'Unexpected AST node without a parent path.';
-exports.NO_PARENT_PATH = NO_PARENT_PATH;
+exports.NO_PARENT_PATH = NO_PARENT_PATH;
+const MULTIPLE_DIRECTIONS_IN_SHORTHAND = 'Shorthand properties cannot contain different values for different directions.';
+exports.MULTIPLE_DIRECTIONS_IN_SHORTHAND = MULTIPLE_DIRECTIONS_IN_SHORTHAND;

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 _expandShorthands = _interopRequireWildcard(require("./expand-shorthands"));
 var _objectUtils = require("./utils/object-utils");
 var messages = _interopRequireWildcard(require("./messages"));
 var _stylexInclude = require("./stylex-include");
@@ -81,7 +81,7 @@ function styleXCreateNamespace(style, options) {
       return [[key, value]];
     }
     if (value != null && typeof value === 'object' && !Array.isArray(value)) {
-      if (!key.startsWith(':') && !key.startsWith('@')) {
+      if (!key.startsWith(':') && !key.startsWith('@') && _expandShorthands.expandedKeys.includes(key)) {
         throw new Error(messages.INVALID_PSEUDO);
       }
       return [[key, (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(value).flatMap(_ref2 => {
@@ -89,6 +89,9 @@ function styleXCreateNamespace(style, options) {
         if (innerValue != null && typeof innerValue === 'object' && !Array.isArray(innerValue)) {
           throw new Error(messages.ILLEGAL_NESTED_PSEUDO);
         }
+        if (!options.allowUnsafeProperties && _expandShorthands.BANNED_PROPERTIES[key]) {
+          throw new Error(_expandShorthands.BANNED_PROPERTIES[key]);
+        }
         return (0, _expandShorthands.default)([innerKey, innerValue]);
       }))]];
     } else {
@@ -98,6 +101,9 @@ function styleXCreateNamespace(style, options) {
       if (Array.isArray(value) && value.some(val => typeof val === 'object')) {
         throw new Error(messages.ILLEGAL_PROP_ARRAY_VALUE);
       }
+      if (!options.allowUnsafeProperties && _expandShorthands.BANNED_PROPERTIES[key]) {
+        throw new Error(_expandShorthands.BANNED_PROPERTIES[key]);
+      }
       return (0, _expandShorthands.default)([key, value]);
     }
   });
@@ -113,18 +119,34 @@ 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 {
+            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 (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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/shared",
-  "version": "0.1.0-beta.7",
+  "version": "0.2.0-beta.8",
   "description": "Shared Code for Stylex compile and runtime.",
   "main": "lib/index.js",
   "repository": "https://www.github.com/facebookexternal/stylex",