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

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

@@ -0,0 +1,135 @@
+"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 shorthands = {
+  all: _ => {
+    throw new Error('all is not supported');
+  },
+  animation: _value => {
+    throw new Error('animation is not supported');
+  },
+  background: _value => {
+    throw new Error('background is not supported. Use background-color, border-image etc. instead.');
+  },
+  border: _rawValue => {
+    throw new Error('border is not supported. Use border-width, border-style and border-color instead.');
+  },
+  borderInline: _rawValue => {
+    throw new Error('borderInline is not supported. Use borderInlineWidth, borderInlineStyle and borderInlineColor instead.');
+  },
+  // @Deprecated
+  borderBlock: _rawValue => {
+    throw new Error('borderBlock is not supported. Use borderBlockWidth, borderBlockStyle and borderBlockColor instead.');
+  },
+  // @Deprecated
+  borderTop: _rawValue => {
+    throw new Error('borderTop is not supported. Use borderTopWidth, borderTopStyle and borderTopColor instead.');
+  },
+  // @Deprecated
+  borderInlineEnd: _rawValue => {
+    throw new Error('borderInlineEnd is not supported. Use borderInlineEndWidth, borderInlineEndStyle and borderInlineEndColor instead.');
+  },
+  // @Deprecated
+  borderRight: _rawValue => {
+    throw new Error('borderRight is not supported. Use borderRightWidth, borderRightStyle and borderRightColor instead.');
+  },
+  // @Deprecated
+  borderBottom: _rawValue => {
+    throw new Error('borderBottom is not supported. Use borderBottomWidth, borderBottomStyle and borderBottomColor instead.');
+  },
+  // @Deprecated
+  borderInlineStart: _rawValue => {
+    throw new Error('borderInlineStart is not supported. Use borderInlineStartWidth, borderInlineStartStyle and borderInlineStartColor instead.');
+  },
+  // @Deprecated
+  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]],
+  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]],
+  borderTopStartRadius: value => [['borderStartStartRadius', value]],
+  borderTopEndRadius: value => [['borderStartEndRadius', value]],
+  borderBottomStartRadius: value => [['borderEndStartRadius', value]],
+  borderBottomEndRadius: value => [['borderEndEndRadius', 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]],
+  paddingBlockStart: rawValue => [['paddingTop', rawValue]],
+  paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
+  paddingStart: value => [['paddingInlineStart', value]],
+  paddingEnd: value => [['paddingInlineEnd', value]],
+  paddingHorizontal: value => [['paddingInline', value]],
+  paddingVertical: value => [['paddingBlock', value]],
+  insetBlockStart: value => [['top', value]],
+  insetBlockEnd: value => [['bottom', value]],
+  start: value => [['insetInlineStart', value]],
+  end: value => [['insetInlineEnd', value]]
+};
+const expansions = {
+  ...shorthands,
+  ...aliases
+};
+var _default = expansions;
+exports.default = _default;

package/lib/preprocess-rules/react-native-web.js

