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

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 = _interopRequireWildcard(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('@') && _expandShorthands.expandedKeys.includes(key)) {
+      // 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,10 +94,7 @@ 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]);
+        return (0, _index.default)([innerKey, innerValue], options);
       }))]];
     } else {
       if (value !== null && typeof value !== 'string' && typeof value !== 'number' && !Array.isArray(value)) {
@@ -101,10 +103,7 @@ 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]);
+      return (0, _index.default)([key, value], options);
     }
   });
 
@@ -125,6 +124,8 @@ function styleXCreateNamespace(style, options) {
         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;
@@ -139,6 +140,9 @@ function styleXCreateNamespace(style, options) {
           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];

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.2.0-beta.8",
+  "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",