@stylexjs/shared 0.17.5 → 0.18.0

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

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generateRTL;
+var _defaultOptions = require("../utils/default-options");
+var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const cursorFlip = {
+  'e-resize': 'w-resize',
+  'w-resize': 'e-resize',
+  'ne-resize': 'nw-resize',
+  'nesw-resize': 'nwse-resize',
+  'nw-resize': 'ne-resize',
+  'nwse-resize': 'nesw-resize',
+  'se-resize': 'sw-resize',
+  'sw-resize': 'se-resize'
+};
+function splitByDivisor(value) {
+  const ast = (0, _postcssValueParser.default)(value);
+  const groups = [];
+  let currGroup = [];
+  function push() {
+    if (currGroup.length === 0) {
+      return;
+    }
+    groups.push(_postcssValueParser.default.stringify(currGroup));
+    currGroup = [];
+  }
+  for (const node of ast.nodes) {
+    if (node.type === 'div') {
+      push();
+    } else {
+      currGroup.push(node);
+    }
+  }
+  push();
+  return groups;
+}
+function flipSign(value) {
+  if (value === '0') {
+    return value;
+  } else {
+    return value[0] === '-' ? value.slice(1) : '-' + value;
+  }
+}
+function flipShadow(value) {
+  const defs = splitByDivisor(value);
+  const builtDefs = [];
+  for (const def of defs) {
+    const parts = def.split(' ');
+    const index = _postcssValueParser.default.unit(parts[0]) === false ? 1 : 0;
+    if (index < parts.length) {
+      parts[index] = flipSign(parts[index]);
+    }
+    builtDefs.push(parts.join(' '));
+  }
+  const rtl = builtDefs.join(',');
+  if (rtl !== value) {
+    return rtl;
+  }
+}
+const logicalToPhysical = {
+  start: 'right',
+  end: 'left',
+  'inline-start': 'right',
+  'inline-end': 'left'
+};
+const inlinePropertyToRTL = {
+  'margin-inline-start': ([_key, val]) => ['margin-right', val],
+  'margin-inline-end': ([_key, val]) => ['margin-left', val],
+  'padding-inline-start': ([_key, val]) => ['padding-right', val],
+  'padding-inline-end': ([_key, val]) => ['padding-left', val],
+  'border-inline-start': ([_key, val]) => ['border-right', val],
+  'border-inline-end': ([_key, val]) => ['border-left', val],
+  'border-inline-start-width': ([_key, val]) => ['border-right-width', val],
+  'border-inline-end-width': ([_key, val]) => ['border-left-width', val],
+  'border-inline-start-color': ([_key, val]) => ['border-right-color', val],
+  'border-inline-end-color': ([_key, val]) => ['border-left-color', val],
+  'border-inline-start-style': ([_key, val]) => ['border-right-style', val],
+  'border-inline-end-style': ([_key, val]) => ['border-left-style', val],
+  'border-start-start-radius': ([_k, val]) => ['border-top-right-radius', val],
+  'border-end-start-radius': ([_k, val]) => ['border-bottom-right-radius', val],
+  'border-start-end-radius': ([_key, val]) => ['border-top-left-radius', val],
+  'border-end-end-radius': ([_key, val]) => ['border-bottom-left-radius', val],
+  'inset-inline-start': ([_key, val]) => ['right', val],
+  'inset-inline-end': ([_key, val]) => ['left', val]
+};
+const propertyToRTL = {
+  'margin-start': ([_key, val]) => ['margin-right', val],
+  'margin-end': ([_key, val]) => ['margin-left', val],
+  'padding-start': ([_key, val]) => ['padding-right', val],
+  'padding-end': ([_key, val]) => ['padding-left', val],
+  'border-start': ([_key, val]) => ['border-right', val],
+  'border-end': ([_key, val]) => ['border-left', val],
+  'border-start-width': ([_key, val]) => ['border-right-width', val],
+  'border-end-width': ([_key, val]) => ['border-left-width', val],
+  'border-start-color': ([_key, val]) => ['border-right-color', val],
+  'border-end-color': ([_key, val]) => ['border-left-color', val],
+  'border-start-style': ([_key, val]) => ['border-right-style', val],
+  'border-end-style': ([_key, val]) => ['border-left-style', val],
+  'border-top-start-radius': ([_key, val]) => ['border-top-right-radius', val],
+  'border-bottom-start-radius': ([_k, v]) => ['border-bottom-right-radius', v],
+  'border-top-end-radius': ([_key, val]) => ['border-top-left-radius', val],
+  'border-bottom-end-radius': ([_k, val]) => ['border-bottom-left-radius', val],
+  float: ([key, val]) => logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null,
+  clear: ([key, val]) => logicalToPhysical[val] != null ? [key, logicalToPhysical[val]] : null,
+  start: ([_key, val]) => ['right', val],
+  end: ([_key, val]) => ['left', val],
+  'background-position': ([key, val]) => {
+    const words = val.split(' ');
+    if (!words.includes('start') && !words.includes('end')) {
+      return null;
+    }
+    return [key, words.map(word => word === 'start' || word === 'insetInlineStart' ? 'right' : word === 'end' || word === 'insetInlineEnd' ? 'left' : word).join(' ')];
+  },
+  cursor: ([key, val], options = _defaultOptions.defaultOptions) => {
+    if (!options.enableLegacyValueFlipping) {
+      return null;
+    }
+    return cursorFlip[val] != null ? [key, cursorFlip[val]] : null;
+  },
+  'box-shadow': ([key, val], options = _defaultOptions.defaultOptions) => {
+    if (!options.enableLegacyValueFlipping) {
+      return null;
+    }
+    const rtlVal = flipShadow(val);
+    return rtlVal ? [key, rtlVal] : null;
+  },
+  'text-shadow': ([key, val], options = _defaultOptions.defaultOptions) => {
+    if (!options.enableLegacyValueFlipping) {
+      return null;
+    }
+    const rtlVal = flipShadow(val);
+    return rtlVal ? [key, rtlVal] : null;
+  }
+};
+function generateRTL(pair, options = _defaultOptions.defaultOptions) {
+  const {
+    enableLogicalStylesPolyfill,
+    styleResolution
+  } = options;
+  const [key] = pair;
+  if (styleResolution === 'legacy-expand-shorthands') {
+    if (!enableLogicalStylesPolyfill) {
+      return null;
+    }
+    if (inlinePropertyToRTL[key]) {
+      return inlinePropertyToRTL[key](pair);
+    }
+  }
+  if (!propertyToRTL[key]) {
+    return null;
+  }
+  return propertyToRTL[key](pair, options);
+}

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

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import type { StyleXOptions } from '../common-types';
+declare export default function generateRTL(
+  pair: $ReadOnly<[string, string]>,
+  options?: StyleXOptions,
+): ?$ReadOnly<[string, string]>;

