@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.
- package/lib/common-types.d.ts +49 -0
- package/lib/common-types.js.flow +64 -0
- package/lib/convert-to-className.d.ts +16 -0
- package/lib/convert-to-className.js.flow +23 -0
- package/lib/generate-css-rule.d.ts +17 -0
- package/lib/generate-css-rule.js.flow +17 -0
- package/lib/hash.d.ts +11 -0
- package/lib/hash.js.flow +12 -0
- package/lib/index.d.ts +32 -95
- package/lib/index.js.flow +46 -3
- package/lib/messages.d.ts +32 -0
- package/lib/messages.js.flow +35 -0
- package/lib/physical-rtl/generate-ltr.d.ts +12 -0
- package/lib/physical-rtl/generate-ltr.js.flow +13 -0
- package/lib/physical-rtl/generate-rtl.d.ts +14 -0
- package/lib/physical-rtl/generate-rtl.js.flow +13 -0
- package/lib/preprocess-rules/PreRule.d.ts +52 -0
- package/lib/preprocess-rules/PreRule.js.flow +64 -0
- package/lib/preprocess-rules/application-order.d.ts +253 -0
- package/lib/preprocess-rules/application-order.js.flow +206 -0
- package/lib/preprocess-rules/basic-validation.d.ts +13 -0
- package/lib/preprocess-rules/basic-validation.js.flow +13 -0
- package/lib/preprocess-rules/flatten-raw-style-obj.d.ts +25 -0
- package/lib/preprocess-rules/flatten-raw-style-obj.js.flow +27 -0
- package/lib/preprocess-rules/index.d.ts +18 -0
- package/lib/preprocess-rules/index.js.flow +19 -0
- package/lib/preprocess-rules/legacy-expand-shorthands.d.ts +122 -0
- package/lib/preprocess-rules/legacy-expand-shorthands.js +0 -139
- package/lib/preprocess-rules/legacy-expand-shorthands.js.flow +101 -0
- package/lib/preprocess-rules/property-specificity.d.ts +76 -0
- package/lib/preprocess-rules/property-specificity.js.flow +87 -0
- package/lib/stylex-create-vars.d.ts +27 -0
- package/lib/stylex-create-vars.js.flow +22 -0
- package/lib/stylex-create.d.ts +23 -0
- package/lib/stylex-create.js.flow +30 -0
- package/lib/stylex-first-that-works.d.ts +14 -0
- package/lib/stylex-first-that-works.js.flow +13 -0
- package/lib/stylex-include.d.ts +19 -0
- package/lib/stylex-include.js.flow +21 -0
- package/lib/stylex-keyframes.d.ts +17 -0
- package/lib/stylex-keyframes.js.flow +20 -0
- package/lib/transform-value.d.ts +13 -0
- package/lib/transform-value.js.flow +15 -0
- package/lib/utils/Rule.d.ts +58 -0
- package/lib/utils/Rule.js.flow +64 -0
- package/lib/utils/dashify.d.ts +10 -0
- package/lib/utils/dashify.js.flow +9 -0
- package/lib/utils/default-options.d.ts +10 -0
- package/lib/utils/default-options.js.flow +24 -0
- package/lib/utils/file-based-identifier.d.ts +14 -0
- package/lib/utils/file-based-identifier.js +22 -0
- package/lib/utils/file-based-identifier.js.flow +13 -0
- package/lib/utils/genCSSRule.d.ts +16 -0
- package/lib/utils/genCSSRule.js.flow +16 -0
- package/lib/utils/normalize-value.d.ts +12 -0
- package/lib/utils/normalize-value.js.flow +14 -0
- package/lib/utils/normalizers/detect-unclosed-fns.d.ts +17 -0
- package/lib/utils/normalizers/detect-unclosed-fns.js.flow +16 -0
- package/lib/utils/normalizers/font-size-px-to-rem.d.ts +19 -0
- package/lib/utils/normalizers/font-size-px-to-rem.js +9 -4
- package/lib/utils/normalizers/font-size-px-to-rem.js.flow +18 -0
- package/lib/utils/normalizers/leading-zero.d.ts +17 -0
- package/lib/utils/normalizers/leading-zero.js.flow +16 -0
- package/lib/utils/normalizers/quotes.d.ts +19 -0
- package/lib/utils/normalizers/quotes.js.flow +18 -0
- package/lib/utils/normalizers/timings.d.ts +19 -0
- package/lib/utils/normalizers/timings.js.flow +18 -0
- package/lib/utils/normalizers/whitespace.d.ts +20 -0
- package/lib/utils/normalizers/whitespace.js.flow +19 -0
- package/lib/utils/normalizers/zero-dimensions.d.ts +19 -0
- package/lib/utils/normalizers/zero-dimensions.js.flow +18 -0
- package/lib/utils/object-utils.d.ts +61 -0
- package/lib/utils/object-utils.js.flow +81 -0
- package/lib/utils/property-priorities.d.ts +11 -0
- package/lib/utils/property-priorities.js.flow +10 -0
- package/lib/utils/split-css-value.d.ts +15 -0
- package/lib/utils/split-css-value.js.flow +16 -0
- package/lib/validate.d.ts +12 -0
- package/lib/validate.js.flow +12 -0
- package/package.json +3 -1
- package/lib/expand-shorthands.d.ts +0 -5
- package/lib/expand-shorthands.js +0 -330
- package/lib/namespace-transforms/__tests__/preflatten.test.js +0 -120
- package/lib/namespace-transforms/preflatten.js +0 -89
- package/lib/preprocess-rules/expand-shorthands.js +0 -156
- package/lib/preprocess-rules/null-out-longhand.js +0 -310
- package/lib/preprocess-rules/react-native-web.js +0 -142
- 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.
|
|
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": {
|
package/lib/expand-shorthands.js
DELETED
|
@@ -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
|
-
});
|