@@ -0,0 +1,142 @@
+"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.
+ *
+ * 
+ */
+
+/// # 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
+
+const shorthands = {
+  all: _ => {
+    throw new Error('all is not supported');
+  },
+  animation: value => {
+    throw new Error('animation is not supported');
+  },
+  background: value => {
+    throw new Error('background is not supported. Use background-color, border-image etc. instead.');
+  },
+  border: rawValue => {
+    throw new Error('border is not supported. Use border-width, border-style and border-color instead.');
+  },
+  borderInline: rawValue => {
+    throw new Error('borderInline is not supported. Use borderInlineWidth, borderInlineStyle and borderInlineColor instead.');
+  },
+  // @Deprecated
+  borderBlock: rawValue => {
+    throw new Error('borderBlock is not supported. Use borderBlockWidth, borderBlockStyle and borderBlockColor instead.');
+  },
+  // @Deprecated
+  borderTop: rawValue => {
+    throw new Error('borderTop is not supported. Use borderTopWidth, borderTopStyle and borderTopColor instead.');
+  },
+  // @Deprecated
+  borderInlineEnd: rawValue => {
+    throw new Error('borderInlineEnd is not supported. Use borderInlineEndWidth, borderInlineEndStyle and borderInlineEndColor instead.');
+  },
+  // @Deprecated
+  borderRight: rawValue => {
+    throw new Error('borderRight is not supported. Use borderRightWidth, borderRightStyle and borderRightColor instead.');
+  },
+  // @Deprecated
+  borderBottom: rawValue => {
+    throw new Error('borderBottom is not supported. Use borderBottomWidth, borderBottomStyle and borderBottomColor instead.');
+  },
+  // @Deprecated
+  borderInlineStart: rawValue => {
+    throw new Error('borderInlineStart is not supported. Use borderInlineStartWidth, borderInlineStartStyle and borderInlineStartColor instead.');
+  },
+  // @Deprecated
+  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 = typeof value === 'number' ? [value] : (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 = typeof rawValue === 'number' ? [rawValue] : (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]],
+  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]],
+  borderTopStartRadius: value => [['borderStartStartRadius', value]],
+  borderTopEndRadius: value => [['borderStartEndRadius', value]],
+  borderBottomStartRadius: value => [['borderEndStartRadius', value]],
+  borderBottomEndRadius: value => [['borderEndEndRadius', 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]],
+  paddingBlockStart: rawValue => [['paddingTop', rawValue]],
+  paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
+  paddingStart: value => [['paddingInlineStart', value]],
+  paddingEnd: value => [['paddingInlineEnd', value]],
+  paddingHorizontal: value => [['paddingInline', value]],
+  paddingVertical: value => [['paddingBlock', value]],
+  insetBlockStart: value => [['top', value]],
+  insetBlockEnd: value => [['bottom', value]],
+  start: value => [['insetInlineStart', value]],
+  end: value => [['insetInlineEnd', value]]
+};
+const expansions = {
+  ...shorthands,
+  ...aliases
+};
+var _default = expansions;
+exports.default = _default;

package/lib/stylex-create-vars.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = styleXCreateVars;
+var _hash = _interopRequireDefault(require("./hash"));
+var _objectUtils = require("./utils/object-utils");
+var _defaultOptions = require("./utils/default-options");
+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.
+ *
+ * 
+ */
+
+// Similar to `stylex.create` it takes an object of variables with their values
+// and returns a string after hashing it.
+function styleXCreateVars(variables, options) {
+  const {
+    classNamePrefix,
+    themeName
+  } = {
+    ..._defaultOptions.defaultOptions,
+    ...options
+  };
+  const themeNameHash = classNamePrefix + (0, _hash.default)(themeName);
+  const variablesMap = (0, _objectUtils.objMap)(variables, (value, key) => {
+    // Created hashed variable names with fileName//themeName//key
+    const nameHash = classNamePrefix + (0, _hash.default)(`${themeName}.${key}`);
+    return {
+      nameHash,
+      value
+    };
+  });
+  const themeVariablesObject = (0, _objectUtils.objMap)(variablesMap, _ref => {
+    let {
+      nameHash
+    } = _ref;
+    return `var(--${nameHash})`;
+  });
+  const cssVariablesString = constructCssVariablesString(variablesMap);
+  return [{
+    ...themeVariablesObject,
+    __themeName__: themeNameHash
+  }, {
+    css: cssVariablesString
+  }];
+}
+function constructCssVariablesString(variables) {
+  const vars = (0, _objectUtils.objEntries)(variables).map(_ref2 => {
+    let [_, value] = _ref2;
+    return `--${value.nameHash}:${value.value};`;
+  }).join('');
+  return `:root{${vars}}`;
+}

package/lib/stylex-create.js

@@ -4,14 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = styleXCreateSet;
-var _convertToClassName = _interopRequireDefault(require("./convert-to-className"));
-var _expandShorthands = _interopRequireDefault(require("./expand-shorthands"));
 var _objectUtils = require("./utils/object-utils");
