@stylexjs/shared 0.2.0-beta.11 → 0.2.0-beta.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (88) hide show
  1. package/lib/common-types.d.ts +49 -0
  2. package/lib/common-types.js.flow +64 -0
  3. package/lib/convert-to-className.d.ts +16 -0
  4. package/lib/convert-to-className.js.flow +23 -0
  5. package/lib/generate-css-rule.d.ts +17 -0
  6. package/lib/generate-css-rule.js.flow +17 -0
  7. package/lib/hash.d.ts +11 -0
  8. package/lib/hash.js.flow +12 -0
  9. package/lib/index.d.ts +32 -95
  10. package/lib/index.js.flow +46 -3
  11. package/lib/messages.d.ts +32 -0
  12. package/lib/messages.js.flow +35 -0
  13. package/lib/physical-rtl/generate-ltr.d.ts +12 -0
  14. package/lib/physical-rtl/generate-ltr.js.flow +13 -0
  15. package/lib/physical-rtl/generate-rtl.d.ts +14 -0
  16. package/lib/physical-rtl/generate-rtl.js.flow +13 -0
  17. package/lib/preprocess-rules/PreRule.d.ts +52 -0
  18. package/lib/preprocess-rules/PreRule.js.flow +64 -0
  19. package/lib/preprocess-rules/application-order.d.ts +253 -0
  20. package/lib/preprocess-rules/application-order.js.flow +206 -0
  21. package/lib/preprocess-rules/basic-validation.d.ts +13 -0
  22. package/lib/preprocess-rules/basic-validation.js.flow +13 -0
  23. package/lib/preprocess-rules/flatten-raw-style-obj.d.ts +25 -0
  24. package/lib/preprocess-rules/flatten-raw-style-obj.js.flow +27 -0
  25. package/lib/preprocess-rules/index.d.ts +18 -0
  26. package/lib/preprocess-rules/index.js.flow +19 -0
  27. package/lib/preprocess-rules/legacy-expand-shorthands.d.ts +122 -0
  28. package/lib/preprocess-rules/legacy-expand-shorthands.js +0 -139
  29. package/lib/preprocess-rules/legacy-expand-shorthands.js.flow +101 -0
  30. package/lib/preprocess-rules/property-specificity.d.ts +76 -0
  31. package/lib/preprocess-rules/property-specificity.js.flow +87 -0
  32. package/lib/stylex-create-vars.d.ts +27 -0
  33. package/lib/stylex-create-vars.js.flow +22 -0
  34. package/lib/stylex-create.d.ts +23 -0
  35. package/lib/stylex-create.js.flow +30 -0
  36. package/lib/stylex-first-that-works.d.ts +14 -0
  37. package/lib/stylex-first-that-works.js.flow +13 -0
  38. package/lib/stylex-include.d.ts +19 -0
  39. package/lib/stylex-include.js.flow +21 -0
  40. package/lib/stylex-keyframes.d.ts +17 -0
  41. package/lib/stylex-keyframes.js.flow +20 -0
  42. package/lib/transform-value.d.ts +13 -0
  43. package/lib/transform-value.js.flow +15 -0
  44. package/lib/utils/Rule.d.ts +58 -0
  45. package/lib/utils/Rule.js.flow +64 -0
  46. package/lib/utils/dashify.d.ts +10 -0
  47. package/lib/utils/dashify.js.flow +9 -0
  48. package/lib/utils/default-options.d.ts +10 -0
  49. package/lib/utils/default-options.js.flow +24 -0
  50. package/lib/utils/file-based-identifier.d.ts +14 -0
  51. package/lib/utils/file-based-identifier.js +22 -0
  52. package/lib/utils/file-based-identifier.js.flow +13 -0
  53. package/lib/utils/genCSSRule.d.ts +16 -0
  54. package/lib/utils/genCSSRule.js.flow +16 -0
  55. package/lib/utils/normalize-value.d.ts +12 -0
  56. package/lib/utils/normalize-value.js.flow +14 -0
  57. package/lib/utils/normalizers/detect-unclosed-fns.d.ts +17 -0
  58. package/lib/utils/normalizers/detect-unclosed-fns.js.flow +16 -0
  59. package/lib/utils/normalizers/font-size-px-to-rem.d.ts +19 -0
  60. package/lib/utils/normalizers/font-size-px-to-rem.js +9 -4
  61. package/lib/utils/normalizers/font-size-px-to-rem.js.flow +18 -0
  62. package/lib/utils/normalizers/leading-zero.d.ts +17 -0
  63. package/lib/utils/normalizers/leading-zero.js.flow +16 -0
  64. package/lib/utils/normalizers/quotes.d.ts +19 -0
  65. package/lib/utils/normalizers/quotes.js.flow +18 -0
  66. package/lib/utils/normalizers/timings.d.ts +19 -0
  67. package/lib/utils/normalizers/timings.js.flow +18 -0
  68. package/lib/utils/normalizers/whitespace.d.ts +20 -0
  69. package/lib/utils/normalizers/whitespace.js.flow +19 -0
  70. package/lib/utils/normalizers/zero-dimensions.d.ts +19 -0
  71. package/lib/utils/normalizers/zero-dimensions.js.flow +18 -0
  72. package/lib/utils/object-utils.d.ts +61 -0
  73. package/lib/utils/object-utils.js.flow +81 -0
  74. package/lib/utils/property-priorities.d.ts +11 -0
  75. package/lib/utils/property-priorities.js.flow +10 -0
  76. package/lib/utils/split-css-value.d.ts +15 -0
  77. package/lib/utils/split-css-value.js.flow +16 -0
  78. package/lib/validate.d.ts +12 -0
  79. package/lib/validate.js.flow +12 -0
  80. package/package.json +3 -1
  81. package/lib/expand-shorthands.d.ts +0 -5
  82. package/lib/expand-shorthands.js +0 -330
  83. package/lib/namespace-transforms/__tests__/preflatten.test.js +0 -120
  84. package/lib/namespace-transforms/preflatten.js +0 -89
  85. package/lib/preprocess-rules/expand-shorthands.js +0 -156
  86. package/lib/preprocess-rules/null-out-longhand.js +0 -310
  87. package/lib/preprocess-rules/react-native-web.js +0 -142
  88. package/lib/stylex-defaultValue.js +0 -397
