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

package/lib/stylex-keyframes.js

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

package/lib/utils/Rule.js

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

package/lib/utils/normalize-value.js

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

package/lib/utils/property-priorities.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getPriority;
+/**
+ * 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 PRIORITIES = {
+  // These should never exist at runtime:
+  border: 1,
+  'border-block-end': 2,
+  'border-block-start': 2,
+  'border-top': 2.1,
+  'border-bottom': 2.1,
+  'border-inline-end': 2,
+  'border-inline-start': 2,
+  'border-left': 2,
+  'border-right': 2,
+  // End of never-exist-at-runtime properties.
+
+  // These are shorthands of shorthands:
+  grid: 2,
+  'grid-area': 2,
+  // These are shorthands of final properties:
+  'border-color': 3,
+  'border-style': 3,
+  'border-width': 3,
+  'border-image': 3,
+  'border-radius': 3,
+  animation: 3,
+  background: 3,
+  'column-rule': 3,
+  columns: 3,
+  flex: 3,
+  'flex-flow': 3,
+  font: 3,
+  gap: 3,
+  'grid-column': 3,
+  'grid-row': 3,
+  'grid-template': 3,
+  'list-style': 3,
+  margin: 3,
+  mask: 3,
+  offset: 3,
+  outline: 3,
+  overflow: 3,
+  padding: 3,
+  'place-content': 3,
+  'place-items': 3,
+  'place-self': 3,
+  'scroll-margin': 3,
+  'scroll-padding': 3,
+  'text-decoration': 3,
+  'text-emphasis': 3,
+  transition: 3,
+  ':has': 4.5,
+  ':dir': 5,
+  ':lang': 5.1,
+  ':first-child': 5.2,
+  ':last-child': 5.3,
+  ':only-child': 5.4,
+  ':nth-child': 6,
+  ':nth-of-type': 6.1,
+  ':only-of-type': 6.2,
+  ':empty': 7,
+  ':link': 8,
+  ':any-link': 8.1,
+  ':target': 8.2,
+  ':visited': 8.3,
+  ':enabled': 9.1,
+  ':disabled': 9.2,
+  ':required': 9.3,
+  ':optional': 9.4,
+  ':read-only': 9.5,
+  ':read-write': 9.6,
+  ':placeholder-shown': 9.7,
+  ':default': 10,
+  ':checked': 10.1,
+  ':indeterminate': 10.1,
+  ':blank': 10.2,
+  ':valid': 10.3,
+  ':invalid': 10.4,
+  ':autofill': 11,
+  ':picture-in-picture': 12,
+  ':fullscreen': 12.1,
+  ':paused': 12.2,
+  ':playing': 12.3,
+  ':hover': 13,
+  ':focusWithin': 14,
+  ':focusVisible': 15,
+  ':focus': 16,
+  ':active': 17
+};
+function getPriority(key) {
+  if (key.startsWith('@supports')) {
+    return 20;
+  }
+  if (key.startsWith('@media')) {
+    return 21;
+  }
+  const prop = key.startsWith(':') && key.includes('(') ? key.slice(0, key.indexOf('(')) : key;
+  let priority = PRIORITIES[prop] ?? 4;
+  if (key.toLowerCase().includes('left') || key.toLowerCase().includes('right')) {
+    // Bump priority for physical left/right values.
+    priority += 0.1;
+  }
+  return priority;
+}

package/lib/utils/split-css-value.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = splitValue;
+var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+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.
+ *
+ * 
+ *
+ */
+
+function printNode(node) {
+  switch (node.type) {
+    case 'word':
+    case 'string':
+      return `${node.value}`;
+    case 'function':
+      return `${node.value}(${node.nodes.map(printNode).join('')})`;
+    default:
+      return node.value;
+  }
+}
+
+// Using split(' ') Isn't enough bcause of values like calc.
+function splitValue(str) {
+  if (str == null || typeof str === 'number') {
+    return [str];
+  }
+
+  // This will never happen, but keeping here for Flow.
+  if (Array.isArray(str)) {
+    return str;
+  }
+  const parsed = (0, _postcssValueParser.default)(str.trim());
+  const nodes = parsed.nodes.filter(node => node.type !== 'space' && node.type !== 'div').map(printNode);
+  if (nodes.length > 1 && nodes[nodes.length - 1].toLowerCase() === '!important') {
+    return nodes.slice(0, nodes.length - 1).map(node => node + ' !important');
+  }
+  return nodes;
+}

package/package.json

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