@stylexjs/shared 0.2.0-beta.9 → 0.4.0

package/lib/preprocess-rules/basic-validation.js.flow

@@ -0,0 +1,13 @@
+/**
+ * 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
+ */
+
+declare export function validateNamespace(
+  namespace: mixed,
+  conditions: $ReadOnlyArray<string>,
+): void;

package/lib/preprocess-rules/flatten-raw-style-obj.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 { RawStyles, StyleXOptions } from '../common-types';
+import {
+  type AnyPreRule,
+  type IPreRule,
+  PreIncludedStylesRule,
+} from './PreRule';
+export declare function flattenRawStyleObject(
+  style: RawStyles,
+  options: StyleXOptions,
+): ReadonlyArray<Readonly<[string, IPreRule]>>;
+export declare function _flattenRawStyleObject(
+  style: RawStyles,
+  pseudos: ReadonlyArray<string>,
+  atRules: ReadonlyArray<string>,
+  options: StyleXOptions,
+): Array<Readonly<[string, AnyPreRule | PreIncludedStylesRule]>>;

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

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports._flattenRawStyleObject = _flattenRawStyleObject;
+exports.flattenRawStyleObject = flattenRawStyleObject;
+var _index = _interopRequireDefault(require("./index"));
+var _PreRule = require("./PreRule");
+var _stylexInclude = require("../stylex-include");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function flattenRawStyleObject(style, options) {
+  return _flattenRawStyleObject(style, [], [], options);
+}
+function _flattenRawStyleObject(style, pseudos, atRules, options) {
+  const flattened = [];
+  for (const _key in style) {
+    const value = style[_key];
+    const key = _key.match(/var\(--[a-z0-9]+\)/) ? _key.slice(4, -1) : _key;
+    if (typeof value === 'object' && value instanceof _stylexInclude.IncludedStyles) {
+      flattened.push([key, new _PreRule.PreIncludedStylesRule(value)]);
+      continue;
+    }
+    if (value === null || typeof value === 'string' || typeof value === 'number') {
+      const pairs = (0, _index.default)([key, value], options);
+      for (const [property, value] of pairs) {
+        if (value === null) {
+          flattened.push([property, new _PreRule.NullPreRule()]);
+        } else {
+          flattened.push([property, new _PreRule.PreRule(property, value, pseudos, atRules)]);
+        }
+      }
+      continue;
+    }
+    if (Array.isArray(value)) {
+      const equivalentPairs = {};
+      for (const eachVal of value) {
+        const pairs = (0, _index.default)([key, eachVal], options);
+        for (const [property, val] of pairs) {
+          if (Array.isArray(val)) {
+            if (equivalentPairs[property] == null) {
+              equivalentPairs[property] = [...val];
+            } else {
+              equivalentPairs[property].push(...val);
+            }
+          } else if (equivalentPairs[property] == null) {
+            equivalentPairs[property] = [val];
+          } else {
+            equivalentPairs[property].push(val);
+          }
+        }
+      }
+      Object.entries(equivalentPairs).map(_ref => {
+        let [property, values] = _ref;
+        return [property, [...new Set(values.filter(Boolean))]];
+      }).map(_ref2 => {
+        let [property, values] = _ref2;
+        return [property, values.length === 0 ? null : values.length === 1 ? values[0] : values];
+      }).forEach(_ref3 => {
+        let [property, value] = _ref3;
+        if (value === null) {
+          flattened.push([property, new _PreRule.NullPreRule()]);
+        } else {
+          flattened.push([property, new _PreRule.PreRule(property, value, pseudos, atRules)]);
+        }
+      });
+      continue;
+    }
+    if (typeof value === 'object' && !key.startsWith(':') && !key.startsWith('@')) {
+      const equivalentPairs = {};
+      for (const condition in value) {
+        const innerValue = value[condition];
+        const pseudosToPassDown = [...pseudos];
+        const atRulesToPassDown = [...atRules];
+        if (condition.startsWith(':')) {
+          pseudosToPassDown.push(condition);
+        } else if (condition.startsWith('@')) {
+          atRulesToPassDown.push(condition);
+        }
+        const pairs = _flattenRawStyleObject({
+          [key]: innerValue
+        }, pseudosToPassDown, atRulesToPassDown, options);
+        for (const [property, preRule] of pairs) {
+          if (preRule instanceof _PreRule.PreIncludedStylesRule) {
+            throw new Error('stylex.include can only be used at the top-level');
+          }
+          if (equivalentPairs[property] == null) {
+            equivalentPairs[property] = {
+              [condition]: preRule
+            };
+          } else {
+            equivalentPairs[property][condition] = preRule;
+          }
+        }
+      }
+      for (const [property, obj] of Object.entries(equivalentPairs)) {
+        const sortedKeys = Object.keys(obj);
+        const rules = [];
+        for (const condition of sortedKeys) {
+          rules.push(obj[condition]);
+        }
+        flattened.push([property, _PreRule.PreRuleSet.create(rules)]);
+      }
+    }
+    if (typeof value === 'object' && (key.startsWith(':') || key.startsWith('@'))) {
+      const pseudosToPassDown = [...pseudos];
+      const atRulesToPassDown = [...atRules];
+      if (key.startsWith(':')) {
+        pseudosToPassDown.push(key);
+      } else if (key.startsWith('@')) {
+        atRulesToPassDown.push(key);
+      }
+      const pairs = _flattenRawStyleObject(value, pseudosToPassDown, atRulesToPassDown, options);
+      for (const [property, preRule] of pairs) {
+        flattened.push([key + '_' + property, preRule]);
+      }
+    }
+  }
+  return flattened;
+}

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

