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

package/lib/messages.js

@@ -13,7 +13,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UNKNOWN_PROP_KEY = exports.UNKNOWN_NAMESPACE = exports.UNEXPECTED_ARGUMENT = exports.UNBOUND_STYLEX_CALL_VALUE = exports.ONLY_TOP_LEVEL = exports.NO_PARENT_PATH = 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.';
 exports.ILLEGAL_ARGUMENT_LENGTH = ILLEGAL_ARGUMENT_LENGTH;
 const NON_STATIC_VALUE = 'Only static values are allowed inside of a stylex.create() call.';
@@ -30,11 +30,15 @@ const UNKNOWN_PROP_KEY = 'Unknown property key';
 exports.UNKNOWN_PROP_KEY = UNKNOWN_PROP_KEY;
 const INVALID_PSEUDO = 'Invalid pseudo selector, not on the whitelist.';
 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.';
+exports.NO_CONDITIONAL_SHORTHAND = NO_CONDITIONAL_SHORTHAND;
 const ILLEGAL_NAMESPACE_TYPE = 'Only a string literal namespace is allowed here.';
 exports.ILLEGAL_NAMESPACE_TYPE = ILLEGAL_NAMESPACE_TYPE;
 const UNKNOWN_NAMESPACE = 'Unknown namespace';
 exports.UNKNOWN_NAMESPACE = UNKNOWN_NAMESPACE;
-const ILLEGAL_NESTED_PSEUDO = "Pseudo objects can't be nested.";
+const ILLEGAL_NESTED_PSEUDO = "Pseudo objects can't be nested more than one level deep.";
 exports.ILLEGAL_NESTED_PSEUDO = ILLEGAL_NESTED_PSEUDO;
 const ILLEGAL_PROP_VALUE = 'A style value can only contain an array, string or number.';
 exports.ILLEGAL_PROP_VALUE = ILLEGAL_PROP_VALUE;
@@ -53,4 +57,8 @@ exports.UNEXPECTED_ARGUMENT = UNEXPECTED_ARGUMENT;
 const EXPECTED_FUNCTION_CALL = 'Expected a simple function call but found something else.';
 exports.EXPECTED_FUNCTION_CALL = EXPECTED_FUNCTION_CALL;
 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;