@@ -0,0 +1,81 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow strict
8
+ */
9
+
10
+ // A bunch of object utils with better Flow types
11
+
12
+ import type { CompiledStyles } from '../common-types';
13
+
14
+ import { IncludedStyles } from '../stylex-include';
15
+
16
+ declare export function isPlainObject(
17
+ obj: mixed
18
+ ): boolean %checks(typeof obj === 'object' &&
19
+ obj != null &&
20
+ !Array.isArray(obj) &&
21
+ obj?.constructor === Object);
22
+
23
+ declare export function flattenObject(obj: CompiledStyles): {
24
+ +[string]: null | string | IncludedStyles,
25
+ };
26
+
27
+ declare export function objEntries<Obj: { ... }>(
28
+ obj: Obj
29
+ ): $ReadOnlyArray<[$Keys<Obj>, Obj[$Keys<Obj>]]>;
30
+
31
+ declare export function objValues<Obj: { ... }>(
32
+ obj: Obj
33
+ ): $ReadOnlyArray<Obj[$Keys<Obj>]>;
34
+
35
+ declare export function objFromEntries<K: string | number, V>(
36
+ entries: $ReadOnlyArray<$ReadOnly<[K, V]>>
37
+ ): { [K]: V };
38
+
39
+ declare export function objMapKeys<
40
+ V,
41
+ K1: string | number = string,
42
+ K2: string | number = string
43
+ >(
44
+ obj: { +[K1]: V },
45
+ mapper: (K1) => K2
46
+ ): { +[K2]: V };
47
+
48
+ declare export function objMapEntry<
49
+ V,
50
+ V2,
51
+ K1: string | number = string,
52
+ K2: string | number = string
53
+ >(
54
+ obj: { +[K1]: V },
55
+ mapper: ([K1, V]) => [K2, V2]
56
+ ): { +[K2]: V2 };
57
+
58
+ declare export function objMap<V, V2, K: string | number = string>(
59
+ obj: { +[K]: V },
60
+ mapper: (V, K) => V2
61
+ ): { +[K]: V2 };
62
+
63
+ declare export class Pipe<T> {
64
+ value: T;
65
+ constructor(val: T): void;
66
+ pipe<T2>(mapper: (T) => T2): Pipe<T2>;
67
+ done(): T;
68
+ static create(val: T): Pipe<T>;
69
+ }
70
+
71
+ // Function that sorts an array without mutating it and returns a new array
72
+ declare export var arraySort: <T>(
73
+ arr: $ReadOnlyArray<T>,
74
+ fn?: (T, T) => number
75
+ ) => $ReadOnlyArray<T>;
76
+
77
+ declare export var arrayEquals: <T>(
78
+ arr1: $ReadOnlyArray<T>,
79
+ arr2: $ReadOnlyArray<T>,
80
+ equals: (T, T) => boolean
81
+ ) => boolean;
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ *
8
+ */
9
+
10
+ declare function getPriority(key: string): number;
11
+ export default getPriority;
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow strict
8
+ */
9
+
10
+ declare export default function getPriority(key: string): number;
@@ -0,0 +1,15 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ *
8
+ *
9
+ */
10
+
11
+ import type { TStyleValue } from '../common-types';
12
+ declare function splitValue(
13
+ str: TStyleValue
14
+ ): ReadonlyArray<number | string | null>;
15
+ export default splitValue;
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow strict
8
+ *
9
+ */
10
+
11
+ import type { TStyleValue } from '../common-types';
12
+
13
+ // Using split(' ') Isn't enough bcause of values like calc.
14
+ declare export default function splitValue(
15
+ str: TStyleValue
16
+ ): $ReadOnlyArray<number | string | null>;
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ *
8
+ */
9
+
10
+ import type { TRawValue } from './common-types';
11
+ declare function validateEntry($$PARAM_0$$: [string, TRawValue]): void;
12
+ export default validateEntry;
@@ -0,0 +1,12 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow strict
8
+ */
9
+
10
+ import type { TRawValue } from './common-types';
11
+
12
+ declare export default function validateEntry([string, TRawValue]): void;
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@stylexjs/shared",
3
- "version": "0.2.0-beta.11",
3
+ "version": "0.2.0-beta.13",
4
4
  "main": "lib/index.js",
