@stylexjs/shared - npm Package Compare versions

Comparing version 0.2.0-beta.9 to 0.2.0-beta.10

lib/convert-to-className.js

@@ -6,7 +6,9 @@ "use strict";
 });
-exports.default = convertToClassName;
+exports.convertStyleToClassName = convertStyleToClassName;
 var _hash = _interopRequireDefault(require("./hash"));
 var _dashify = _interopRequireDefault(require("./utils/dashify"));
 var _transformValue = _interopRequireDefault(require("./transform-value"));
-var _generateCssRule = _interopRequireDefault(require("./generate-css-rule"));
+var _generateCssRule = require("./generate-css-rule");
+var _defaultOptions = require("./utils/default-options");
+var _objectUtils = require("./utils/object-utils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,14 +31,19 @@ /**
 // Returns the final key, className a CSS Rule
-function convertToClassName(objEntry, pseudo) {
+function convertStyleToClassName(objEntry, pseudos, atRules) {
   let {
     stylexSheetName = '<>',
     classNamePrefix = 'x'
-  } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  } = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _defaultOptions.defaultOptions;
   const [key, rawValue] = objEntry;
   const dashedKey = (0, _dashify.default)(key);
   const value = Array.isArray(rawValue) ? rawValue.map(eachValue => (0, _transformValue.default)(key, eachValue)) : (0, _transformValue.default)(key, rawValue);
-  const stringToHash = Array.isArray(value) ? dashedKey + value.join(', ') + (pseudo ?? 'null') : dashedKey + value + (pseudo ?? 'null');
+  const sortedPseudos = (0, _objectUtils.arraySort)(pseudos ?? []);
+  const sortedAtRules = (0, _objectUtils.arraySort)(atRules ?? []);
+  const atRuleHashString = sortedPseudos.join('');
+  const pseudoHashString = sortedAtRules.join('');
+  const modifierHashString = atRuleHashString + pseudoHashString || 'null';
+  const stringToHash = Array.isArray(value) ? dashedKey + value.join(', ') + modifierHashString : dashedKey + value + modifierHashString;
   const className = classNamePrefix + (0, _hash.default)(stylexSheetName + stringToHash);
-  const cssRules = (0, _generateCssRule.default)(className, dashedKey, value, pseudo);
+  const cssRules = (0, _generateCssRule.generateRule)(className, dashedKey, value, pseudos, atRules);
   return [key, className, cssRules];
 }

lib/generate-css-rule.js

@@ -6,6 +6,6 @@ "use strict";
 });
-exports.default = generateCSSRule;
+exports.generateRule = generateRule;
 var _generateLtr = _interopRequireDefault(require("./physical-rtl/generate-ltr"));
 var _generateRtl = _interopRequireDefault(require("./physical-rtl/generate-rtl"));
-var _genCSSRule = _interopRequireDefault(require("./utils/genCSSRule"));
+var _genCSSRule = require("./utils/genCSSRule");
 var _propertyPriorities = _interopRequireDefault(require("./utils/property-priorities"));