package/lib/namespace-transforms/__tests__/preflatten.test.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _preflatten = _interopRequireDefault(require("../preflatten"));
+var _Rule = require("../../utils/Rule");
+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.
+ *
+ * 
+ *
+ */
+
+describe('preflatten', () => {
+  test('flattens a simple style object', () => {
+    const input = {
+      color: 'red',
+      backgroundColor: 'blue'
+    };
+    const output = {
+      color: new _Rule.RawRule('color', 'red', [], []),
+      backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], [])
+    };
+    expect((0, _preflatten.default)(input)).toEqual(output);
+  });
+  test('flattens styles with fallback styles', () => {
+    const input = {
+      color: ['red', 'blue'],
+      backgroundColor: 'blue'
+    };
+    const output = {
+      color: new _Rule.RawRuleList([new _Rule.RawRule('color', 'red', [], []), new _Rule.RawRule('color', 'blue', [], [])]),
+      backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], [])
+    };
+    expect((0, _preflatten.default)(input)).toEqual(output);
+  });
+  test('flattens a simple style object with a nested pseudo styles', () => {
+    const input = {
+      color: 'red',
+      backgroundColor: 'blue',
+      ':hover': {
+        color: 'green'
+      }
+    };
+    const output = {
+      color: new _Rule.RawRule('color', 'red', [], []),
+      backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], []),
+      ':hover_color': new _Rule.RawRule('color', 'green', [':hover'], [])
+    };
+    expect((0, _preflatten.default)(input)).toEqual(output);
+  });
+  test('flattens a simple style object with a nested at-rule styles', () => {
+    const input = {
+      color: 'red',
+      backgroundColor: 'blue',
+      '@media (min-width: 600px)': {
+        color: 'green'
+      }
+    };
+    const output = {
+      color: new _Rule.RawRule('color', 'red', [], []),
+      backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], []),
+      '@media (min-width: 600px)_color': new _Rule.RawRule('color', 'green', [], ['@media (min-width: 600px)'])
+    };
+    expect((0, _preflatten.default)(input)).toEqual(output);
+  });
+  test('flattens style object with nested pseudo in property', () => {
+    const input = {
+      color: {
+        default: 'red',
+        ':hover': 'green',
+        ':active': 'blue'
+      },
+      backgroundColor: 'blue'
+    };
+    const output = {
+      color: new _Rule.RawRuleList([new _Rule.RawRule('color', 'red', [], []), new _Rule.RawRule('color', 'green', [':hover'], []), new _Rule.RawRule('color', 'blue', [':active'], [])]),
+      backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], [])
+    };
+    expect((0, _preflatten.default)(input)).toEqual(output);
+  });
+  test('flattens style object with nested media queries', () => {
+    const input = {
+      color: {
+        default: 'red',
+        '@media (max-width: 600px)': 'green',
+        '@media (min-width: 600px and max-width: 900px)': 'blue'
+      },
+      backgroundColor: 'blue'
+    };
+    const output = {
+      color: new _Rule.RawRuleList([new _Rule.RawRule('color', 'red', [], []), new _Rule.RawRule('color', 'green', [], ['@media (max-width: 600px)']), new _Rule.RawRule('color', 'blue', [], ['@media (min-width: 600px and max-width: 900px)'])]),
+      backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], [])
+    };
+    expect((0, _preflatten.default)(input)).toEqual(output);
+  });
+  test('flattens style object with nested media queries and pseudo', () => {
+    const input = {
+      color: {
+        default: 'red',
+        '@media (max-width: 600px)': {
+          default: 'green',
+          ':hover': 'blue'
+        },
+        '@media (min-width: 600px and max-width: 900px)': {
+          default: 'blue',
+          ':hover': 'green'
+        }
+      },
+      backgroundColor: 'blue'
+    };
+    const output = {
+      color: new _Rule.RawRuleList([new _Rule.RawRule('color', 'red', [], []), new _Rule.RawRule('color', 'green', [], ['@media (max-width: 600px)']), new _Rule.RawRule('color', 'blue', [':hover'], ['@media (max-width: 600px)']), new _Rule.RawRule('color', 'blue', [], ['@media (min-width: 600px and max-width: 900px)']), new _Rule.RawRule('color', 'green', [':hover'], ['@media (min-width: 600px and max-width: 900px)'])]),
+      backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], [])
+    };
+    expect((0, _preflatten.default)(input)).toEqual(output);
+  });
+});