5
5
  "repository": "https://www.github.com/facebook/stylex",
6
6
  "license": "MIT",
7
7
  "scripts": {
8
+ "prebuild": "gen-types -i src/ -o lib/",
8
9
  "build": "babel src/ --out-dir lib/ --copy-files",
9
10
  "test": "jest"
10
11
  },
@@ -12,6 +13,7 @@
12
13
  "postcss-value-parser": "^4.1.0"
13
14
  },
14
15
  "devDependencies": {
16
+ "@stylexjs/scripts": "0.2.0-beta.13",
15
17
  "typescript": "^4.7.4"
16
18
  },
17
19
  "jest": {
@@ -1,5 +0,0 @@
1
- export const BANNED_PROPERTIES: { [key: string]: string };
2
- export const expandedKeys: $ReadOnlyArray<string>;
3
- export default function flatMapExpandedShorthands<T>(
4
- objEntry: [string, T]
5
- ): Array<[string, T]>;
@@ -1,330 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.default = flatMapExpandedShorthands;
7
- exports.expandedKeys = void 0;
8
- var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
9
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
- /**
11
- * Copyright (c) Meta Platforms, Inc. and affiliates.
12
- *
13
- * This source code is licensed under the MIT license found in the
14
- * LICENSE file in the root directory of this source tree.
15
- *
16
- *
17
- */
18
-
19
- function printNode(node) {
20
- switch (node.type) {
21
- case 'word':
22
- case 'string':
23
- return `${node.value}`;
24
- case 'function':
25
- return `${node.value}(${node.nodes.map(printNode).join('')})`;
26
- default:
27
- return node.value;
28
- }
29
- }
30
-
31
- // Using split(' ') Isn't enough bcause of values like calc.
32
- function splitValue(str) {
33
- if (Array.isArray(str)) {
34
- return str;
35
- }
36
- const parsed = (0, _postcssValueParser.default)(str.trim());
37
- const nodes = parsed.nodes.filter(node => node.type !== 'space' && node.type !== 'div').map(printNode);
38
- if (nodes.length > 1 && nodes[nodes.length - 1].toLowerCase() === '!important') {
39
- return nodes.slice(0, nodes.length - 1).map(node => node + ' !important');
40
- }
41
- return nodes;
42
- }
43
-
44
- /**
45
- * Shorthand properties:
46
- * - [x] all - Should be banned
47
- * - [x] animation
48
- * - [x] background
49
- * - [x] border
50
- * - [x] border-block-end
51
- * - [x] border-block-start
52
- * - [x] border-bottom
53
- * - [x] border-color
54
- * - [x] border-image
55
- * - [x] border-inline-end
56
- * - [x] border-inline-start
57
- * - [x] border-left
58
- * - [x] border-radius
59
- * - [x] border-right
60
- * - [x] border-style
61
- * - [x] border-top
62
- * - [x] border-width
63
- * - [x] column-rule
64
- * - [x] columns
65
- * - [x] container
66
- * - [x] flex
67
- * - [x] flex-flow
68
- * - [x] font
69
- * - [x] gap
70
- * - [x] grid
71
- * - [x] grid-area
72
- * - [x] grid-column
73
- * - [x] grid-row
74
- * - [x] grid-template
75
- * - [x] inset
76
- * - [x] inset-block
77
- * - [x] inset-inline
78
- * - [x] list-style
79
- * - [x] margin
80
- * - [x] mask
81
- * - [x] offset
82
- * - [x] outline
83
- * - [x] overflow
84
- * - [x] padding
85
- * - [x] place-content
86
- * - [x] place-items
87
- * - [x] place-self
88
- * - [x] scroll-margin
89
- * - [x] scroll-padding
90
- * - [x] text-decoration
91
- * - [x] text-emphasis
92
- * - [x] transition
93
- */
94
-
95
- const shorthands = {
96
- all: _ => {
97
- throw new Error('all is not supported');
98
- },
99
- animation: value => [['animation', value], ['animationName', null], ['animationDuration', null], ['animationTimingFunction', null], ['animationDelay', null], ['animationIterationCount', null], ['animationDirection', null], ['animationFillMode', null], ['animationPlayState', null]],
100
- background: value => [['background', value], ['backgroundAttachment', null], ['backgroundClip', null], ['backgroundColor', null], ['backgroundImage', null], ['backgroundOrigin', null], ['backgroundPosition', null], ['backgroundRepeat', null], ['backgroundSize', null]],
101
- // These will be removed later, matching the properties with React Native.
102
- // For now, we're compiling them to the React Native properties.
103
- // @Deprecated
104
- border: rawValue => {
105
- if (typeof rawValue === 'number') {
106
- return shorthands.borderWidth(rawValue);
107
- }
108
- const [width, style, color] = splitValue(rawValue);
109
- return [...shorthands.borderWidth(width), ...shorthands.borderStyle(style), ...shorthands.borderColor(color)];
110
- },
111
- // @Deprecated
112
- borderInline: rawValue => {
113
- if (typeof rawValue === 'number') {
114
- return [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]];
115
- }
116
- const [width, style, color] = splitValue(rawValue);
117
- return [...shorthands.borderInlineWidth(width), ...shorthands.borderInlineStyle(style), ...shorthands.borderInlineColor(color)];
118
- },
119
- // @Deprecated
120
- borderBlock: rawValue => {
121
- if (typeof rawValue === 'number') {
122
- return [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]];
123
- }
124
- const [width, style, color] = splitValue(rawValue);
125
- return [...shorthands.borderBlockWidth(width), ...shorthands.borderBlockStyle(style), ...shorthands.borderBlockColor(color)];
126
- },
127
- // @Deprecated
128
- borderTop: rawValue => {
129
- if (typeof rawValue === 'number') {
130
- return [['borderTopWidth', rawValue]];
131
- }
132
- const [width, style, color] = splitValue(rawValue);
133
- return [['borderTopWidth', width], ['borderTopStyle', style], ['borderTopColor', color]];
134
- },
135
- // @Deprecated
136
- borderInlineEnd: rawValue => {
137
- if (typeof rawValue === 'number') {
138
- return [['borderInlineEndWidth', rawValue]];
139
- }
140
- const [width, style, color] = splitValue(rawValue);
141
- return [['borderInlineEndWidth', width], ['borderInlineEndStyle', style], ['borderInlineEndColor', color]];
142
- },
143
- // @Deprecated
144
- borderRight: rawValue => {
145
- 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(' '));
146
- },
147
- // @Deprecated
148
- borderBottom: rawValue => {
149
- if (typeof rawValue === 'number') {
150
- return [['borderBottomWidth', rawValue]];
151
- }
152
- const [width, style, color] = splitValue(rawValue);
153
- return [['borderBottomWidth', width], ['borderBottomStyle', style], ['borderBottomColor', color]];
154
- },
155
- // @Deprecated
156
- borderInlineStart: rawValue => {
157
- if (typeof rawValue === 'number') {
158
- return [['borderInlineStartWidth', rawValue]];
159
- }
160
- const [width, style, color] = splitValue(rawValue);
161
- return [['borderInlineStartWidth', width], ['borderInlineStartStyle', style], ['borderInlineStartColor', color]];
162
- },
163
- // @Deprecated
164
- borderLeft: rawValue => {
165
- 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(' '));
166
- },
167
- borderInlineWidth: rawValue => [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderLeftWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null]],
168
- borderInlineStyle: rawValue => [['borderInlineStyle', rawValue], ['borderInlineStartStyle', null], ['borderLeftStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null]],
169
- borderInlineColor: rawValue => [['borderInlineColor', rawValue], ['borderInlineStartColor', null], ['borderLeftColor', null], ['borderInlineEndColor', null], ['borderRightColor', null]],
170
- borderBlockWidth: rawValue => [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]],
171
- borderBlockStyle: rawValue => [['borderBlockStyle', rawValue], ['borderTopStyle', null], ['borderBottomStyle', null]],
172
- borderBlockColor: rawValue => [['borderBlockColor', rawValue], ['borderTopColor', null], ['borderBottomColor', null]],
173
- borderColor: value => [['borderColor', value], ['borderTopColor', null], ['borderInlineEndColor', null], ['borderRightColor', null], ['borderBottomColor', null], ['borderInlineStartColor', null], ['borderLeftColor', null]],
174
- borderStyle: value => [['borderStyle', value], ['borderTopStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null], ['borderBottomStyle', null], ['borderInlineStartStyle', null], ['borderLeftStyle', null]],
175
- borderWidth: value => [['borderWidth', value], ['borderTopWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null], ['borderBottomWidth', null], ['borderInlineStartWidth', null], ['borderLeftWidth', null]],
176
- borderRadius: value => {
177
- const values = typeof value === 'number' ? [value] : splitValue(value);
178
- if (values.length === 1) {
179
- return [['borderRadius', value],
180
- // // logical constituents
181
- ['borderStartStartRadius', null], ['borderStartEndRadius', null], ['borderEndStartRadius', null], ['borderEndEndRadius', null],
182
- // physical constituents
183
- ['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
184
- }
185
-
186
- // @Deprecated
187
- const [startStart, startEnd = startStart, endEnd = startStart, endStart = startEnd] = values;
188
- return [
189
- // split into logical consituents
190
- ['borderStartStartRadius', startStart], ['borderStartEndRadius', startEnd], ['borderEndEndRadius', endEnd], ['borderEndStartRadius', endStart],
191
- // unset physical consituents
192
- ['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
193
- },
194
- columnRule: value => [['columnRule', value], ['columnRuleWidth', null], ['columnRuleStyle', null], ['columnRuleColor', null]],
195
- columns: value => [['columns', value], ['columnCount', null], ['columnWidth', null]],
196
- container: value => [['container', value], ['containerName', null], ['containerType', null]],
197
- flex: value => [['flex', value], ['flexGrow', null], ['flexShrink', null], ['flexBasis', null]],
198
- flexFlow: value => [['flexFlow', value], ['flexDirection', null], ['flexWrap', null]],
199
- // @Deprecated ?
200
- font: value => [['font', value], ['fontFamily', null], ['fontSize', null], ['fontStretch', null], ['fontStyle', null], ['fontVariant', null], ['fontWeight', null], ['lineHeight', null]],
201
- gap: value => [['gap', value], ['rowGap', null], ['columnGap', null]],
202
- grid: value => [['grid', value], ['gridTemplate', null], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null], ['gridAutoRows', null], ['gridAutoColumns', null], ['gridAutoFlow', null]
203
-
204
- // This is for grid items only
205
- // Not a constituent of `grid`
206
- // ['gridRow', null],
207
- // ['gridRowStart', null],
208
- // ['gridRowEnd', null],
209
- // ['gridColumn', null],
210
- // ['gridColumnStart', null],
211
- // ['gridColumnEnd', null],
212
- // ['gridArea', null],
213
- ],
214
-
215
- gridArea: value => [['gridArea', value], ['gridRow', null], ['gridRowStart', null], ['gridRowEnd', null], ['gridColumn', null], ['gridColumnStart', null], ['gridColumnEnd', null]],
216
- gridRow: value => [['gridRow', value], ['gridRowStart', null], ['gridRowEnd', null]],
217
- gridColumn: value => [['gridColumn', value], ['gridColumnStart', null], ['gridColumnEnd', null]],
218
- gridTemplate: value => [['gridTemplate', value], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null]],
219
- inset: value => [['inset', value], ['insetInline', null], ['insetBlock', null], ['insetInlineStart', null], ['insetInlineEnd', null], ['top', null], ['right', null], ['bottom', null], ['left', null]],
220
- insetInline: value => [['insetInline', value], ['insetInlineStart', null], ['insetInlineEnd', null], ['left', null], ['right', null]],
221
- insetBlock: value => [['insetBlock', value], ['top', null], ['bottom', null]],
222
- listStyle: value => [['listStyle', value], ['listStyleImage', null], ['listStylePosition', null], ['listStyleType', null]],
223
- margin: value => {
224
- const values = typeof value === 'number' ? [value] : splitValue(value);
225
- if (values.length === 1) {
226
- return [['margin', values[0]], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null], ['marginTop', null], ['marginBottom', null]];
227
- }
228
- // @Deprecated
229
- const [top, right = top, bottom = top, left = right] = values;
230
- return [['marginTop', top], ['marginInlineEnd', right], ['marginBottom', bottom], ['marginInlineStart', left], ['marginLeft', null], ['marginRight', null]];
231
- },
232
- marginInline: value => [['marginInline', value], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null]],
233
- marginBlock: value => [['marginBlock', value], ['marginTop', null], ['marginBottom', null]],
234
- mask: value => [['mask', value], ['maskClip', null], ['maskComposite', null], ['maskImage', null], ['maskMode', null], ['maskOrigin', null], ['maskPosition', null], ['maskRepeat', null], ['maskSize', null]],
235
- offset: value => [['offset', value], ['offsetAnchor', null], ['offsetDistance', null], ['offsetPath', null], ['offsetPosition', null], ['offsetRotate', null]],
236
- outline: value => [['outline', value], ['outlineColor', null], ['outlineStyle', null], ['outlineWidth', null]],
237
- overflow: value => [['overflow', value], ['overflowX', null], ['overflowY', null]],
238
- padding: rawValue => {
239
- const values = typeof rawValue === 'number' ? [rawValue] : splitValue(rawValue);
240
- if (values.length === 1) {
241
- return [['padding', values[0]], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null], ['paddingTop', null], ['paddingBottom', null]];
242
- }
243
- // @Deprecated
244
- const [top, right = top, bottom = top, left = right] = values;
245
- return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
246
- },
247
- paddingInline: rawValue => [['paddingInline', rawValue], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null]],
248
- paddingBlock: rawValue => [['paddingBlock', rawValue], ['paddingTop', null], ['paddingBottom', null]],
249
- placeContent: value => [['placeContent', value], ['alignContent', null], ['justifyContent', null]],
250
- placeItems: value => [['placeItems', value], ['alignItems', null], ['justifyItems', null]],
251
- placeSelf: value => [['placeSelf', value], ['alignSelf', null], ['justifySelf', null]],
252
- scrollMargin: value => [['scrollMargin', value], ['scrollMarginBottom', null], ['scrollMarginLeft', null], ['scrollMarginStart', null], ['scrollMarginRight', null], ['scrollMarginEnd', null], ['scrollMarginTop', null]],
253
- scrollPadding: value => [['scrollPadding', value], ['scrollPaddingBottom', null], ['scrollPaddingLeft', null], ['scrollPaddingStart', null], ['scrollPaddingRight', null], ['scrollPaddingEnd', null], ['scrollPaddingTop', null]],
254
- scrollTimeline: value => [['scrollTimeline', value], ['scrollTimelineName', null], ['scrollTimelineAxis', null]],
255
- textDecoration: value => [['textDecoration', value], ['textDecorationColor', null], ['textDecorationLine', null], ['textDecorationStyle', null], ['textDecorationThickness', null]],
256
- textEmphasis: value => [['textEmphasis', value], ['textEmphasisColor', null], ['textEmphasisStyle', null]],
257
- transition: value => [['transition', value], ['transitionDelay', null], ['transitionDuration', null], ['transitionProperty', null], ['transitionTimingFunction', null]]
258
- };
259
- const aliases = {
260
- // @Deprecated
261
- borderHorizontal: shorthands.borderInline,
262
- // @Deprecated
263
- borderVertical: shorthands.borderBlock,
264
- // @Deprecated
265
- borderBlockStart: shorthands.borderTop,
266
- // @Deprecated
267
- borderEnd: shorthands.borderInlineEnd,
268
- // @Deprecated
269
- borderBlockEnd: shorthands.borderBottom,
270
- // @Deprecated
271
- borderStart: shorthands.borderInlineStart,
272
- borderHorizontalWidth: shorthands.borderInlineWidth,
273
- borderHorizontalStyle: shorthands.borderInlineStyle,
274
- borderHorizontalColor: shorthands.borderInlineColor,
275
- borderVerticalWidth: shorthands.borderBlockWidth,
276
- borderVerticalStyle: shorthands.borderBlockStyle,
277
- borderVerticalColor: shorthands.borderBlockColor,
278
- borderBlockStartColor: value => [['borderTopColor', value]],
279
- borderBlockEndColor: value => [['borderBottomColor', value]],
280
- borderStartColor: value => [['borderInlineStartColor', value]],
281
- borderEndColor: value => [['borderInlineEndColor', value]],
282
- borderBlockStartStyle: value => [['borderTopStyle', value]],
283
- borderBlockEndStyle: value => [['borderBottomStyle', value]],
284
- borderStartStyle: value => [['borderInlineStartStyle', value]],
285
- borderEndStyle: value => [['borderInlineEndStyle', value]],
286
- borderBlockStartWidth: value => [['borderTopWidth', value]],
287
- borderBlockEndWidth: value => [['borderBottomWidth', value]],
288
- borderStartWidth: value => [['borderInlineStartWidth', value]],
289
- borderEndWidth: value => [['borderInlineEndWidth', value]],
290
- borderTopStartRadius: value => [['borderStartStartRadius', value]],
291
- borderTopEndRadius: value => [['borderStartEndRadius', value]],
292
- borderBottomStartRadius: value => [['borderEndStartRadius', value]],
293
- borderBottomEndRadius: value => [['borderEndEndRadius', value]],
294
- marginBlockStart: value => [['marginTop', value]],
295
- marginBlockEnd: value => [['marginBottom', value]],
296
- marginStart: value => [['marginInlineStart', value]],
297
- marginEnd: value => [['marginInlineEnd', value]],
298
- marginHorizontal: shorthands.marginInline,
299
- marginVertical: shorthands.marginBlock,
300
- paddingBlockStart: rawValue => [['paddingTop', rawValue]],
301
- paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
302
- paddingStart: rawValue => [['paddingInlinStart', rawValue]],
303
- paddingEnd: rawValue => [['paddingInlineEnd', rawValue]],
304
- paddingHorizontal: shorthands.paddingInline,
305
- paddingVertical: shorthands.paddingBlock,
306
- insetBlockStart: value => [['top', value]],
307
- insetBlockEnd: value => [['bottom', value]],
308
- start: value => [['insetInlineStart', value]],
309
- end: value => [['insetInlineEnd', value]]
310
- };
311
- const expansions = {
312
- ...shorthands,
313
- ...aliases
314
- };
315
-
316
- // TODO: It should be possible to remove this as we should no longer have
317
- // to disallow shorthand properties with object values.
318
- const expandedKeys = Object.keys(expansions);
319
- exports.expandedKeys = expandedKeys;
320
- function flatMapExpandedShorthands(objEntry) {
321
- const [key, value] = objEntry;
322
- const expansion = expansions[key];
323
- if (expansion) {
324
- if (Array.isArray(value)) {
325
- throw new Error('Cannot use fallbacks for shorthands. Use the expansion instead.');
326
- }
327
- return expansion(value);
328
- }
329
- return [objEntry];
330
- }
@@ -1,120 +0,0 @@
1
- "use strict";
2
-
3
- var _preflatten = _interopRequireDefault(require("../preflatten"));
4
- var _Rule = require("../../utils/Rule");
5
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
6
- /**
7
- * Copyright (c) Meta Platforms, Inc. and affiliates.
8
- *
9
- * This source code is licensed under the MIT license found in the
10
- * LICENSE file in the root directory of this source tree.
11
- *
12
- *
13
- *
14
- */
15
-
16
- describe('preflatten', () => {
17
- test('flattens a simple style object', () => {
18
- const input = {
19
- color: 'red',
20
- backgroundColor: 'blue'
21
- };
22
- const output = {
23
- color: new _Rule.RawRule('color', 'red', [], []),
24
- backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], [])
25
- };
26
- expect((0, _preflatten.default)(input)).toEqual(output);
27
- });
28
- test('flattens styles with fallback styles', () => {
29
- const input = {
30
- color: ['red', 'blue'],
31
- backgroundColor: 'blue'
32
- };
33
- const output = {
34
- color: new _Rule.RawRuleList([new _Rule.RawRule('color', 'red', [], []), new _Rule.RawRule('color', 'blue', [], [])]),
35
- backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], [])
36
- };
37
- expect((0, _preflatten.default)(input)).toEqual(output);
38
- });
39
- test('flattens a simple style object with a nested pseudo styles', () => {
40
- const input = {
41
- color: 'red',
42
- backgroundColor: 'blue',
43
- ':hover': {
44
- color: 'green'
45
- }
46
- };
47
- const output = {
48
- color: new _Rule.RawRule('color', 'red', [], []),
49
- backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], []),
50
- ':hover_color': new _Rule.RawRule('color', 'green', [':hover'], [])
51
- };
52
- expect((0, _preflatten.default)(input)).toEqual(output);
53
- });
54
- test('flattens a simple style object with a nested at-rule styles', () => {
55
- const input = {
56
- color: 'red',
57
- backgroundColor: 'blue',
58
- '@media (min-width: 600px)': {
59
- color: 'green'
60
- }
61
- };
62
- const output = {
63
- color: new _Rule.RawRule('color', 'red', [], []),
64
- backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], []),
65
- '@media (min-width: 600px)_color': new _Rule.RawRule('color', 'green', [], ['@media (min-width: 600px)'])
66
- };
67
- expect((0, _preflatten.default)(input)).toEqual(output);
68
- });
69
- test('flattens style object with nested pseudo in property', () => {
70
- const input = {
71
- color: {
72
- default: 'red',
73
- ':hover': 'green',
74
- ':active': 'blue'
75
- },
76
- backgroundColor: 'blue'
77
- };
78
- const output = {
79
- color: new _Rule.RawRuleList([new _Rule.RawRule('color', 'red', [], []), new _Rule.RawRule('color', 'green', [':hover'], []), new _Rule.RawRule('color', 'blue', [':active'], [])]),
80
- backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], [])
81
- };
82
- expect((0, _preflatten.default)(input)).toEqual(output);
83
- });
84
- test('flattens style object with nested media queries', () => {
85
- const input = {
86
- color: {
87
- default: 'red',
88
- '@media (max-width: 600px)': 'green',
89
- '@media (min-width: 600px and max-width: 900px)': 'blue'
90
- },
91
- backgroundColor: 'blue'
92
- };
93
- const output = {
94
- 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)'])]),
95
- backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], [])
96
- };
97
- expect((0, _preflatten.default)(input)).toEqual(output);
98
- });
99
- test('flattens style object with nested media queries and pseudo', () => {
100
- const input = {
101
- color: {
102
- default: 'red',
103
- '@media (max-width: 600px)': {
104
- default: 'green',
105
- ':hover': 'blue'
106
- },
107
- '@media (min-width: 600px and max-width: 900px)': {
108
- default: 'blue',
109
- ':hover': 'green'
110
- }
111
- },
112
- backgroundColor: 'blue'
113
- };
114
- const output = {
115
- 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)'])]),
116
- backgroundColor: new _Rule.RawRule('backgroundColor', 'blue', [], [])
117
- };
118
- expect((0, _preflatten.default)(input)).toEqual(output);
119
- });
120
- });