@@ -0,0 +1,27 @@
+/**
+ * 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 { RawStyles, StyleXOptions } from '../common-types';
+
+import {
+  type AnyPreRule,
+  type IPreRule,
+  PreIncludedStylesRule,
+} from './PreRule';
+declare export function flattenRawStyleObject(
+  style: RawStyles,
+  options: StyleXOptions,
+): $ReadOnlyArray<$ReadOnly<[string, IPreRule]>>;
+
+declare export function _flattenRawStyleObject(
+  style: RawStyles,
+  pseudos: $ReadOnlyArray<string>,
+  atRules: $ReadOnlyArray<string>,
+  options: StyleXOptions,
+): Array<$ReadOnly<[string, AnyPreRule | PreIncludedStylesRule]>>;

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

@@ -0,0 +1,18 @@
+/**
+ * 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 { StyleXOptions, TStyleValue } from '../common-types';
+export declare function getExpandedKeys(
+  options: StyleXOptions,
+): ReadonlyArray<string>;
+declare function flatMapExpandedShorthands(
+  objEntry: Readonly<[string, TStyleValue]>,
+  options: StyleXOptions,
+): ReadonlyArray<[string, TStyleValue]>;
+export default flatMapExpandedShorthands;

package/lib/preprocess-rules/index.js

@@ -9,15 +9,6 @@ var _applicationOrder = _interopRequireDefault(require("./application-order"));
 var _legacyExpandShorthands = _interopRequireDefault(require("./legacy-expand-shorthands"));
 var _propertySpecificity = _interopRequireDefault(require("./property-specificity"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * Copyright (c) Meta Platforms, Inc. and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * 
- */
-
 const expansions = {
   'application-order': _applicationOrder.default,
   'property-specificity': _propertySpecificity.default,

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

@@ -0,0 +1,19 @@
+/**
+ * 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, TStyleValue } from '../common-types';
+
+declare export function getExpandedKeys(
+  options: StyleXOptions,
+): $ReadOnlyArray<string>;
+
+declare export default function flatMapExpandedShorthands(
+  objEntry: $ReadOnly<[string, TStyleValue]>,
+  options: StyleXOptions,
+): $ReadOnlyArray<[string, TStyleValue]>;

package/lib/preprocess-rules/legacy-expand-shorthands.d.ts

@@ -0,0 +1,200 @@
+/**
+ * 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 { TStyleValue } from '../common-types';
+/**
+ * Shorthand properties:
+ * - [x] all - Should be banned
+ * - [ ] animation
+ * - [ ] background
+ * - [-] border
+ * - [x] border-block-end
+ * - [x] border-block-start
+ * - [ ] border-bottom
+ * - [x] border-color
+ * - [x] border-image
+ * - [x] border-inline-end
+ * - [x] border-inline-start
+ * - [ ] border-left
+ * - [x] border-radius
+ * - [ ] border-right
+ * - [x] border-style
+ * - [ ] border-top
+ * - [x] border-width
+ * - [ ] column-rule
+ * - [ ] columns
+ * - [ ] flex
+ * - [ ] flex-flow
+ * - [ ] font
+ * - [ ] gap
+ * - [ ] grid
+ * - [ ] grid-area
+ * - [ ] grid-column
+ * - [ ] grid-row
+ * - [ ] grid-template
+ * - [ ] list-style
+ * - [x] margin
+ * - [ ] mask
+ * - [ ] offset
+ * - [ ] outline
+ * - [x] overflow
+ * - [x] padding
+ * - [ ] place-content
+ * - [ ] place-items
+ * - [ ] place-self
+ * - [ ] scroll-margin
+ * - [ ] scroll-padding
+ * - [ ] text-decoration
+ * - [ ] text-emphasis
+ * - [ ] transition
+ */
+
+/**
+ * Shorthand properties:
+ * - [x] all - Should be banned
+ * - [ ] animation
+ * - [ ] background
+ * - [-] border
+ * - [x] border-block-end
+ * - [x] border-block-start
+ * - [ ] border-bottom
+ * - [x] border-color
+ * - [x] border-image
+ * - [x] border-inline-end
+ * - [x] border-inline-start
+ * - [ ] border-left
+ * - [x] border-radius
+ * - [ ] border-right
+ * - [x] border-style
+ * - [ ] border-top
+ * - [x] border-width
+ * - [ ] column-rule
+ * - [ ] columns
+ * - [ ] flex
+ * - [ ] flex-flow
+ * - [ ] font
+ * - [ ] gap
+ * - [ ] grid
+ * - [ ] grid-area
+ * - [ ] grid-column
+ * - [ ] grid-row
+ * - [ ] grid-template
+ * - [ ] list-style
+ * - [x] margin
+ * - [ ] mask
+ * - [ ] offset
+ * - [ ] outline
+ * - [x] overflow
+ * - [x] padding
+ * - [ ] place-content
+ * - [ ] place-items
+ * - [ ] place-self
+ * - [ ] scroll-margin
+ * - [ ] scroll-padding
+ * - [ ] text-decoration
+ * - [ ] text-emphasis
+ * - [ ] transition
+ */
+
+type TReturn = ReadonlyArray<[string, TStyleValue]>;
+declare const shorthands: {
+  border: (rawValue: TStyleValue) => TReturn;
+  borderColor: (rawValue: TStyleValue) => TReturn;
+  borderHorizontal: (rawValue: TStyleValue) => TReturn;
+  borderStyle: (rawValue: TStyleValue) => TReturn;
+  borderVertical: (rawValue: TStyleValue) => TReturn;
+  borderWidth: (rawValue: TStyleValue) => TReturn;
+  borderHorizontalColor: (rawValue: TStyleValue) => TReturn;
+  borderHorizontalStyle: (rawValue: TStyleValue) => TReturn;
+  borderHorizontalWidth: (rawValue: TStyleValue) => TReturn;
+  borderVerticalColor: (rawValue: TStyleValue) => TReturn;
+  borderVerticalStyle: (rawValue: TStyleValue) => TReturn;
+  borderVerticalWidth: (rawValue: TStyleValue) => TReturn;
+  borderRadius: (rawValue: TStyleValue) => TReturn;
+  inset: (rawValue: TStyleValue) => TReturn;
+  insetInline: (rawValue: TStyleValue) => TReturn;
+  insetBlock: (rawValue: TStyleValue) => TReturn;
+  start: (rawValue: TStyleValue) => TReturn;
+  end: (rawValue: TStyleValue) => TReturn;
+  left: (rawValue: TStyleValue) => TReturn;
+  right: (rawValue: TStyleValue) => TReturn;
+  gap: (rawValue: TStyleValue) => TReturn;
+  margin: (rawValue: TStyleValue) => TReturn;
+  marginHorizontal: (rawValue: TStyleValue) => TReturn;
+  marginStart: (rawValue: TStyleValue) => TReturn;
+  marginEnd: (rawValue: TStyleValue) => TReturn;
+  marginLeft: (rawValue: TStyleValue) => TReturn;
+  marginRight: (rawValue: TStyleValue) => TReturn;
+  marginVertical: (rawValue: TStyleValue) => TReturn;
+  overflow: (rawValue: TStyleValue) => TReturn;
+  padding: (rawValue: TStyleValue) => TReturn;
+  paddingHorizontal: (val: TStyleValue) => TReturn;
+  paddingStart: (val: TStyleValue) => TReturn;
+  paddingEnd: (val: TStyleValue) => TReturn;
+  paddingLeft: (val: TStyleValue) => TReturn;
+  paddingRight: (val: TStyleValue) => TReturn;
+  paddingVertical: (val: TStyleValue) => TReturn;
+};
+declare const aliases: {
+  insetBlockStart: (val: TStyleValue) => TReturn;
+  insetBlockEnd: (val: TStyleValue) => TReturn;
+  insetInlineStart: any;
+  insetInlineEnd: any;
+  blockSize: (val: TStyleValue) => TReturn;
+  inlineSize: (val: TStyleValue) => TReturn;
+  minBlockSize: (val: TStyleValue) => TReturn;
+  minInlineSize: (val: TStyleValue) => TReturn;
+  maxBlockSize: (val: TStyleValue) => TReturn;
+  maxInlineSize: (val: TStyleValue) => TReturn;
+  borderBlockWidth: any;
+  borderBlockStyle: any;
+  borderBlockColor: any;
+  borderBlockStartWidth: (val: TStyleValue) => TReturn;
+  borderBlockStartStyle: (val: TStyleValue) => TReturn;
+  borderBlockStartColor: (val: TStyleValue) => TReturn;
+  borderBlockEndWidth: (val: TStyleValue) => TReturn;
+  borderBlockEndStyle: (val: TStyleValue) => TReturn;
+  borderBlockEndColor: (val: TStyleValue) => TReturn;
+  borderInlineWidth: any;
+  borderInlineStyle: any;
+  borderInlineColor: any;
+  borderInlineStartWidth: (val: TStyleValue) => TReturn;
+  borderInlineStartStyle: (val: TStyleValue) => TReturn;
+  borderInlineStartColor: (val: TStyleValue) => TReturn;
+  borderInlineEndWidth: (val: TStyleValue) => TReturn;
+  borderInlineEndStyle: (val: TStyleValue) => TReturn;
+  borderInlineEndColor: (val: TStyleValue) => TReturn;
+  borderStartStartRadius: (val: TStyleValue) => TReturn;
+  borderStartEndRadius: (val: TStyleValue) => TReturn;
+  borderEndStartRadius: (val: TStyleValue) => TReturn;
+  borderEndEndRadius: (val: TStyleValue) => TReturn;
+  gridGap: any;
+  gridRowGap: (value: TStyleValue) => TReturn;
+  gridColumnGap: (value: TStyleValue) => TReturn;
+  marginBlock: any;
+  marginBlockStart: (val: TStyleValue) => TReturn;
+  marginBlockEnd: (val: TStyleValue) => TReturn;
+  marginInline: any;
+  marginInlineStart: (val: TStyleValue) => TReturn;
+  marginInlineEnd: (val: TStyleValue) => TReturn;
+  overflowBlock: (value: TStyleValue) => TReturn;
+  overflowInline: (value: TStyleValue) => TReturn;
+  paddingBlock: any;
+  paddingBlockStart: (val: TStyleValue) => TReturn;
+  paddingBlockEnd: (val: TStyleValue) => TReturn;
+  paddingInline: any;
+  paddingInlineStart: (val: TStyleValue) => TReturn;
+  paddingInlineEnd: (val: TStyleValue) => TReturn;
+  scrollMarginBlockStart: (value: TStyleValue) => TReturn;
+  scrollMarginBlockEnd: (value: TStyleValue) => TReturn;
+};
+declare const expansions: Omit<shorthands, keyof (aliases | {})> &
+  Omit<aliases, keyof ({})> & {};
+declare const $$EXPORT_DEFAULT_DECLARATION$$: typeof expansions;
+export default $$EXPORT_DEFAULT_DECLARATION$$;