package/lib/preprocess-rules/PreRule.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 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.
+ *
+ *
+ */
+
+import type { InjectableStyle, StyleXOptions } from '../common-types';
+export type ClassesToOriginalPaths = {
+  readonly [className: string]: ReadonlyArray<string>;
+};
+export type ComputedStyle = null | Readonly<
+  [string, InjectableStyle, ClassesToOriginalPaths]
+>;
+export interface IPreRule {
+  compiled(options: StyleXOptions): ReadonlyArray<ComputedStyle>;
+  equals(other: IPreRule): boolean;
+}
+export type AnyPreRule = NullPreRule | PreRule | PreRuleSet;
+export declare class NullPreRule implements IPreRule {
+  compiled(_options: StyleXOptions): [null];
+  equals(other: IPreRule): boolean;
+}
+export declare class PreRule implements IPreRule {
+  readonly property: string;
+  readonly value: string | number | ReadonlyArray<string | number>;
+  readonly keyPath: ReadonlyArray<string>;
+  constructor(
+    property: string,
+    value: string | number | ReadonlyArray<string | number>,
+    keyPath?: ReadonlyArray<string>,
+  );
+  get pseudos(): ReadonlyArray<string>;
+  get atRules(): ReadonlyArray<string>;
+  get constRules(): ReadonlyArray<string>;
+  compiled(
+    options: StyleXOptions,
+  ): ReadonlyArray<[string, InjectableStyle, ClassesToOriginalPaths]>;
+  equals(other: IPreRule): boolean;
+}
+export declare class PreRuleSet implements IPreRule {
+  readonly rules: ReadonlyArray<PreRule | NullPreRule>;
+  constructor(rules: ReadonlyArray<PreRule | NullPreRule>);
+  static create(
+    rules: ReadonlyArray<PreRule | NullPreRule | PreRuleSet>,
+  ): AnyPreRule;
+  compiled(options: StyleXOptions): ReadonlyArray<ComputedStyle>;
+  equals(other: IPreRule): boolean;
+}

