@stylexjs/shared 0.2.0-beta.9 → 0.3.0

package/lib/utils/split-css-value.js

@@ -6,16 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = splitValue;
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- *
- */
-
 function printNode(node) {
   switch (node.type) {
     case 'word':
@@ -27,14 +17,10 @@ function printNode(node) {
       return node.value;
   }
 }
-
-// Using split(' ') Isn't enough bcause of values like calc.
 function splitValue(str) {
   if (str == null || typeof str === 'number') {
     return [str];
   }
-
-  // This will never happen, but keeping here for Flow.
   if (Array.isArray(str)) {
     return str;
   }

package/lib/utils/split-css-value.js.flow

@@ -0,0 +1,15 @@
+/**
+ * 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 { TStyleValue } from '../common-types';
+
+// Using split(' ') Isn't enough bcause of values like calc.
+declare export default function splitValue(
+  str: TStyleValue,
+): $ReadOnlyArray<number | string | null>;

package/lib/validate.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 { TRawValue } from './common-types';
+declare function validateEntry($$PARAM_0$$: [string, TRawValue]): void;
+export default validateEntry;

package/lib/validate.js

@@ -4,15 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = validateEntry;
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-
 function validateEntry(_ref) {
   let [key, value] = _ref;
   if (Array.isArray(value)) {
@@ -22,7 +13,7 @@ function validateEntry(_ref) {
   }
 }
 function validateSimplyEntry(_ref2) {
-  let [key, value] = _ref2;
+  let [key, _value] = _ref2;
   if (BANNED_KEYS.has(key)) {
     throw new Error('Banned key: ' + key);
   }

package/lib/validate.js.flow

@@ -0,0 +1,12 @@
+/**
+ * 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 { TRawValue } from './common-types';
+
+declare export default function validateEntry([string, TRawValue]): void;

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@stylexjs/shared",
-  "version": "0.2.0-beta.9",
-  "description": "Shared Code for Stylex compile and runtime.",
+  "version": "0.3.0",
   "main": "lib/index.js",
-  "repository": "https://www.github.com/facebookexternal/stylex",
-  "author": "Naman Goel <nmn@fb.com>",
+  "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
   "scripts": {
+    "prebuild": "gen-types -i src/ -o lib/",
     "build": "babel src/ --out-dir lib/ --copy-files",
     "test": "jest"
   },
@@ -14,7 +13,7 @@
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
-    "typescript": "^4.7.4"
+    "@stylexjs/scripts": "0.3.0"
   },
   "jest": {
     "snapshotFormat": {

package/lib/expand-shorthands.d.ts

@@ -1,5 +0,0 @@
-export const BANNED_PROPERTIES: { [key: string]: string };
-export const expandedKeys: $ReadOnlyArray<string>;
-export default function flatMapExpandedShorthands<T>(
-  objEntry: [string, T]
-): Array<[string, T]>;

package/lib/expand-shorthands.js

@@ -1,330 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = flatMapExpandedShorthands;
-exports.expandedKeys = void 0;
-var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-
-function printNode(node) {
-  switch (node.type) {
-    case 'word':
-    case 'string':
-      return `${node.value}`;
-    case 'function':
-      return `${node.value}(${node.nodes.map(printNode).join('')})`;
-    default:
-      return node.value;
-  }
-}
-
-// Using split(' ') Isn't enough bcause of values like calc.
-function splitValue(str) {
-  if (Array.isArray(str)) {
-    return str;
-  }
-  const parsed = (0, _postcssValueParser.default)(str.trim());
-  const nodes = parsed.nodes.filter(node => node.type !== 'space' && node.type !== 'div').map(printNode);
-  if (nodes.length > 1 && nodes[nodes.length - 1].toLowerCase() === '!important') {
-    return nodes.slice(0, nodes.length - 1).map(node => node + ' !important');
-  }
-  return nodes;
-}
-
-/**
- * Shorthand properties:
- * - [x] all - Should be banned
- * - [x] animation
- * - [x] background
- * - [x] border
- * - [x] border-block-end
- * - [x] border-block-start
- * - [x] border-bottom
- * - [x] border-color
- * - [x] border-image
- * - [x] border-inline-end
- * - [x] border-inline-start
- * - [x] border-left
- * - [x] border-radius
- * - [x] border-right
- * - [x] border-style
- * - [x] border-top
- * - [x] border-width
- * - [x] column-rule
- * - [x] columns
- * - [x] container
- * - [x] flex
- * - [x] flex-flow
- * - [x] font
- * - [x] gap
- * - [x] grid
- * - [x] grid-area
- * - [x] grid-column
- * - [x] grid-row
- * - [x] grid-template
- * - [x] inset
- * - [x] inset-block
- * - [x] inset-inline
- * - [x] list-style
- * - [x] margin
- * - [x] mask
- * - [x] offset
- * - [x] outline
- * - [x] overflow
- * - [x] padding
- * - [x] place-content
- * - [x] place-items
- * - [x] place-self
- * - [x] scroll-margin
- * - [x] scroll-padding
- * - [x] text-decoration
- * - [x] text-emphasis
- * - [x] transition
- */
-
-const shorthands = {
-  all: _ => {
-    throw new Error('all is not supported');
-  },
-  animation: value => [['animation', value], ['animationName', null], ['animationDuration', null], ['animationTimingFunction', null], ['animationDelay', null], ['animationIterationCount', null], ['animationDirection', null], ['animationFillMode', null], ['animationPlayState', null]],
-  background: value => [['background', value], ['backgroundAttachment', null], ['backgroundClip', null], ['backgroundColor', null], ['backgroundImage', null], ['backgroundOrigin', null], ['backgroundPosition', null], ['backgroundRepeat', null], ['backgroundSize', null]],
-  // These will be removed later, matching the properties with React Native.
-  // For now, we're compiling them to the React Native properties.
-  // @Deprecated
-  border: rawValue => {
-    if (typeof rawValue === 'number') {
-      return shorthands.borderWidth(rawValue);
-    }
-    const [width, style, color] = splitValue(rawValue);
-    return [...shorthands.borderWidth(width), ...shorthands.borderStyle(style), ...shorthands.borderColor(color)];
-  },
-  // @Deprecated
-  borderInline: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]];
-    }
-    const [width, style, color] = splitValue(rawValue);
-    return [...shorthands.borderInlineWidth(width), ...shorthands.borderInlineStyle(style), ...shorthands.borderInlineColor(color)];
-  },
-  // @Deprecated
-  borderBlock: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]];
-    }
-    const [width, style, color] = splitValue(rawValue);
-    return [...shorthands.borderBlockWidth(width), ...shorthands.borderBlockStyle(style), ...shorthands.borderBlockColor(color)];
-  },
-  // @Deprecated
-  borderTop: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['borderTopWidth', rawValue]];
-    }
-    const [width, style, color] = splitValue(rawValue);
-    return [['borderTopWidth', width], ['borderTopStyle', style], ['borderTopColor', color]];
-  },
-  // @Deprecated
-  borderInlineEnd: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['borderInlineEndWidth', rawValue]];
-    }
-    const [width, style, color] = splitValue(rawValue);
-    return [['borderInlineEndWidth', width], ['borderInlineEndStyle', style], ['borderInlineEndColor', color]];
-  },
-  // @Deprecated
-  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(' '));
-  },
-  // @Deprecated
-  borderBottom: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['borderBottomWidth', rawValue]];
-    }
-    const [width, style, color] = splitValue(rawValue);
-    return [['borderBottomWidth', width], ['borderBottomStyle', style], ['borderBottomColor', color]];
-  },
-  // @Deprecated
-  borderInlineStart: rawValue => {
-    if (typeof rawValue === 'number') {
-      return [['borderInlineStartWidth', rawValue]];
-    }
-    const [width, style, color] = splitValue(rawValue);
-    return [['borderInlineStartWidth', width], ['borderInlineStartStyle', style], ['borderInlineStartColor', color]];
-  },
-  // @Deprecated
-  borderLeft: rawValue => {
-    throw new Error(['`borderLeft` is not supported.', 'You could use `borderLeftWidth`, `borderLeftStyle` and `borderLeftColor`,', 'but it is preferable to use `borderInlineStartWidth`, `borderInlineStartStyle` and `borderInlineStartColor`.'].join(' '));
-  },
-  borderInlineWidth: rawValue => [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderLeftWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null]],
-  borderInlineStyle: rawValue => [['borderInlineStyle', rawValue], ['borderInlineStartStyle', null], ['borderLeftStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null]],
-  borderInlineColor: rawValue => [['borderInlineColor', rawValue], ['borderInlineStartColor', null], ['borderLeftColor', null], ['borderInlineEndColor', null], ['borderRightColor', null]],
-  borderBlockWidth: rawValue => [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]],
-  borderBlockStyle: rawValue => [['borderBlockStyle', rawValue], ['borderTopStyle', null], ['borderBottomStyle', null]],
-  borderBlockColor: rawValue => [['borderBlockColor', rawValue], ['borderTopColor', null], ['borderBottomColor', null]],
-  borderColor: value => [['borderColor', value], ['borderTopColor', null], ['borderInlineEndColor', null], ['borderRightColor', null], ['borderBottomColor', null], ['borderInlineStartColor', null], ['borderLeftColor', null]],
-  borderStyle: value => [['borderStyle', value], ['borderTopStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null], ['borderBottomStyle', null], ['borderInlineStartStyle', null], ['borderLeftStyle', null]],
-  borderWidth: value => [['borderWidth', value], ['borderTopWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null], ['borderBottomWidth', null], ['borderInlineStartWidth', null], ['borderLeftWidth', null]],
-  borderRadius: value => {
-    const values = typeof value === 'number' ? [value] : splitValue(value);
-    if (values.length === 1) {
-      return [['borderRadius', value],
-      // // logical constituents
-      ['borderStartStartRadius', null], ['borderStartEndRadius', null], ['borderEndStartRadius', null], ['borderEndEndRadius', null],
-      // physical constituents
-      ['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
-    }
-
-    // @Deprecated
-    const [startStart, startEnd = startStart, endEnd = startStart, endStart = startEnd] = values;
-    return [
-    // split into logical consituents
-    ['borderStartStartRadius', startStart], ['borderStartEndRadius', startEnd], ['borderEndEndRadius', endEnd], ['borderEndStartRadius', endStart],
-    // unset physical consituents
-    ['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
-  },
-  columnRule: value => [['columnRule', value], ['columnRuleWidth', null], ['columnRuleStyle', null], ['columnRuleColor', null]],
-  columns: value => [['columns', value], ['columnCount', null], ['columnWidth', null]],
-  container: value => [['container', value], ['containerName', null], ['containerType', null]],
-  flex: value => [['flex', value], ['flexGrow', null], ['flexShrink', null], ['flexBasis', null]],
-  flexFlow: value => [['flexFlow', value], ['flexDirection', null], ['flexWrap', null]],
-  // @Deprecated ?
-  font: value => [['font', value], ['fontFamily', null], ['fontSize', null], ['fontStretch', null], ['fontStyle', null], ['fontVariant', null], ['fontWeight', null], ['lineHeight', null]],
-  gap: value => [['gap', value], ['rowGap', null], ['columnGap', null]],
-  grid: value => [['grid', value], ['gridTemplate', null], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null], ['gridAutoRows', null], ['gridAutoColumns', null], ['gridAutoFlow', null]
-
-  // This is for grid items only
-  // Not a constituent of `grid`
-  // ['gridRow', null],
-  // ['gridRowStart', null],
-  // ['gridRowEnd', null],
-  // ['gridColumn', null],
-  // ['gridColumnStart', null],
-  // ['gridColumnEnd', null],
-  // ['gridArea', null],
-  ],
-
-  gridArea: value => [['gridArea', value], ['gridRow', null], ['gridRowStart', null], ['gridRowEnd', null], ['gridColumn', null], ['gridColumnStart', null], ['gridColumnEnd', null]],
-  gridRow: value => [['gridRow', value], ['gridRowStart', null], ['gridRowEnd', null]],
-  gridColumn: value => [['gridColumn', value], ['gridColumnStart', null], ['gridColumnEnd', null]],
-  gridTemplate: value => [['gridTemplate', value], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null]],
-  inset: value => [['inset', value], ['insetInline', null], ['insetBlock', null], ['insetInlineStart', null], ['insetInlineEnd', null], ['top', null], ['right', null], ['bottom', null], ['left', null]],
-  insetInline: value => [['insetInline', value], ['insetInlineStart', null], ['insetInlineEnd', null], ['left', null], ['right', null]],
-  insetBlock: value => [['insetBlock', value], ['top', null], ['bottom', null]],
-  listStyle: value => [['listStyle', value], ['listStyleImage', null], ['listStylePosition', null], ['listStyleType', null]],
-  margin: value => {
-    const values = typeof value === 'number' ? [value] : splitValue(value);
-    if (values.length === 1) {
-      return [['margin', values[0]], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null], ['marginTop', null], ['marginBottom', null]];
-    }
-    // @Deprecated
-    const [top, right = top, bottom = top, left = right] = values;
-    return [['marginTop', top], ['marginInlineEnd', right], ['marginBottom', bottom], ['marginInlineStart', left], ['marginLeft', null], ['marginRight', null]];
-  },
-  marginInline: value => [['marginInline', value], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null]],
-  marginBlock: value => [['marginBlock', value], ['marginTop', null], ['marginBottom', null]],
-  mask: value => [['mask', value], ['maskClip', null], ['maskComposite', null], ['maskImage', null], ['maskMode', null], ['maskOrigin', null], ['maskPosition', null], ['maskRepeat', null], ['maskSize', null]],
-  offset: value => [['offset', value], ['offsetAnchor', null], ['offsetDistance', null], ['offsetPath', null], ['offsetPosition', null], ['offsetRotate', null]],
-  outline: value => [['outline', value], ['outlineColor', null], ['outlineStyle', null], ['outlineWidth', null]],
-  overflow: value => [['overflow', value], ['overflowX', null], ['overflowY', null]],
-  padding: rawValue => {
-    const values = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
-    if (values.length === 1) {
-      return [['padding', values[0]], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null], ['paddingTop', null], ['paddingBottom', null]];
-    }
-    // @Deprecated
-    const [top, right = top, bottom = top, left = right] = values;
-    return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
-  },
-  paddingInline: rawValue => [['paddingInline', rawValue], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null]],
-  paddingBlock: rawValue => [['paddingBlock', rawValue], ['paddingTop', null], ['paddingBottom', null]],
-  placeContent: value => [['placeContent', value], ['alignContent', null], ['justifyContent', null]],
-  placeItems: value => [['placeItems', value], ['alignItems', null], ['justifyItems', null]],
-  placeSelf: value => [['placeSelf', value], ['alignSelf', null], ['justifySelf', null]],
-  scrollMargin: value => [['scrollMargin', value], ['scrollMarginBottom', null], ['scrollMarginLeft', null], ['scrollMarginStart', null], ['scrollMarginRight', null], ['scrollMarginEnd', null], ['scrollMarginTop', null]],
-  scrollPadding: value => [['scrollPadding', value], ['scrollPaddingBottom', null], ['scrollPaddingLeft', null], ['scrollPaddingStart', null], ['scrollPaddingRight', null], ['scrollPaddingEnd', null], ['scrollPaddingTop', null]],
-  scrollTimeline: value => [['scrollTimeline', value], ['scrollTimelineName', null], ['scrollTimelineAxis', null]],
-  textDecoration: value => [['textDecoration', value], ['textDecorationColor', null], ['textDecorationLine', null], ['textDecorationStyle', null], ['textDecorationThickness', null]],
-  textEmphasis: value => [['textEmphasis', value], ['textEmphasisColor', null], ['textEmphasisStyle', null]],
-  transition: value => [['transition', value], ['transitionDelay', null], ['transitionDuration', null], ['transitionProperty', null], ['transitionTimingFunction', null]]
-};
-const aliases = {
-  // @Deprecated
-  borderHorizontal: shorthands.borderInline,
-  // @Deprecated
-  borderVertical: shorthands.borderBlock,
-  // @Deprecated
-  borderBlockStart: shorthands.borderTop,
-  // @Deprecated
-  borderEnd: shorthands.borderInlineEnd,
-  // @Deprecated
-  borderBlockEnd: shorthands.borderBottom,
-  // @Deprecated
-  borderStart: shorthands.borderInlineStart,
-  borderHorizontalWidth: shorthands.borderInlineWidth,
-  borderHorizontalStyle: shorthands.borderInlineStyle,
-  borderHorizontalColor: shorthands.borderInlineColor,
-  borderVerticalWidth: shorthands.borderBlockWidth,
-  borderVerticalStyle: shorthands.borderBlockStyle,
-  borderVerticalColor: shorthands.borderBlockColor,
-  borderBlockStartColor: value => [['borderTopColor', value]],
-  borderBlockEndColor: value => [['borderBottomColor', value]],
-  borderStartColor: value => [['borderInlineStartColor', value]],
-  borderEndColor: value => [['borderInlineEndColor', value]],
-  borderBlockStartStyle: value => [['borderTopStyle', value]],
-  borderBlockEndStyle: value => [['borderBottomStyle', value]],
-  borderStartStyle: value => [['borderInlineStartStyle', value]],
-  borderEndStyle: value => [['borderInlineEndStyle', value]],
-  borderBlockStartWidth: value => [['borderTopWidth', value]],
-  borderBlockEndWidth: value => [['borderBottomWidth', value]],
-  borderStartWidth: value => [['borderInlineStartWidth', value]],
-  borderEndWidth: value => [['borderInlineEndWidth', value]],
-  borderTopStartRadius: value => [['borderStartStartRadius', value]],
-  borderTopEndRadius: value => [['borderStartEndRadius', value]],
-  borderBottomStartRadius: value => [['borderEndStartRadius', value]],
-  borderBottomEndRadius: value => [['borderEndEndRadius', value]],
-  marginBlockStart: value => [['marginTop', value]],
-  marginBlockEnd: value => [['marginBottom', value]],
-  marginStart: value => [['marginInlineStart', value]],
-  marginEnd: value => [['marginInlineEnd', value]],
-  marginHorizontal: shorthands.marginInline,
-  marginVertical: shorthands.marginBlock,
-  paddingBlockStart: rawValue => [['paddingTop', rawValue]],
-  paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
-  paddingStart: rawValue => [['paddingInlinStart', rawValue]],
-  paddingEnd: rawValue => [['paddingInlineEnd', rawValue]],
-  paddingHorizontal: shorthands.paddingInline,
-  paddingVertical: shorthands.paddingBlock,
-  insetBlockStart: value => [['top', value]],
-  insetBlockEnd: value => [['bottom', value]],
-  start: value => [['insetInlineStart', value]],
-  end: value => [['insetInlineEnd', value]]
-};
-const expansions = {
-  ...shorthands,
-  ...aliases
-};
-
-// TODO: It should be possible to remove this as we should no longer have
-// to disallow shorthand properties with object values.
-const expandedKeys = Object.keys(expansions);
-exports.expandedKeys = expandedKeys;
-function flatMapExpandedShorthands(objEntry) {
-  const [key, value] = objEntry;
-  const expansion = expansions[key];
-  if (expansion) {
-    if (Array.isArray(value)) {
-      throw new Error('Cannot use fallbacks for shorthands. Use the expansion instead.');
-    }
-    return expansion(value);
-  }
-  return [objEntry];
-}

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

@@ -1,120 +0,0 @@
-"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);
-  });
-});