package/lib/namespace-transforms/preflatten.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = preflatten;
+var _Rule = require("../utils/Rule");
+/**
+ * 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 function takes a Raw Style Object and converts into a flat object of rules.
+///
+/// 1. The object is "flat": There will be no nested objects after this function.
+/// 2. The values are "rules": Each value is the representation of a CSS Rule.
+function preflatten(namespace) {
+  const result = {};
+  for (const key of Object.keys(namespace)) {
+    const value = namespace[key];
+    if (value === null) {
+      result[key] = null;
+    } else if (Array.isArray(value)) {
+      const allRules = getNestedRules(key, value);
+      if (allRules.length > 1) {
+        result[key] = new _Rule.RawRuleList(allRules);
+      } else if (allRules.length === 1) {
+        result[key] = allRules[0];
+      } else if (allRules.length === 0) {
+        result[key] = null;
+      }
+    } else if (typeof value === 'object' && !Array.isArray(value)) {
+      if (key.startsWith('@') || key.startsWith(':')) {
+        for (const [nestedKey, nestedValue] of Object.entries(value)) {
+          if (nestedValue != null && typeof nestedValue === 'object') {
+            throw new Error('Pseudo and At-Rules cannot be nested.');
+          }
+          result[`${key}_${nestedKey}`] = new _Rule.RawRule(nestedKey, nestedValue, key.startsWith(':') ? [key] : [], key.startsWith('@') ? [key] : []);
+        }
+      } else {
+        /*:: (value: RawStyles); */
+        const allRules = getNestedRules(key, value);
+        if (allRules.length > 1) {
+          result[key] = new _Rule.RawRuleList(allRules);
+        } else if (allRules.length === 1) {
+          result[key] = allRules[0];
+        } else if (allRules.length === 0) {
+          result[key] = null;
+        }
+      }
+    } else {
+      result[key] = new _Rule.RawRule(key, value, [], []);
+    }
+  }
+  return result;
+}
+function getNestedRules(key, value) {
+  let pseudos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  let atRules = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  const result = [];
+  if (value === null) {
+    return result;
+  } else if (Array.isArray(value)) {
+    result.push(new _Rule.RawRuleList(value.map(val => new _Rule.RawRule(key, val, pseudos, atRules))));
+  } else if (typeof value === 'object') {
+    for (const nestedKey of Object.keys(value)) {
+      const nestedValue = value[nestedKey];
+      if (nestedKey.startsWith('@')) {
+        result.push(...getNestedRules(key, nestedValue, pseudos, [...atRules, nestedKey]));
+      } else if (nestedKey.startsWith(':')) {
+        result.push(...getNestedRules(key, nestedValue, [...pseudos, nestedKey], atRules));
+      } else if (nestedKey === 'default') {
+        result.push(...getNestedRules(key, nestedValue, pseudos, atRules));
+      } else {
+        // This can be updated when we support more complex styles, such
+        // as applying a style conditionally when a parent is hovered.
+        throw new Error('Complex Selectors (combinators) are not supported yet.');
+      }
+    }
+  } else {
+    // primitive value
+    result.push(new _Rule.RawRule(key, value, pseudos, atRules));
+  }
+  return result;
+}

package/lib/physical-rtl/generate-ltr.js

@@ -20,82 +20,82 @@ const logicalToPhysical = {
 };
 const propertyToLTR = {
   '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];
   },
   // 'border-inline-start-width': ([key, val]: [string, string]) => ['border-left-width', val],
   '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];
   },
   // 'border-end-end-radius': ([key, val]: [string, string]) => ['border-bottom-right-radius', val],
@@ -112,12 +112,12 @@ const propertyToLTR = {
     return [key, logicalToPhysical[val] ?? val];
   },
   start: _ref20 => {
-    let [key, val] = _ref20;
+    let [_key, val] = _ref20;
     return ['left', val];
   },
   // 'inset-inline-start': ([key, val]: [string, string]) => ['left', val],
   end: _ref21 => {
-    let [key, val] = _ref21;
+    let [_key, val] = _ref21;
     return ['right', val];
   },
   // 'inset-inline-end': ([key, val]) => ['right', val],

package/lib/physical-rtl/generate-rtl.js

@@ -92,82 +92,82 @@ const logicalToPhysical = {
 };
 const propertyToRTL = {
   'margin-start': _ref3 => {
-    let [key, val] = _ref3;
+    let [_key, val] = _ref3;
     return ['margin-right', val];
   },
   // 'margin-inline-start': ([key, val]: [string, string]) => ['margin-right', val],
   'margin-end': _ref4 => {
-    let [key, val] = _ref4;
+    let [_key, val] = _ref4;
     return ['margin-left', val];
   },
   // 'margin-inline-end': ([key, val]: [string, string]) => ['margin-left', val],
   'padding-start': _ref5 => {
-    let [key, val] = _ref5;
+    let [_key, val] = _ref5;
     return ['padding-right', val];
   },
   // 'padding-inline-start': ([key, val]: [string, string]) => ['padding-right', val],
   '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];
   },
   // 'border-end-end-radius': ([key, val]: [string, string]) => ['border-bottom-left-radius', val],
