@stylexjs/shared 0.2.0-beta.9 → 0.4.0

package/lib/preprocess-rules/property-specificity.js

@@ -4,132 +4,104 @@ 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.
- *
- * 
- */
-
 const shorthands = {
   all: _ => {
     throw new Error('all is not supported');
   },
-  animation: value => {
+  animation: _value => {
     throw new Error('animation is not supported');
   },
-  background: value => {
+  background: _value => {
     throw new Error('background is not supported. Use background-color, border-image etc. instead.');
   },
-  border: rawValue => {
+  border: _rawValue => {
     throw new Error('border is not supported. Use border-width, border-style and border-color instead.');
   },
-  borderInline: rawValue => {
+  borderInline: _rawValue => {
     throw new Error('borderInline is not supported. Use borderInlineWidth, borderInlineStyle and borderInlineColor instead.');
   },
-  // @Deprecated
-  borderBlock: rawValue => {
+  borderBlock: _rawValue => {
     throw new Error('borderBlock is not supported. Use borderBlockWidth, borderBlockStyle and borderBlockColor instead.');
   },
-  // @Deprecated
-  borderTop: rawValue => {
+  borderTop: _rawValue => {
     throw new Error('borderTop is not supported. Use borderTopWidth, borderTopStyle and borderTopColor instead.');
   },
-  // @Deprecated
-  borderInlineEnd: rawValue => {
+  borderInlineEnd: _rawValue => {
     throw new Error('borderInlineEnd is not supported. Use borderInlineEndWidth, borderInlineEndStyle and borderInlineEndColor instead.');
   },
-  // @Deprecated
-  borderRight: rawValue => {
+  borderRight: _rawValue => {
     throw new Error('borderRight is not supported. Use borderRightWidth, borderRightStyle and borderRightColor instead.');
   },
-  // @Deprecated
-  borderBottom: rawValue => {
+  borderBottom: _rawValue => {
     throw new Error('borderBottom is not supported. Use borderBottomWidth, borderBottomStyle and borderBottomColor instead.');
   },
-  // @Deprecated
-  borderInlineStart: rawValue => {
+  borderInlineStart: _rawValue => {
     throw new Error('borderInlineStart is not supported. Use borderInlineStartWidth, borderInlineStartStyle and borderInlineStartColor instead.');
   },
-  // @Deprecated
-  borderLeft: rawValue => {
+  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 = (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 = (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]],
+  blockSize: val => [['height', val]],
+  inlineSize: val => [['width', val]],
+  minBlockSize: val => [['minHeight', val]],
+  minInlineSize: val => [['minWidth', val]],
+  maxBlockSize: val => [['maxHeight', val]],
+  maxInlineSize: val => [['maxWidth', val]],
+  borderHorizontalWidth: val => [['borderInlineWidth', val]],
+  borderHorizontalStyle: val => [['borderInlineStyle', val]],
+  borderHorizontalColor: val => [['borderInlineColor', val]],
+  borderVerticalWidth: val => [['borderBlockWidth', val]],
+  borderVerticalStyle: val => [['borderBlockStyle', val]],
+  borderVerticalColor: val => [['borderBlockColor', val]],
   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]],
+  borderStartColor: val => [['borderInlineStartColor', val]],
+  borderEndColor: val => [['borderInlineEndColor', val]],
+  borderStartStyle: val => [['borderInlineStartStyle', val]],
+  borderEndStyle: val => [['borderInlineEndStyle', val]],
+  borderStartWidth: val => [['borderInlineStartWidth', val]],
+  borderEndWidth: val => [['borderInlineEndWidth', val]],
   borderTopStartRadius: value => [['borderStartStartRadius', value]],
   borderTopEndRadius: value => [['borderStartEndRadius', value]],
   borderBottomStartRadius: value => [['borderEndStartRadius', value]],
   borderBottomEndRadius: value => [['borderEndEndRadius', value]],
+  containIntrinsicBlockSize: value => [['containIntrinsicHeight', value]],
+  containIntrinsicInlineSize: value => [['containIntrinsicWidth', 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]],
+  marginStart: val => [['marginInlineStart', val]],
+  marginEnd: val => [['marginInlineEnd', val]],
+  marginHorizontal: val => [['marginInline', val]],
+  marginVertical: val => [['marginBlock', val]],
+  overflowBlock: value => [['overflowY', value]],
+  overflowInline: value => [['overflowX', 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]],
+  paddingStart: val => [['paddingInlineStart', val]],
+  paddingEnd: val => [['paddingInlineEnd', val]],
+  paddingHorizontal: val => [['paddingInline', val]],
+  paddingVertical: val => [['paddingBlock', val]],
+  scrollMarginBlockStart: value => [['scrollMarginTop', value]],
+  scrollMarginBlockEnd: value => [['scrollMarginBottom', value]],
   insetBlockStart: value => [['top', value]],
   insetBlockEnd: value => [['bottom', value]],
-  start: value => [['insetInlineStart', value]],
-  end: value => [['insetInlineEnd', value]]
+  start: val => [['insetInlineStart', val]],
+  end: val => [['insetInlineEnd', val]]
 };
 const expansions = {
   ...shorthands,
   ...aliases
 };
-var _default = expansions;
-exports.default = _default;
+var _default = exports.default = expansions;

package/lib/preprocess-rules/property-specificity.js.flow

@@ -0,0 +1,98 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import type { TStyleValue } from '../common-types';
+
+/// # 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
+
+type TReturn = $ReadOnlyArray<[string, TStyleValue]>;
+
+declare const shorthands: {
+  all: (_: TStyleValue) => TReturn,
+  animation: (_value: TStyleValue) => TReturn,
+  background: (_value: TStyleValue) => TReturn,
+  border: (_rawValue: TStyleValue) => TReturn,
+  borderInline: (_rawValue: TStyleValue) => TReturn,
+  borderBlock: (_rawValue: TStyleValue) => TReturn,
+  borderTop: (_rawValue: TStyleValue) => TReturn,
+  borderInlineEnd: (_rawValue: TStyleValue) => TReturn,
+  borderRight: (_rawValue: TStyleValue) => TReturn,
+  borderBottom: (_rawValue: TStyleValue) => TReturn,
+  borderInlineStart: (_rawValue: TStyleValue) => TReturn,
+  borderLeft: (_rawValue: TStyleValue) => TReturn,
+};
+
+declare const aliases: {
+  borderHorizontal: $FlowFixMe,
+  borderVertical: $FlowFixMe,
+  borderBlockStart: $FlowFixMe,
+  borderEnd: $FlowFixMe,
+  borderBlockEnd: $FlowFixMe,
+  borderStart: $FlowFixMe,
+  blockSize: (val: TStyleValue) => TReturn,
+  inlineSize: (val: TStyleValue) => TReturn,
+  minBlockSize: (val: TStyleValue) => TReturn,
+  minInlineSize: (val: TStyleValue) => TReturn,
+  maxBlockSize: (val: TStyleValue) => TReturn,
+  maxInlineSize: (val: TStyleValue) => TReturn,
+  borderHorizontalWidth: (val: TStyleValue) => TReturn,
+  borderHorizontalStyle: (val: TStyleValue) => TReturn,
+  borderHorizontalColor: (val: TStyleValue) => TReturn,
+  borderVerticalWidth: (val: TStyleValue) => TReturn,
+  borderVerticalStyle: (val: TStyleValue) => TReturn,
+  borderVerticalColor: (val: TStyleValue) => TReturn,
+  borderBlockStartColor: (value: TStyleValue) => TReturn,
+  borderBlockEndColor: (value: TStyleValue) => TReturn,
+  borderBlockStartStyle: (value: TStyleValue) => TReturn,
+  borderBlockEndStyle: (value: TStyleValue) => TReturn,
+  borderBlockStartWidth: (value: TStyleValue) => TReturn,
+  borderBlockEndWidth: (value: TStyleValue) => TReturn,
+  borderStartColor: (val: TStyleValue) => TReturn,
+  borderEndColor: (val: TStyleValue) => TReturn,
+  borderStartStyle: (val: TStyleValue) => TReturn,
+  borderEndStyle: (val: TStyleValue) => TReturn,
+  borderStartWidth: (val: TStyleValue) => TReturn,
+  borderEndWidth: (val: TStyleValue) => TReturn,
+  borderTopStartRadius: (value: TStyleValue) => TReturn,
+  borderTopEndRadius: (value: TStyleValue) => TReturn,
+  borderBottomStartRadius: (value: TStyleValue) => TReturn,
+  borderBottomEndRadius: (value: TStyleValue) => TReturn,
+  containIntrinsicBlockSize: (value: TStyleValue) => TReturn,
+  containIntrinsicInlineSize: (value: TStyleValue) => TReturn,
+  marginBlockStart: (value: TStyleValue) => TReturn,
+  marginBlockEnd: (value: TStyleValue) => TReturn,
+  marginStart: (val: TStyleValue) => TReturn,
+  marginEnd: (val: TStyleValue) => TReturn,
+  marginHorizontal: (val: TStyleValue) => TReturn,
+  marginVertical: (val: TStyleValue) => TReturn,
+  overflowBlock: (value: TStyleValue) => TReturn,
+  overflowInline: (value: TStyleValue) => TReturn,
+  paddingBlockStart: (rawValue: TStyleValue) => TReturn,
+  paddingBlockEnd: (rawValue: TStyleValue) => TReturn,
+  paddingStart: (val: TStyleValue) => TReturn,
+  paddingEnd: (val: TStyleValue) => TReturn,
+  paddingHorizontal: (val: TStyleValue) => TReturn,
+  paddingVertical: (val: TStyleValue) => TReturn,
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn,
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn,
+  insetBlockStart: (value: TStyleValue) => TReturn,
+  insetBlockEnd: (value: TStyleValue) => TReturn,
+  start: (val: TStyleValue) => TReturn,
+  end: (val: TStyleValue) => TReturn,
+};
+
+declare export default $ReadOnly<{
+  ...typeof shorthands,
+  ...typeof aliases,
+}>;