-var messages = _interopRequireWildcard(require("./messages"));
 var _stylexInclude = require("./stylex-include");
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _defaultOptions = require("./utils/default-options");
+var _flattenRawStyleObj = require("./preprocess-rules/flatten-raw-style-obj");
+var _basicValidation = require("./preprocess-rules/basic-validation");
 /**
  * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
@@ -32,109 +29,41 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 //
 // Before returning, it ensures that there are no duplicate styles being injected.
 function styleXCreateSet(namespaces) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions.defaultOptions;
   const resolvedNamespaces = {};
   const injectedStyles = {};
   for (const namespaceName of Object.keys(namespaces)) {
     const namespace = namespaces[namespaceName];
-    if (typeof namespace !== 'object' || Array.isArray(namespace)) {
-      throw new Error(messages.ILLEGAL_NAMESPACE_VALUE);
+    (0, _basicValidation.validateNamespace)(namespace);
+    const flattenedNamespace = (0, _flattenRawStyleObj.flattenRawStyleObject)(namespace, options);
+    const compiledNamespaceTuples = flattenedNamespace.map(_ref => {
+      let [key, value] = _ref;
+      return [key, value.compiled(options)];
+    });
+    const compiledNamespace = (0, _objectUtils.objFromEntries)(compiledNamespaceTuples);
+    const namespaceObj = {};
+    for (const key of Object.keys(compiledNamespace)) {
+      const value = compiledNamespace[key];
+      if (value instanceof _stylexInclude.IncludedStyles) {
+        namespaceObj[key] = value;
+      } else {
+        const classNameTuples = value.map(v => Array.isArray(v) ? v : null).filter(Boolean);
+        const className = classNameTuples.map(_ref2 => {
+          let [className] = _ref2;
+          return className;
+        }).join(' ') || null;
+        namespaceObj[key] = className;
+        for (const [className, injectable] of classNameTuples) {
+          if (injectedStyles[className] == null) {
+            injectedStyles[className] = injectable;
+          }
+        }
+      }
     }
-    const [resolvedNamespace, injected] = styleXCreateNamespace(namespace, options);
-    const compiledNamespace = (0, _objectUtils.flattenObject)(resolvedNamespace);
     resolvedNamespaces[namespaceName] = {
-      ...compiledNamespace,
+      ...namespaceObj,
       $$css: true
     };
-    for (const cn of Object.keys(injected)) {
-      if (injectedStyles[cn] == null) {
-        injectedStyles[cn] = injected[cn];
-      }
-    }
   }
   return [resolvedNamespaces, injectedStyles];
-}
-
-// Transforms a single style namespace.
-// e.g. Something along the lines of:
-//  {color: 'red', margin: '10px'} =>
-//  {
-//    color: 'color-red',
-//    marginTop: 'margin-top-10px',
-//    marginBottom: 'margin-bottom-10px',
-//    marginStart: 'margin-start-10px',
-//    marginEnd: 'margin-end-10px'
-//  }
-//
-// First, it expands shorthand properties. (margin => marginTop, marginBottom, marginStart, marginEnd)
-// Then, it converts each style value to a className.
-// Then, it returns the transformed style Object and an object of injected styles.
-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.
-  const entries = namespaceEntries.flatMap(_ref => {
-    let [key, value] = _ref;
-    if (value instanceof _stylexInclude.IncludedStyles) {
-      return [[key, value]];
-    }
-    if (value != null && typeof value === 'object' && !Array.isArray(value)) {
-      if (!key.startsWith(':') && !key.startsWith('@')) {
-        throw new Error(messages.INVALID_PSEUDO);
-      }
-      return [[key, (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(value).flatMap(_ref2 => {
-        let [innerKey, innerValue] = _ref2;
-        if (innerValue != null && typeof innerValue === 'object' && !Array.isArray(innerValue)) {
-          throw new Error(messages.ILLEGAL_NESTED_PSEUDO);
-        }
-        return (0, _expandShorthands.default)([innerKey, innerValue]);
-      }))]];
-    } else {
-      if (value !== null && typeof value !== 'string' && typeof value !== 'number' && !Array.isArray(value)) {
-        throw new Error(messages.ILLEGAL_PROP_VALUE);
-      }
-      if (Array.isArray(value) && value.some(val => typeof val === 'object')) {
-        throw new Error(messages.ILLEGAL_PROP_ARRAY_VALUE);
-      }
-      return (0, _expandShorthands.default)([key, value]);
-    }
-  });
-
-  // Now each [key, value] pair is considered a single atomic style.
-  // This atomic style is converted to a className by hashing
-  //
-  // The [key, className] pair is then added to the output Object: `resolvedNamespace`.
-  // While hashing, the CSS rule that the className is generated from is also added to the output Object: `injectedStyles`.
-  const resolvedNamespace = {};
-  const injectedStyles = {};
-  for (const [key, val] of entries) {
-    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];
-        }
-      }
-      resolvedNamespace[key] = innerObj;
-    } else {
-      if (val === null) {
-        resolvedNamespace[key] = null;
-      } else {
-        const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([key, val], undefined, options);
-        resolvedNamespace[updatedKey] = className;
-        injectedStyles[updatedKey] = [className, cssRule];
-      }
-    }
-  }
-  const finalInjectedStyles = (0, _objectUtils.objFromEntries)((0, _objectUtils.objValues)(injectedStyles));
-  return [resolvedNamespace, finalInjectedStyles];
 }