@@ -22,5 +22,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function generateCSSRule(className, key,
+function generateRule(className, key,
 // pre-dashed
-value, pseudo) {
+value, pseudos, atRules) {
   const pairs = Array.isArray(value) ? value.map(eachValue => [key, eachValue]) : [[key, value]];
@@ -30,5 +30,5 @@ const ltrPairs = pairs.map(_generateLtr.default);
   const rtlDecls = pairs.map(_generateRtl.default).filter(Boolean).map(pair => pair.join(':')).join(';');
-  const ltrRule = (0, _genCSSRule.default)(className, ltrDecls, pseudo);
-  const rtlRule = !rtlDecls ? null : (0, _genCSSRule.default)(className, rtlDecls, pseudo);
-  const priority = (0, _propertyPriorities.default)(key) + (pseudo ? (0, _propertyPriorities.default)(pseudo) : 0);
+  const ltrRule = (0, _genCSSRule.genCSSRule)(className, ltrDecls, pseudos, atRules);
+  const rtlRule = !rtlDecls ? null : (0, _genCSSRule.genCSSRule)(className, rtlDecls, pseudos, atRules);
+  const priority = (0, _propertyPriorities.default)(key) + Math.max(...pseudos.map(_propertyPriorities.default), ...atRules.map(_propertyPriorities.default), 0);
   return {
@@ -35,0 +35,0 @@ priority,

lib/index.d.ts

@@ -67,3 +67,9 @@ /**
   definedStylexCSSVariables?: { [key: string]: any };
-  skipShorthandExpansion?: boolean;
+  styleResolution:
+    | 'application-order' // The last style applied wins.
+    // More specific styles will win over less specific styles. (margin-top wins over margin)
+    | 'property-specificity'
+    // Legacy behavior, that expands shorthand properties into their longhand counterparts at compile-time.
+    // This is not recommended, and will be removed in a future version.
+    | 'legacy-expand-shorthands';
   [key: string]: any;
@@ -94,2 +100,5 @@ };
   EXPECTED_FUNCTION_CALL: string;
+  INVALID_PSEUDO_OR_AT_RULE: string;
+  ONLY_TOP_LEVEL_INLCUDES: string;
+  DUPLICATE_CONDITIONAL: string;
 };

lib/messages.js

@@ -16,3 +16,3 @@ /**
 });
-exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL = exports.NO_PARENT_PATH = exports.NO_CONDITIONAL_SHORTHAND = exports.NON_STATIC_VALUE = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.LOCAL_ONLY = exports.LINT_UNCLOSED_FUNCTION = exports.INVALID_SPREAD = exports.INVALID_PSEUDO = exports.ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_TYPE = exports.ILLEGAL_ARGUMENT_LENGTH = exports.EXPECTED_FUNCTION_CALL = exports.ESCAPED_STYLEX_VALUE = void 0;
+exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL_INLCUDES = exports.ONLY_TOP_LEVEL = exports.NO_PARENT_PATH = exports.NO_CONDITIONAL_SHORTHAND = exports.NON_STATIC_VALUE = exports.NON_OBJECT_FOR_STYLEX_CALL = exports.LOCAL_ONLY = exports.LINT_UNCLOSED_FUNCTION = exports.INVALID_SPREAD = exports.INVALID_PSEUDO_OR_AT_RULE = exports.INVALID_PSEUDO = exports.ILLEGAL_PROP_VALUE = exports.ILLEGAL_PROP_ARRAY_VALUE = exports.ILLEGAL_NESTED_PSEUDO = exports.ILLEGAL_NAMESPACE_VALUE = exports.ILLEGAL_NAMESPACE_TYPE = exports.ILLEGAL_ARGUMENT_LENGTH = exports.EXPECTED_FUNCTION_CALL = exports.ESCAPED_STYLEX_VALUE = exports.DUPLICATE_CONDITIONAL = void 0;
 const ILLEGAL_ARGUMENT_LENGTH = 'stylex() should have 1 argument.';
@@ -34,2 +34,4 @@ exports.ILLEGAL_ARGUMENT_LENGTH = ILLEGAL_ARGUMENT_LENGTH;
 exports.INVALID_PSEUDO = INVALID_PSEUDO;
+const INVALID_PSEUDO_OR_AT_RULE = 'Invalid pseudo or at-rule.';
+exports.INVALID_PSEUDO_OR_AT_RULE = INVALID_PSEUDO_OR_AT_RULE;
 const NO_CONDITIONAL_SHORTHAND = 'You cannot use conditional style values for a shorthand property.';
@@ -60,2 +62,6 @@ exports.NO_CONDITIONAL_SHORTHAND = NO_CONDITIONAL_SHORTHAND;
 const NO_PARENT_PATH = 'Unexpected AST node without a parent path.';
-exports.NO_PARENT_PATH = NO_PARENT_PATH;
+exports.NO_PARENT_PATH = NO_PARENT_PATH;
+const ONLY_TOP_LEVEL_INLCUDES = 'stylex.include() is only at the top level of a style definition object.';
+exports.ONLY_TOP_LEVEL_INLCUDES = ONLY_TOP_LEVEL_INLCUDES;
+const DUPLICATE_CONDITIONAL = 'The same pseudo selector or at-rule cannot be used more than once.';
+exports.DUPLICATE_CONDITIONAL = DUPLICATE_CONDITIONAL;

lib/physical-rtl/generate-ltr.js

@@ -23,33 +23,33 @@ "use strict";
   'margin-start': _ref => {
-    let [key, val] = _ref;
+    let [_key, val] = _ref;
     return ['margin-left', val];
   },
-  // 'margin-inline-start': ([key, val]) => ['margin-left', val],
+  // 'margin-inline-start': ([_key, val]) => ['margin-left', val],
   'margin-end': _ref2 => {
-    let [key, val] = _ref2;
+    let [_key, val] = _ref2;
     return ['margin-right', val];
   },
-  // 'margin-inline-end': ([key, val]: [string, string]) => ['margin-right', val],
+  // 'margin-inline-end': ([_key, val]: [string, string]) => ['margin-right', val],
   'padding-start': _ref3 => {
-    let [key, val] = _ref3;
+    let [_key, val] = _ref3;
     return ['padding-left', val];
   },
-  // 'padding-inline-start': ([key, val]: [string, string]) => ['padding-left', val],
+  // 'padding-inline-start': ([_key, val]: [string, string]) => ['padding-left', val],
   'padding-end': _ref4 => {
-    let [key, val] = _ref4;
+    let [_key, val] = _ref4;
     return ['padding-right', val];
   },
-  // 'padding-inline-end': ([key, val]: [string, string]) => ['padding-right', val],
+  // 'padding-inline-end': ([_key, val]: [string, string]) => ['padding-right', val],
   'border-start': _ref5 => {
-    let [key, val] = _ref5;
+    let [_key, val] = _ref5;
     return ['border-left', val];
   },
-  // 'border-inline-start': ([key, val]: [string, string]) => ['border-left', val],
+  // 'border-inline-start': ([_key, val]: [string, string]) => ['border-left', val],
   'border-end': _ref6 => {
-    let [key, val] = _ref6;
+    let [_key, val] = _ref6;
     return ['border-right', val];
   },
-  // 'border-inline-end': ([key, val]: [string, string]) => ['border-right', val],
+  // 'border-inline-end': ([_key, val]: [string, string]) => ['border-right', val],
   'border-start-width': _ref7 => {
-    let [key, val] = _ref7;
+    let [_key, val] = _ref7;
     return ['border-left-width', val];
@@ -59,43 +59,43 @@ },
   'border-end-width': _ref8 => {
-    let [key, val] = _ref8;
+    let [_key, val] = _ref8;
     return ['border-right-width', val];
   },
-  // 'border-inline-end-width': ([key, val]: [string, string]) => ['border-right-width', val],
+  // 'border-inline-end-width': ([_key, val]: [string, string]) => ['border-right-width', val],
   'border-start-color': _ref9 => {
-    let [key, val] = _ref9;
+    let [_key, val] = _ref9;
     return ['border-left-color', val];
   },
-  // 'border-inline-start-color': ([key, val]: [string, string]) => ['border-left-color', val],
+  // 'border-inline-start-color': ([_key, val]: [string, string]) => ['border-left-color', val],
   'border-end-color': _ref10 => {
-    let [key, val] = _ref10;
+    let [_key, val] = _ref10;
     return ['border-right-color', val];
   },
-  // 'border-inline-end-color': ([key, val]: [string, string]) => ['border-right-color', val],
+  // 'border-inline-end-color': ([_key, val]: [string, string]) => ['border-right-color', val],
   'border-start-style': _ref11 => {
-    let [key, val] = _ref11;
+    let [_key, val] = _ref11;
     return ['border-left-style', val];
   },
-  // 'border-inline-start-style': ([key, val]: [string, string]) => ['border-left-style', val],
+  // 'border-inline-start-style': ([_key, val]: [string, string]) => ['border-left-style', val],
   'border-end-style': _ref12 => {
-    let [key, val] = _ref12;
+    let [_key, val] = _ref12;
     return ['border-right-style', val];
   },
-  // 'border-inline-end-style': ([key, val]: [string, string]) => ['border-right-style', val],
+  // 'border-inline-end-style': ([_key, val]: [string, string]) => ['border-right-style', val],
   'border-top-start-radius': _ref13 => {
-    let [key, val] = _ref13;
+    let [_key, val] = _ref13;
     return ['border-top-left-radius', val];
   },
-  // 'border-start-start-radius': ([key, val]: [string, string]) => ['border-top-left-radius', val],
+  // 'border-start-start-radius': ([_key, val]: [string, string]) => ['border-top-left-radius', val],
   'border-bottom-start-radius': _ref14 => {
-    let [key, val] = _ref14;
+    let [_key, val] = _ref14;
     return ['border-bottom-left-radius', val];
   },
-  // 'border-end-start-radius': ([key, val]: [string, string]) => ['border-bottom-left-radius', val],
+  // 'border-end-start-radius': ([_key, val]: [string, string]) => ['border-bottom-left-radius', val],
   'border-top-end-radius': _ref15 => {
-    let [key, val] = _ref15;
+    let [_key, val] = _ref15;
     return ['border-top-right-radius', val];
   },
-  // 'border-start-end-radius': ([key, val]: [string, string]) => ['border-top-right-radius', val],
+  // 'border-start-end-radius': ([_key, val]: [string, string]) => ['border-top-right-radius', val],
   'border-bottom-end-radius': _ref16 => {
-    let [key, val] = _ref16;
+    let [_key, val] = _ref16;
     return ['border-bottom-right-radius', val];
@@ -117,3 +117,3 @@ },
   start: _ref20 => {
-    let [key, val] = _ref20;
+    let [_key, val] = _ref20;
     return ['left', val];
@@ -123,3 +123,3 @@ },
   end: _ref21 => {
-    let [key, val] = _ref21;
+    let [_key, val] = _ref21;
     return ['right', val];
@@ -126,0 +126,0 @@ },

lib/physical-rtl/generate-rtl.js

@@ -95,3 +95,3 @@ "use strict";
   'margin-start': _ref3 => {
-    let [key, val] = _ref3;
+    let [_key, val] = _ref3;
     return ['margin-right', val];
@@ -101,3 +101,3 @@ },
   'margin-end': _ref4 => {
-    let [key, val] = _ref4;
+    let [_key, val] = _ref4;
     return ['margin-left', val];
@@ -107,3 +107,3 @@ },
   'padding-start': _ref5 => {
-    let [key, val] = _ref5;
+    let [_key, val] = _ref5;
     return ['padding-right', val];
@@ -113,63 +113,63 @@ },
   'padding-end': _ref6 => {
-    let [key, val] = _ref6;
+    let [_key, val] = _ref6;
     return ['padding-left', val];
   },
-  // 'padding-inline-end': ([key, val]: [string, string]) => ['padding-left', val],
+  // 'padding-inline-end': ([_key, val]: [string, string]) => ['padding-left', val],
   'border-start': _ref7 => {
-    let [key, val] = _ref7;
+    let [_key, val] = _ref7;
     return ['border-right', val];
   },
-  // 'border-inline-start': ([key, val]: [string, string]) => ['border-right', val],
+  // 'border-inline-start': ([_key, val]: [string, string]) => ['border-right', val],
   'border-end': _ref8 => {
-    let [key, val] = _ref8;
+    let [_key, val] = _ref8;
     return ['border-left', val];
   },
-  // 'border-inline-end': ([key, val]: [string, string]) => ['border-left', val],
+  // 'border-inline-end': ([_key, val]: [string, string]) => ['border-left', val],
   'border-start-width': _ref9 => {
-    let [key, val] = _ref9;
+    let [_key, val] = _ref9;
     return ['border-right-width', val];
   },
-  // 'border-inline-start-width': ([key, val]: [string, string]) => ['border-right-width', val],
+  // 'border-inline-start-width': ([_key, val]: [string, string]) => ['border-right-width', val],
   'border-end-width': _ref10 => {
-    let [key, val] = _ref10;
+    let [_key, val] = _ref10;
     return ['border-left-width', val];
   },
-  // 'border-inline-end-width': ([key, val]: [string, string]) => ['border-left-width', val],
+  // 'border-inline-end-width': ([_key, val]: [string, string]) => ['border-left-width', val],
   'border-start-color': _ref11 => {
-    let [key, val] = _ref11;
+    let [_key, val] = _ref11;
     return ['border-right-color', val];
   },
-  // 'border-inline-start-color': ([key, val]: [string, string]) => ['border-right-color', val],
+  // 'border-inline-start-color': ([_key, val]: [string, string]) => ['border-right-color', val],
   'border-end-color': _ref12 => {
-    let [key, val] = _ref12;
+    let [_key, val] = _ref12;
     return ['border-left-color', val];
   },
-  // 'border-inline-end-color': ([key, val]: [string, string]) => ['border-left-color', val],
+  // 'border-inline-end-color': ([_key, val]: [string, string]) => ['border-left-color', val],
   'border-start-style': _ref13 => {
-    let [key, val] = _ref13;
+    let [_key, val] = _ref13;
     return ['border-right-style', val];
   },
-  // 'border-inline-start-style': ([key, val]: [string, string]) => ['border-right-style', val],
+  // 'border-inline-start-style': ([_key, val]: [string, string]) => ['border-right-style', val],
   'border-end-style': _ref14 => {
-    let [key, val] = _ref14;
+    let [_key, val] = _ref14;
     return ['border-left-style', val];
   },
-  // 'border-inline-end-style': ([key, val]: [string, string]) => ['border-left-style', val],
+  // 'border-inline-end-style': ([_key, val]: [string, string]) => ['border-left-style', val],
   'border-top-start-radius': _ref15 => {
-    let [key, val] = _ref15;
+    let [_key, val] = _ref15;
     return ['border-top-right-radius', val];
   },
-  // 'border-start-start-radius': ([key, val]: [string, string]) => ['border-top-right-radius', val],
+  // 'border-start-start-radius': ([_key, val]: [string, string]) => ['border-top-right-radius', val],
   'border-bottom-start-radius': _ref16 => {
-    let [key, val] = _ref16;
+    let [_key, val] = _ref16;
     return ['border-bottom-right-radius', val];
   },
-  // 'border-end-start-radius': ([key, val]: [string, string]) => ['border-bottom-right-radius', val],
+  // 'border-end-start-radius': ([_key, val]: [string, string]) => ['border-bottom-right-radius', val],
   'border-top-end-radius': _ref17 => {
-    let [key, val] = _ref17;
+    let [_key, val] = _ref17;
     return ['border-top-left-radius', val];
   },
-  // 'border-start-end-radius': ([key, val]: [string, string]) => ['border-top-left-radius', val],
+  // 'border-start-end-radius': ([_key, val]: [string, string]) => ['border-top-left-radius', val],
   'border-bottom-end-radius': _ref18 => {
-    let [key, val] = _ref18;
+    let [_key, val] = _ref18;
     return ['border-bottom-left-radius', val];
@@ -191,3 +191,3 @@ },
   start: _ref22 => {
-    let [key, val] = _ref22;
+    let [_key, val] = _ref22;
     return ['right', val];
@@ -197,3 +197,3 @@ },
   end: _ref23 => {
-    let [key, val] = _ref23;
+    let [_key, val] = _ref23;
     return ['left', val];
@@ -200,0 +200,0 @@ },

lib/preprocess-rules/application-order.js

@@ -67,3 +67,3 @@ "use strict";
   // @Deprecated
-  borderRight: rawValue => {
+  borderRight: _rawValue => {
     throw new Error(['`borderRight` is not supported.', 'You could use `borderRightWidth`, `borderRightStyle` and `borderRightColor`,', 'but it is preferable to use `borderInlineEndWidth`, `borderInlineEndStyle` and `borderInlineEndColor`.'].join(' '));
@@ -88,3 +88,3 @@ },
   // @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(' '));
@@ -91,0 +91,0 @@ },

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

@@ -23,2 +23,3 @@ "use strict";
 const globalKeywords = new Set(['initial', 'inherit', 'unset']);
+// eslint-disable-next-line no-unused-vars
 function borderDetector(borderParts) {
@@ -34,3 +35,3 @@ const parts = borderParts.filter(Boolean).slice();
   }
-  if (parts.length === 1 && globalKeywords.has(parts[0])) {
+  if (parts.length === 1 && typeof parts[0] === 'string' && globalKeywords.has(parts[0])) {
     return [parts[0], parts[0], parts[0]];
@@ -67,58 +68,97 @@ }
 const expansions = {
+  // TODO: Due to UI regressions internally, we need to maintain the buggy behaviour of
+  // border shorthand for now. This will be fixed in a future release.
+  // border: (rawValue: TStyleValue): TReturn => {
+  //   if (typeof rawValue === 'number') {
+  //     return expansions.borderWidth(rawValue);
+  //   }
+
+  //   const parts = splitValue(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: TStyleValue): TReturn => {
+  //   if (typeof rawValue === 'number') {
+  //     return [['borderTopWidth', rawValue]];
+  //   }
+  //   const parts = splitValue(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: TStyleValue): TReturn => {
+  //   if (typeof rawValue === 'number') {
+  //     return [['borderEndWidth', rawValue]];
+  //   }
+
+  //   const parts = splitValue(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: TStyleValue): TReturn => {
+  //   if (typeof rawValue === 'number') {
+  //     return [['borderRightWidth', rawValue]];
+  //   }
+  //   const parts = splitValue(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: TStyleValue): TReturn => {
+  //   if (typeof rawValue === 'number') {
+  //     return [['borderBottomWidth', rawValue]];
+  //   }
+  //   const parts = splitValue(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: TStyleValue): TReturn => {
+  //   if (typeof rawValue === 'number') {
+  //     return [['borderStartWidth', rawValue]];
+  //   }
+  //   const parts = splitValue(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: TStyleValue): TReturn => {
+  //   if (typeof rawValue === 'number') {
+  //     return [['borderLeftWidth', rawValue]];
+  //   }
+  //   const parts = splitValue(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);
+  // },
+
   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) : [])];
+    return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
   },
-  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 => {
@@ -129,4 +169,9 @@ const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
   borderHorizontal: rawValue => {
-    return [...expansions.borderStart(rawValue), ...expansions.borderEnd(rawValue)];
+    return [['borderStart', rawValue], ['borderEnd', rawValue]];
+    // return [
+    //   ...expansions.borderStart(rawValue),
+    //   ...expansions.borderEnd(rawValue),
+    // ];
   },
+
   borderStyle: rawValue => {
@@ -137,4 +182,9 @@ const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
   borderVertical: rawValue => {
-    return [...expansions.borderTop(rawValue), ...expansions.borderBottom(rawValue)];
+    return [['borderTop', rawValue], ['borderBottom', rawValue]];
+    // return [
+    //   ...expansions.borderTop(rawValue),
+    //   ...expansions.borderBottom(rawValue),
+    // ];
   },
+
   borderWidth: rawValue => {
@@ -141,0 +191,0 @@ const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);

lib/preprocess-rules/property-specificity.js

@@ -22,40 +22,40 @@ "use strict";
   },
-  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(' '));
@@ -62,0 +62,0 @@ },

lib/stylex-create.js

@@ -7,10 +7,7 @@ "use strict";
 exports.default = styleXCreateSet;
-var _convertToClassName = _interopRequireDefault(require("./convert-to-className"));
-var _index = _interopRequireWildcard(require("./preprocess-rules/index"));
 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");
 /**
@@ -36,3 +33,3 @@ * Copyright (c) Meta Platforms, Inc. and affiliates.
 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 = {};
@@ -42,128 +39,34 @@ const injectedStyles = {};
     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;
+          }
+        }
+      }
     }
-
-    // namespace = preflatten(namespace);
-
-    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 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)) {
-      // 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 => {
-        let [innerKey, innerValue] = _ref2;
-        if (innerValue != null && typeof innerValue === 'object' && !Array.isArray(innerValue)) {
-          throw new Error(messages.ILLEGAL_NESTED_PSEUDO);
-        }
-        return (0, _index.default)([innerKey, innerValue], options);
-      }))]];
-    } 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, _index.default)([key, value], options);
-    }
-  });
-
-  // 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)) {
-      if (key.startsWith(':') || key.startsWith('@')) {
-        const pseudo = key;
-        const innerObj = {};
-        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;
-            injectedStyles[updatedKey + pseudo] = [className, cssRule];
-          }
-        }
-        resolvedNamespace[key] = innerObj;
-      } else {
-        const propKey = key;
-        const classNames = [];
-        for (const [pseudo, innerVal] of (0, _objectUtils.objEntries)(val)) {
-          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];
-            classNames.push(className);
-          }
-        }
-        resolvedNamespace[key] = classNames.join(' ');
-      }
-    } 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];
 }

lib/stylex-keyframes.js

@@ -14,2 +14,3 @@ "use strict";
 var _objectUtils = require("./utils/object-utils");
+var _defaultOptions = require("./utils/default-options");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,3 +32,3 @@ /**
 function styleXKeyframes(frames) {
-  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions.defaultOptions;
   const {
@@ -63,3 +64,3 @@ stylexSheetName = '<>',
   .filter(_ref2 => {
-    let [key, value] = _ref2;
+    let [_key, value] = _ref2;
     return value != null;
@@ -66,0 +67,0 @@ }));

lib/utils/genCSSRule.js

@@ -16,10 +16,11 @@ /**
 });
-exports.default = generateCSSRule;
-function generateCSSRule(className, decls, pseudo) {
-  if (pseudo === '::thumb') {
-    const selector = THUMB_VARIANTS.map(suffix => '.' + className + suffix).join(', ');
-    return `${selector}{${decls}}`;
+exports.genCSSRule = genCSSRule;
+const THUMB_VARIANTS = ['::-webkit-slider-thumb', '::-moz-range-thumb', '::-ms-thumb'];
+function genCSSRule(className, decls, pseudos, atRules) {
+  const pseudo = pseudos.filter(p => p !== '::thumb').join('');
+  let selectorForAtRules = `.${className}` + atRules.map(() => `.${className}`).join('') + pseudo;
+  if (pseudos.includes('::thumb')) {
+    selectorForAtRules = THUMB_VARIANTS.map(suffix => selectorForAtRules + suffix).join(', ');
   }
-  return pseudo != null && pseudo[0] === '@' ? `${pseudo}{.${className}.${className}{${decls}}}` : pseudo != null && pseudo[0] === ':' ? `.${className}${pseudo}{${decls}}` : `.${className}{${decls}}`;
-}
-const THUMB_VARIANTS = ['::-webkit-slider-thumb', '::-moz-range-thumb', '::-ms-thumb'];
+  return atRules.reduce((acc, atRule) => `${atRule}{${acc}}`, `${selectorForAtRules}{${decls}}`);
+}

lib/utils/object-utils.js

@@ -6,4 +6,5 @@ "use strict";
 });
-exports.Pipe = void 0;
+exports.arraySort = exports.arrayEquals = exports.Pipe = void 0;
 exports.flattenObject = flattenObject;
+exports.isPlainObject = isPlainObject;
 exports.objEntries = objEntries;
@@ -27,2 +28,5 @@ exports.objFromEntries = objFromEntries;
 
+function isPlainObject(obj) {
+  return typeof obj === 'object' && obj != null && !Array.isArray(obj) && (obj === null || obj === void 0 ? void 0 : obj.constructor) === Object;
+}
 function flattenObject(obj) {
@@ -96,2 +100,19 @@ const result = {};
 }
-exports.Pipe = Pipe;
+
+// Function that sorts an array without mutating it and returns a new array
+exports.Pipe = Pipe;
+const arraySort = (arr, fn) => [...arr].sort(fn);
+exports.arraySort = arraySort;
+const arrayEquals = function (arr1, arr2) {
+  let equals = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : (a, b) => a === b;
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+  for (let i = 0; i < arr1.length; i++) {
+    if (!equals(arr1[i], arr2[i])) {
+      return false;
+    }
+  }
+  return true;
+};
+exports.arrayEquals = arrayEquals;

lib/validate.js

@@ -25,3 +25,3 @@ "use strict";
 function validateSimplyEntry(_ref2) {
-  let [key, value] = _ref2;
+  let [key, _value] = _ref2;
   if (BANNED_KEYS.has(key)) {
@@ -28,0 +28,0 @@ throw new Error('Banned key: ' + key);

package.json

 {
   "name": "@stylexjs/shared",
-  "version": "0.2.0-beta.9",
+  "version": "0.2.0-beta.10",
   "description": "Shared Code for Stylex compile and runtime.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

186417

increased by6.56%

Number of package files

48

increased by9.09%

Lines of code

4074

increased by9.4%

No dependency changes