@@ -184,12 +184,12 @@ const propertyToRTL = {
     return logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null;
   },
   start: _ref22 => {
-    let [key, val] = _ref22;
+    let [_key, val] = _ref22;
     return ['right', val];
   },
   // 'inset-inline-start': ([key, val]: [string, string]) => ['right', val],
   end: _ref23 => {
-    let [key, val] = _ref23;
+    let [_key, val] = _ref23;
     return ['left', val];
   },
   // 'inset-inline-end': ([key, val]: [string, string]) => ['left', val],

package/lib/preprocess-rules/PreRule.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreRuleSet = exports.PreRule = exports.PreIncludedStylesRule = exports.NullPreRule = void 0;
+var _convertToClassName = require("../convert-to-className");
+var _objectUtils = require("../utils/object-utils");
+/**
+ * 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.
+ *
+ * 
+ */
+
+class NullPreRule {
+  compiled(_options) {
+    return [null];
+  }
+  equals(other) {
+    return other instanceof NullPreRule;
+  }
+}
+exports.NullPreRule = NullPreRule;
+class PreIncludedStylesRule {
+  constructor(IncludedStyles) {
+    this.includedStyles = IncludedStyles;
+  }
+  equals(other) {
+    return other instanceof PreIncludedStylesRule &&
+    // We can use reference equality here.
+    this.includedStyles === other.includedStyles;
+  }
+  compiled(_options) {
+    return this.includedStyles;
+  }
+}
+
+// a comparator function that sorts strings alphabetically
+// but where `default` always comes first
+exports.PreIncludedStylesRule = PreIncludedStylesRule;
+const stringComparator = (a, b) => {
+  if (a === 'default') {
+    return -1;
+  }
+  if (b === 'default') {
+    return 1;
+  }
+  return a.localeCompare(b);
+};
+class PreRule {
+  constructor(property, value, pseudos, atRules) {
+    this.property = property;
+    this.value = value;
+    this.pseudos = pseudos ? (0, _objectUtils.arraySort)(pseudos, stringComparator) : [];
+    this.atRules = atRules ? (0, _objectUtils.arraySort)(atRules) : [];
+  }
+  compiled(options) {
+    const [_key, className, rule] = (0, _convertToClassName.convertStyleToClassName)([this.property, this.value], this.pseudos ?? [], this.atRules ?? [], options);
+    return [[className, rule]];
+  }
+  equals(other) {
+    if (!(other instanceof PreRule)) {
+      return false;
+    }
+    const valuesEqual = Array.isArray(this.value) && Array.isArray(other.value) ? (0, _objectUtils.arrayEquals)(this.value, other.value) : this.value === other.value;
+    return this.property === other.property && valuesEqual && (0, _objectUtils.arrayEquals)(this.pseudos, other.pseudos) && (0, _objectUtils.arrayEquals)(this.atRules, other.atRules);
+  }
+}
+exports.PreRule = PreRule;
+class PreRuleSet {
+  constructor(rules) {
+    this.rules = rules;
+  }
+  static create(rules) {
+    const flatRules = rules.flatMap(rule => rule instanceof PreRuleSet ? rule.rules : [rule]);
+    if (flatRules.length === 0) {
+      return new NullPreRule();
+    }
+    if (flatRules.length === 1) {
+      return flatRules[0];
+    }
+    return new PreRuleSet(flatRules);
+  }
+  compiled(options) {
+    const styleTuple = this.rules.flatMap(rule => rule.compiled(options)).filter(Boolean);
+    return styleTuple.length > 0 ? styleTuple : [null];
+  }
+  equals(other) {
+    if (!(other instanceof PreRuleSet)) {
+      return false;
+    }
+    if (this.rules.length !== other.rules.length) {
+      return false;
+    }
+    return (0, _objectUtils.arrayEquals)(this.rules, other.rules, (a, b) => a.equals(b));
+  }
+}
+exports.PreRuleSet = PreRuleSet;