package/lib/preprocess-rules/PreRule.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreRuleSet = exports.PreRule = exports.NullPreRule = void 0;
+var _convertToClassName = require("../utils/convert-to-className");
+var _objectUtils = require("../utils/object-utils");
+var _ruleUtils = require("../utils/rule-utils");
+class NullPreRule {
+  compiled(_options) {
+    return [null];
+  }
+  equals(other) {
+    return other instanceof NullPreRule;
+  }
+}
+exports.NullPreRule = NullPreRule;
+class PreRule {
+  constructor(property, value, keyPath) {
+    this.property = property;
+    this.keyPath = keyPath ?? [];
+    this.value = value;
+  }
+  get pseudos() {
+    const unsortedPseudos = this.keyPath.filter(key => key.startsWith(':') || key.startsWith('['));
+    return (0, _ruleUtils.sortPseudos)(unsortedPseudos);
+  }
+  get atRules() {
+    const unsortedAtRules = this.keyPath.filter(key => key.startsWith('@'));
+    return (0, _ruleUtils.sortAtRules)(unsortedAtRules);
+  }
+  get constRules() {
+    return this.keyPath.filter(key => key.startsWith('var(--'));
+  }
+  compiled(options) {
+    const [_key, className, rule] = (0, _convertToClassName.convertStyleToClassName)([this.property, this.value], this.pseudos ?? [], this.atRules ?? [], this.constRules ?? [], options);
+    return [[className, rule, {
+      [className]: this.keyPath
+    }]];
+  }
+  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;

package/lib/preprocess-rules/PreRule.js.flow

@@ -0,0 +1,63 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import type { InjectableStyle, StyleXOptions } from '../common-types';
+
+export type ClassesToOriginalPaths = {
+  +[className: string]: $ReadOnlyArray<string>,
+};
+
+export type ComputedStyle = null | $ReadOnly<
+  [string, InjectableStyle, ClassesToOriginalPaths],
+>;
+
+// The classes in this file are used to represent objects that
+// can be compiled into one or CSS rules.
+//
+// These are thin wrappers around the "values" in Raw Style Objects
+// with all the metadata needed to compile them into CSS.
+export interface IPreRule {
+  compiled(options: StyleXOptions): $ReadOnlyArray<ComputedStyle>;
+  equals(other: IPreRule): boolean;
+}
+
+export type AnyPreRule = NullPreRule | PreRule | PreRuleSet;
+
+declare export class NullPreRule implements IPreRule {
+  compiled(_options: StyleXOptions): [null];
+  equals(other: IPreRule): boolean;
+}
+
+declare export class PreRule implements IPreRule {
+  +property: string;
+  +value: string | number | $ReadOnlyArray<string | number>;
+  +keyPath: $ReadOnlyArray<string>;
+  constructor(
+    property: string,
+    value: string | number | $ReadOnlyArray<string | number>,
+    keyPath?: $ReadOnlyArray<string>,
+  ): void;
+  get pseudos(): $ReadOnlyArray<string>;
+  get atRules(): $ReadOnlyArray<string>;
+  get constRules(): $ReadOnlyArray<string>;
+  compiled(
+    options: StyleXOptions,
+  ): $ReadOnlyArray<[string, InjectableStyle, ClassesToOriginalPaths]>;
+  equals(other: IPreRule): boolean;
+}
+
+declare export class PreRuleSet implements IPreRule {
+  +rules: $ReadOnlyArray<PreRule | NullPreRule>;
+  constructor(rules: $ReadOnlyArray<PreRule | NullPreRule>): void;
+  static create(
+    rules: $ReadOnlyArray<PreRule | NullPreRule | PreRuleSet>,
+  ): AnyPreRule;
+  compiled(options: StyleXOptions): $ReadOnlyArray<ComputedStyle>;
+  equals(other: IPreRule): boolean;
+}

package/lib/preprocess-rules/__tests__/PreRule-test.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _PreRule = require("../PreRule");
+const options = {
+  classNamePrefix: 'x',
+  styleResolution: 'legacy-expand-shorthands',
+  dev: false,
+  debug: false,
+  enableFontSizePxToRem: true,
+  runtimeInjection: false,
+  test: false
+};
+describe('Converting PreRule to CSS', () => {
+  test('should convert a PreRule to CSS', () => {
+    expect(new _PreRule.PreRule('color', 'red', ['color']).compiled(options)).toMatchInlineSnapshot(`
+      [
+        [
+          "x1e2nbdu",
+          {
+            "ltr": ".x1e2nbdu{color:red}",
+            "priority": 3000,
+            "rtl": null,
+          },
+          {
+            "x1e2nbdu": [
+              "color",
+            ],
+          },
+        ],
+      ]
+    `);
+  });
+});

package/lib/preprocess-rules/__tests__/flatten-raw-style-obj-test.js

@@ -0,0 +1,196 @@
+"use strict";
+
+var _PreRule = require("../PreRule");
+var _flattenRawStyleObj = require("../flatten-raw-style-obj");
+const options = {
+  classNamePrefix: 'x',
+  debug: false,
+  styleResolution: 'legacy-expand-shorthands',
+  runtimeInjection: false,
+  dev: false,
+  test: false
+};
+describe('Flatten Style Object with legacy shorthand expansion', () => {
+  describe('Simple Objects', () => {
+    test('should create PreRule objects for simple style values', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        color: 'red',
+        marginStart: 10
+      }, options)).toEqual([['color', new _PreRule.PreRule('color', 'red', ['color'])], ['marginInlineStart', new _PreRule.PreRule('marginInlineStart', 10, ['marginInlineStart'])], ['marginLeft', new _PreRule.NullPreRule()], ['marginRight', new _PreRule.NullPreRule()]]);
+    });
+    test('should expand simple gap values', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        gap: 10
+      }, options)).toEqual([['rowGap', new _PreRule.PreRule('rowGap', 10, ['rowGap'])], ['columnGap', new _PreRule.PreRule('columnGap', 10, ['columnGap'])]]);
+    });
+    test('should expand simple containIntrinsicSize values', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        containIntrinsicSize: 10
+      }, options)).toEqual([['containIntrinsicWidth', new _PreRule.PreRule('containIntrinsicWidth', 10, ['containIntrinsicWidth'])], ['containIntrinsicHeight', new _PreRule.PreRule('containIntrinsicHeight', 10, ['containIntrinsicHeight'])]]);
+    });
+    test('should expand simple shorthands', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        margin: 10
+      }, options)).toEqual([['marginTop', new _PreRule.PreRule('marginTop', 10, ['marginTop'])], ['marginInlineEnd', new _PreRule.PreRule('marginInlineEnd', 10, ['marginInlineEnd'])], ['marginBottom', new _PreRule.PreRule('marginBottom', 10, ['marginBottom'])], ['marginInlineStart', new _PreRule.PreRule('marginInlineStart', 10, ['marginInlineStart'])]]);
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        margin: 10,
+        marginBottom: 20
+      }, options)).toEqual([['marginTop', new _PreRule.PreRule('marginTop', 10, ['marginTop'])], ['marginInlineEnd', new _PreRule.PreRule('marginInlineEnd', 10, ['marginInlineEnd'])], ['marginBottom', new _PreRule.PreRule('marginBottom', 10, ['marginBottom'])], ['marginInlineStart', new _PreRule.PreRule('marginInlineStart', 10, ['marginInlineStart'])], ['marginBottom', new _PreRule.PreRule('marginBottom', 20, ['marginBottom'])]]);
+    });
+    test('should expand shorthands with space-separated values', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        margin: '10px 20px',
+        borderColor: 'red'
+      }, options)).toEqual([['marginTop', new _PreRule.PreRule('marginTop', '10px', ['marginTop'])], ['marginInlineEnd', new _PreRule.PreRule('marginInlineEnd', '20px', ['marginInlineEnd'])], ['marginBottom', new _PreRule.PreRule('marginBottom', '10px', ['marginBottom'])], ['marginInlineStart', new _PreRule.PreRule('marginInlineStart', '20px', ['marginInlineStart'])], ['borderTopColor', new _PreRule.PreRule('borderTopColor', 'red', ['borderTopColor'])], ['borderInlineEndColor', new _PreRule.PreRule('borderInlineEndColor', 'red', ['borderInlineEndColor'])], ['borderBottomColor', new _PreRule.PreRule('borderBottomColor', 'red', ['borderBottomColor'])], ['borderInlineStartColor', new _PreRule.PreRule('borderInlineStartColor', 'red', ['borderInlineStartColor'])]]);
+    });
+    test('should expand simple gap with space-separated values', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        gap: '10px 20px'
+      }, options)).toEqual([['rowGap', new _PreRule.PreRule('rowGap', '10px', ['rowGap'])], ['columnGap', new _PreRule.PreRule('columnGap', '20px', ['columnGap'])]]);
+    });
+    test('should expand simple containIntrinsicSize with space-separated values', () => {
+      const w = 'containIntrinsicWidth';
+      const h = 'containIntrinsicHeight';
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        containIntrinsicSize: '10px 20px'
+      }, options)).toEqual([[w, new _PreRule.PreRule(w, '10px', [w])], [h, new _PreRule.PreRule(h, '20px', [h])]]);
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        containIntrinsicSize: 'auto 10px 20px'
+      }, options)).toEqual([[w, new _PreRule.PreRule(w, 'auto 10px', [w])], [h, new _PreRule.PreRule(h, '20px', [h])]]);
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        containIntrinsicSize: '10px auto 20px'
+      }, options)).toEqual([[w, new _PreRule.PreRule(w, '10px', [w])], [h, new _PreRule.PreRule(h, 'auto 20px', [h])]]);
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        containIntrinsicSize: 'auto 10px auto 20px'
+      }, options)).toEqual([[w, new _PreRule.PreRule(w, 'auto 10px', [w])], [h, new _PreRule.PreRule(h, 'auto 20px', [h])]]);
+    });
+    test('should expand shorthands with fallbacks', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        margin: ['10vh 20px', '10dvh 20px']
+      }, options)).toEqual([['marginTop', new _PreRule.PreRule('marginTop', ['10vh', '10dvh'], ['marginTop'])], ['marginInlineEnd', new _PreRule.PreRule('marginInlineEnd', '20px', ['marginInlineEnd'])], ['marginBottom', new _PreRule.PreRule('marginBottom', ['10vh', '10dvh'], ['marginBottom'])], ['marginInlineStart', new _PreRule.PreRule('marginInlineStart', '20px', ['marginInlineStart'])]]);
+    });
+  });
+  describe('Nested Objects', () => {
+    test('Legacy Pseudo classes', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        color: 'blue',
+        marginStart: 0,
+        ':hover': {
+          color: 'red',
+          marginStart: 10
+        }
+      }, options)).toEqual([['color', new _PreRule.PreRule('color', 'blue', ['color'])], ['marginInlineStart', new _PreRule.PreRule('marginInlineStart', 0, ['marginInlineStart'])], ['marginLeft', new _PreRule.NullPreRule()], ['marginRight', new _PreRule.NullPreRule()], [':hover_color', new _PreRule.PreRule('color', 'red', [':hover', 'color'])], [':hover_marginInlineStart', new _PreRule.PreRule('marginInlineStart', 10, [':hover', 'marginInlineStart'])], [':hover_marginLeft', new _PreRule.NullPreRule()], [':hover_marginRight', new _PreRule.NullPreRule()]]);
+    });
+    test('Modern Pseudo classes', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        color: {
+          default: 'blue',
+          ':hover': 'red'
+        },
+        marginStart: {
+          default: 0,
+          ':hover': 10
+        }
+      }, options)).toEqual([['color', _PreRule.PreRuleSet.create([new _PreRule.PreRule('color', 'blue', ['color', 'default']), new _PreRule.PreRule('color', 'red', ['color', ':hover'])])], ['marginInlineStart', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginInlineStart', 0, ['marginInlineStart', 'default']), new _PreRule.PreRule('marginInlineStart', 10, ['marginInlineStart', ':hover'])])], ['marginLeft', _PreRule.PreRuleSet.create([new _PreRule.NullPreRule(), new _PreRule.NullPreRule()])], ['marginRight', _PreRule.PreRuleSet.create([new _PreRule.NullPreRule(), new _PreRule.NullPreRule()])]]);
+    });
+    test('Modern Pseudo classes with shorthands', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        color: {
+          default: 'blue',
+          ':hover': 'red'
+        },
+        margin: {
+          default: 0,
+          ':hover': 10
+        }
+      }, options)).toEqual([['color', _PreRule.PreRuleSet.create([new _PreRule.PreRule('color', 'blue', ['color', 'default']), new _PreRule.PreRule('color', 'red', ['color', ':hover'])])], ['marginTop', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginTop', 0, ['marginTop', 'default']), new _PreRule.PreRule('marginTop', 10, ['marginTop', ':hover'])])], ['marginInlineEnd', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginInlineEnd', 0, ['marginInlineEnd', 'default']), new _PreRule.PreRule('marginInlineEnd', 10, ['marginInlineEnd', ':hover'])])], ['marginBottom', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginBottom', 0, ['marginBottom', 'default']), new _PreRule.PreRule('marginBottom', 10, ['marginBottom', ':hover'])])], ['marginInlineStart', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginInlineStart', 0, ['marginInlineStart', 'default']), new _PreRule.PreRule('marginInlineStart', 10, ['marginInlineStart', ':hover'])])]]);
+    });
+    test('Modern Pseudo classes with complex shorthands', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        color: {
+          default: 'blue',
+          ':hover': 'red'
+        },
+        margin: {
+          default: '1px 2px 3px 4px',
+          ':hover': '10px 20px'
+        }
+      }, options)).toEqual([['color', _PreRule.PreRuleSet.create([new _PreRule.PreRule('color', 'blue', ['color', 'default']), new _PreRule.PreRule('color', 'red', ['color', ':hover'])])], ['marginTop', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginTop', '1px', ['marginTop', 'default']), new _PreRule.PreRule('marginTop', '10px', ['marginTop', ':hover'])])], ['marginInlineEnd', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginInlineEnd', '2px', ['marginInlineEnd', 'default']), new _PreRule.PreRule('marginInlineEnd', '20px', ['marginInlineEnd', ':hover'])])], ['marginBottom', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginBottom', '3px', ['marginBottom', 'default']), new _PreRule.PreRule('marginBottom', '10px', ['marginBottom', ':hover'])])], ['marginInlineStart', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginInlineStart', '4px', ['marginInlineStart', 'default']), new _PreRule.PreRule('marginInlineStart', '20px', ['marginInlineStart', ':hover'])])]]);
+    });
+    test('Modern pseudo and at-rules', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        color: {
+          default: 'blue',
+          ':hover': 'red',
+          '@media (min-width: 300px)': 'green'
+        },
+        marginStart: {
+          default: 0,
+          ':hover': 10
+        }
+      }, options)).toEqual([['color', _PreRule.PreRuleSet.create([new _PreRule.PreRule('color', 'blue', ['color', 'default']), new _PreRule.PreRule('color', 'red', ['color', ':hover']), new _PreRule.PreRule('color', 'green', ['color', '@media (min-width: 300px)'])])], ['marginInlineStart', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginInlineStart', 0, ['marginInlineStart', 'default']), new _PreRule.PreRule('marginInlineStart', 10, ['marginInlineStart', ':hover'])])], ['marginLeft', _PreRule.PreRuleSet.create([new _PreRule.NullPreRule(), new _PreRule.NullPreRule()])], ['marginRight', _PreRule.PreRuleSet.create([new _PreRule.NullPreRule(), new _PreRule.NullPreRule()])]]);
+    });
+    test('Attribute selector conditions', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        color: {
+          default: 'blue',
+          '[data-panel-state="open"]': 'red'
+        }
+      }, options)).toEqual([['color', _PreRule.PreRuleSet.create([new _PreRule.PreRule('color', 'blue', ['color', 'default']), new _PreRule.PreRule('color', 'red', ['color', '[data-panel-state="open"]'])])]]);
+    });
+  });
+  describe('Multiple levels of nesting', () => {
+    test('Fallback styles within nested objects', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        margin: {
+          default: '1px 2px 3px 4px',
+          ':hover': ['10px 20px', '1dvh 2dvw']
+        }
+      }, options)).toEqual([['marginTop', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginTop', '1px', ['marginTop', 'default']), new _PreRule.PreRule('marginTop', ['10px', '1dvh'], ['marginTop', ':hover'])])], ['marginInlineEnd', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginInlineEnd', '2px', ['marginInlineEnd', 'default']), new _PreRule.PreRule('marginInlineEnd', ['20px', '2dvw'], ['marginInlineEnd', ':hover'])])], ['marginBottom', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginBottom', '3px', ['marginBottom', 'default']), new _PreRule.PreRule('marginBottom', ['10px', '1dvh'], ['marginBottom', ':hover'])])], ['marginInlineStart', _PreRule.PreRuleSet.create([new _PreRule.PreRule('marginInlineStart', '4px', ['marginInlineStart', 'default']), new _PreRule.PreRule('marginInlineStart', ['20px', '2dvw'], ['marginInlineStart', ':hover'])])]]);
+    });
+    test('pseudo within a media query - legacy syntax', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        '@media (min-width: 300px)': {
+          ':hover': {
+            color: 'red'
+          }
+        }
+      }, options)).toEqual([['@media (min-width: 300px)_:hover_color', _PreRule.PreRuleSet.create([new _PreRule.PreRule('color', 'red', ['@media (min-width: 300px)', ':hover', 'color'])])]]);
+    });
+    test('pseudo with a pseudo within a media query - legacy syntax', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        '@media (min-width: 300px)': {
+          ':hover': {
+            color: 'pink',
+            ':active': {
+              color: 'red'
+            }
+          }
+        }
+      }, options)).toEqual([['@media (min-width: 300px)_:hover_color', _PreRule.PreRuleSet.create([new _PreRule.PreRule('color', 'pink', ['@media (min-width: 300px)', ':hover', 'color'])])], ['@media (min-width: 300px)_:hover_:active_color', _PreRule.PreRuleSet.create([new _PreRule.PreRule('color', 'red', ['@media (min-width: 300px)', ':hover', ':active', 'color'])])]]);
+    });
+    test('pseudo within a media query - modern syntax', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        color: {
+          default: 'blue',
+          '@media (min-width: 300px)': {
+            ':hover': 'red'
+          }
+        }
+      }, options)).toEqual([['color', _PreRule.PreRuleSet.create([new _PreRule.PreRule('color', 'blue', ['color', 'default']), new _PreRule.PreRule('color', 'red', ['color', '@media (min-width: 300px)', ':hover'])])]]);
+    });
+    test('extra deep, pseudo within a media query - modern syntax', () => {
+      expect((0, _flattenRawStyleObj.flattenRawStyleObject)({
+        color: {
+          default: 'blue',
+          '@media (min-width: 300px)': {
+            ':hover': {
+              default: 'red',
+              ':active': 'maroon'
+            }
+          }
+        }
+      }, options)).toEqual([['color', _PreRule.PreRuleSet.create([new _PreRule.PreRule('color', 'blue', ['color', 'default']), new _PreRule.PreRule('color', 'red', ['color', '@media (min-width: 300px)', ':hover', 'default']), new _PreRule.PreRule('color', 'maroon', ['color', '@media (min-width: 300px)', ':hover', ':active'])])]]);
+    });
+  });
+});