@stylexjs/shared 0.2.0-beta.8 → 0.2.0-beta.9

package/lib/preprocess-rules/expand-shorthands.js

@@ -0,0 +1,156 @@
+"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.
+ *
+ * 
+ */
+
+// TODO: to be added later.
+// const aliases = {
+//   marginInlineStart: (rawValue) => [['marginStart', rawValue]],
+//   marginInlineEnd: (rawValue) => [['marginEnd', rawValue]],
+//   marginInline: (rawValue) => [
+//     ['marginStart', rawValue],
+//     ['marginEnd', rawValue],
+//   ],
+//   paddingInlineStart: (rawValue) => [['paddingStart', rawValue]],
+//   paddingInlineEnd: (rawValue) => [['paddingEnd', rawValue]],
+//   paddingInline: (rawValue) => [
+//     ['paddingStart', rawValue],
+//     ['paddingEnd', rawValue],
+//   ],
+//   // 'borderInlineStart': (rawValue) => [['borderStart', rawValue]],
+//   // 'borderInlineEnd': (rawValue) => [['borderEnd', rawValue]],
+//   // // This will need to change.
+//   // 'borderInline': (rawValue) => [
+//   //   ['borderStart', rawValue],
+//   //   ['borderEnd', rawValue],
+//   // ],
+// };
+
+/**
+ * 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
+ * - [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
+ * - [x] margin
+ * - [ ] mask
+ * - [ ] offset
+ * - [ ] outline
+ * - [x] overflow
+ * - [x] padding
+ * - [ ] place-content
+ * - [ ] place-items
+ * - [ ] place-self
+ * - [ ] scroll-margin
+ * - [ ] scroll-padding
+ * - [ ] text-decoration
+ * - [ ] text-emphasis
+ * - [ ] transition
+ */
+
+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): Array<[string, 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),
+    ];
+  }
+  */
+  borderColor: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]];
+  },
+  borderHorizontal: rawValue => {
+    return [['borderStart', rawValue], ['borderEnd', rawValue]];
+  },
+  borderStyle: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['borderTopStyle', top], ['borderEndStyle', right], ['borderBottomStyle', bottom], ['borderStartStyle', left]];
+  },
+  borderVertical: rawValue => {
+    return [['borderTop', rawValue], ['borderBottom', rawValue]];
+  },
+  borderWidth: rawValue => {
+    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
+    return [['borderTopWidth', top], ['borderEndWidth', right], ['borderBottomWidth', bottom], ['borderStartWidth', left]];
+  },
+  borderRadius: rawValue => {
+    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'string' ? (0, _splitCssValue.default)(rawValue) : typeof rawValue === 'number' ? [rawValue] : rawValue; // remove
+
+    return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]];
+  },
+  margin: rawValue => {
+    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
+    return [['marginTop', top], ['marginEnd', right], ['marginBottom', bottom], ['marginStart', left]];
+  },
+  marginHorizontal: rawValue => {
+    return [['marginStart', rawValue], ['marginEnd', rawValue]];
+  },
+  marginVertical: rawValue => {
+    return [['marginTop', rawValue], ['marginBottom', rawValue]];
+  },
+  overflow: rawValue => {
+    const [x, y = x] = (0, _splitCssValue.default)(rawValue);
+    return [['overflowX', x], ['overflowY', y]];
+  },
+  padding: rawValue => {
+    const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
+    return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
+  },
+  paddingHorizontal: rawValue => {
+    return [['paddingStart', rawValue], ['paddingEnd', rawValue]];
+  },
+  paddingVertical: rawValue => {
+    return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
+  }
+};
+var _default = expansions;
+exports.default = _default;

package/lib/preprocess-rules/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = flatMapExpandedShorthands;
+exports.getExpandedKeys = getExpandedKeys;
+var _applicationOrder = _interopRequireDefault(require("./application-order"));
+var _legacyExpandShorthands = _interopRequireDefault(require("./legacy-expand-shorthands"));
+var _propertySpecificity = _interopRequireDefault(require("./property-specificity"));
+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 expansions = {
+  'application-order': _applicationOrder.default,
+  'property-specificity': _propertySpecificity.default,
+  'legacy-expand-shorthands': _legacyExpandShorthands.default
+};
+function getExpandedKeys(options) {
+  return Object.keys(expansions[options.styleResolution ?? 'application-order']);
+}
+function flatMapExpandedShorthands(objEntry, options) {
+  const [key, value] = objEntry;
+  const expansion = expansions[options.styleResolution ?? 'application-order'][key];
+  if (expansion) {
+    if (Array.isArray(value)) {
+      throw new Error('Cannot use fallbacks for shorthands. Use the expansion instead.');
+    }
+    return expansion(value);
+  }
+  return [[key, value]];
+}

package/lib/preprocess-rules/legacy-expand-shorthands.js

@@ -0,0 +1,169 @@
+"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.
+ *
+ * 
+ */
+
+const borderWidthKeywords = new Set(['thin', 'medium', 'thick']);
+const borderStyleKeywords = new Set(['none', 'hidden', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inside',
+// Non-standard
+'inset', 'outset']);
+const globalKeywords = new Set(['initial', 'inherit', 'unset']);
+function borderDetector(borderParts) {
+  const parts = borderParts.filter(Boolean).slice();
+  let suffix = '';
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (typeof part === 'string' && part.endsWith('!important')) {
+      parts[i] = part.replace('!important', '').trim();
+      suffix = ' !important';
+    }
+  }
+  if (parts.length === 1 && globalKeywords.has(parts[0])) {
+    return [parts[0], parts[0], parts[0]];
+  }
+
+  // Find the part that starts with a number
+  // This is most likely to be the borderWidth
+  let width = parts.find(part => typeof part === 'number' || part.match(/^\.?\d+/) || borderWidthKeywords.has(part));
+  if (typeof width === 'number') {
+    width = String(width) + 'px';
+  }
+  // console.log('width', width);
+  if (width != null) {
+    parts.splice(parts.indexOf(width), 1);
+  }
+  if (parts.length === 0) {
+    return [String(width) + suffix, null, null];
+  }
+  const style = parts.find(part => typeof part === 'string' && borderStyleKeywords.has(part));
+  if (style != null) {
+    parts.splice(parts.indexOf(style), 1);
+  }
+  if (parts.length === 2 && width == null) {
+    width = parts[0];
+    parts.splice(0, 1);
+  }
+  if (width != null && parts.length > 1) {
+    throw new Error('Invalid border shorthand value');
+  }
+  const color = parts[0];
+  return [width, style, color].map(part => part != null ? part + suffix : null);
+}
+const expansions = {
+  border: rawValue => {
+    if (typeof rawValue === 'number') {
+      return expansions.borderWidth(rawValue);
+    }
+    const parts = (0, _splitCssValue.default)(rawValue);
+    const [width, style, color] = borderDetector(parts);
+    return [...(width != null ? expansions.borderWidth(width) : []), ...(style != null ? expansions.borderStyle(style) : []), ...(color != null ? expansions.borderColor(color) : [])];
+  },
+  borderTop: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderTopWidth', rawValue]];
+    }
+    const parts = (0, _splitCssValue.default)(rawValue);
+    const [width, style, color] = borderDetector(parts);
+    return [width != null ? ['borderTopWidth', width] : null, style != null ? ['borderTopStyle', style] : null, color != null ? ['borderTopColor', color] : null].filter(Boolean);
+  },
+  borderEnd: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderEndWidth', rawValue]];
+    }
+    const parts = (0, _splitCssValue.default)(rawValue);
+    const [width, style, color] = borderDetector(parts);
+    return [width != null ? ['borderEndWidth', width] : null, style != null ? ['borderEndStyle', style] : null, color != null ? ['borderEndColor', color] : null].filter(Boolean);
+  },
+  borderRight: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderRightWidth', rawValue]];
+    }
+    const parts = (0, _splitCssValue.default)(rawValue);
+    const [width, style, color] = borderDetector(parts);
+    return [width != null ? ['borderRightWidth', width] : null, style != null ? ['borderRightStyle', style] : null, color != null ? ['borderRightColor', color] : null].filter(Boolean);
+  },
+  borderBottom: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderBottomWidth', rawValue]];
+    }
+    const parts = (0, _splitCssValue.default)(rawValue);
+    const [width, style, color] = borderDetector(parts);
+    return [width != null ? ['borderBottomWidth', width] : null, style != null ? ['borderBottomStyle', style] : null, color != null ? ['borderBottomColor', color] : null].filter(Boolean);
+  },
+  borderStart: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderStartWidth', rawValue]];
+    }
+    const parts = (0, _splitCssValue.default)(rawValue);
+    const [width, style, color] = borderDetector(parts);
+    return [width != null ? ['borderStartWidth', width] : null, style != null ? ['borderStartStyle', style] : null, color != null ? ['borderStartColor', color] : null].filter(Boolean);
+  },
+  borderLeft: rawValue => {
+    if (typeof rawValue === 'number') {
+      return [['borderLeftWidth', rawValue]];
+    }
+    const parts = (0, _splitCssValue.default)(rawValue);
+    const [width, style, color] = borderDetector(parts);
+    return [width != null ? ['borderLeftWidth', width] : null, style != null ? ['borderLeftStyle', style] : null, color != null ? ['borderLeftColor', color] : null].filter(Boolean);
+  },
+  borderColor: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]];
+  },
+  borderHorizontal: rawValue => {
+    return [...expansions.borderStart(rawValue), ...expansions.borderEnd(rawValue)];
+  },
+  borderStyle: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['borderTopStyle', top], ['borderEndStyle', right], ['borderBottomStyle', bottom], ['borderStartStyle', left]];
+  },
+  borderVertical: rawValue => {
+    return [...expansions.borderTop(rawValue), ...expansions.borderBottom(rawValue)];
+  },
+  borderWidth: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['borderTopWidth', top], ['borderEndWidth', right], ['borderBottomWidth', bottom], ['borderStartWidth', left]];
+  },
+  borderRadius: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]];
+  },
+  margin: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['marginTop', top], ['marginEnd', right], ['marginBottom', bottom], ['marginStart', left]];
+  },
+  marginHorizontal: rawValue => {
+    return [['marginStart', rawValue], ['marginEnd', rawValue]];
+  },
+  marginVertical: rawValue => {
+    return [['marginTop', rawValue], ['marginBottom', rawValue]];
+  },
+  overflow: rawValue => {
+    const [x, y = x] = (0, _splitCssValue.default)(rawValue);
+    return [['overflowX', x], ['overflowY', y]];
+  },
+  padding: rawValue => {
+    const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
+    return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
+  },
+  paddingHorizontal: rawValue => {
+    return [['paddingStart', rawValue], ['paddingEnd', rawValue]];
+  },
+  paddingVertical: rawValue => {
+    return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
+  }
+};
+var _default = expansions;
+exports.default = _default;