@stylexjs/shared 0.1.0-beta.7 → 0.2.0-beta.9
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/README.md +81 -0
- package/lib/expand-shorthands.d.ts +5 -0
- package/lib/expand-shorthands.js +241 -101
- package/lib/generate-css-rule.js +6 -34
- package/lib/index.d.ts +1 -0
- package/lib/index.js.flow +5 -0
- package/lib/messages.js +4 -2
- package/lib/namespace-transforms/__tests__/preflatten.test.js +120 -0
- package/lib/namespace-transforms/preflatten.js +89 -0
- package/lib/preprocess-rules/application-order.js +259 -0
- package/lib/preprocess-rules/expand-shorthands.js +156 -0
- package/lib/preprocess-rules/index.js +39 -0
- package/lib/preprocess-rules/legacy-expand-shorthands.js +169 -0
- package/lib/preprocess-rules/null-out-longhand.js +310 -0
- package/lib/preprocess-rules/property-specificity.js +135 -0
- package/lib/preprocess-rules/react-native-web.js +142 -0
- package/lib/stylex-create.js +43 -17
- package/lib/stylex-defaultValue.js +230 -98
- package/lib/stylex-keyframes.js +22 -10
- package/lib/utils/Rule.js +71 -0
- package/lib/utils/normalize-value.js +3 -0
- package/lib/utils/property-priorities.js +116 -0
- package/lib/utils/split-css-value.js +47 -0
- package/package.json +1 -1
@@ -0,0 +1,120 @@
|
|
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
|
+
});
|
@@ -0,0 +1,89 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = preflatten;
|
7
|
+
var _Rule = require("../utils/Rule");
|
8
|
+
/**
|
9
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
10
|
+
*
|
11
|
+
* This source code is licensed under the MIT license found in the
|
12
|
+
* LICENSE file in the root directory of this source tree.
|
13
|
+
*
|
14
|
+
*
|
15
|
+
*/
|
16
|
+
|
17
|
+
/// This function takes a Raw Style Object and converts into a flat object of rules.
|
18
|
+
///
|
19
|
+
/// 1. The object is "flat": There will be no nested objects after this function.
|
20
|
+
/// 2. The values are "rules": Each value is the representation of a CSS Rule.
|
21
|
+
function preflatten(namespace) {
|
22
|
+
const result = {};
|
23
|
+
for (const key of Object.keys(namespace)) {
|
24
|
+
const value = namespace[key];
|
25
|
+
if (value === null) {
|
26
|
+
result[key] = null;
|
27
|
+
} else if (Array.isArray(value)) {
|
28
|
+
const allRules = getNestedRules(key, value);
|
29
|
+
if (allRules.length > 1) {
|
30
|
+
result[key] = new _Rule.RawRuleList(allRules);
|
31
|
+
} else if (allRules.length === 1) {
|
32
|
+
result[key] = allRules[0];
|
33
|
+
} else if (allRules.length === 0) {
|
34
|
+
result[key] = null;
|
35
|
+
}
|
36
|
+
} else if (typeof value === 'object' && !Array.isArray(value)) {
|
37
|
+
if (key.startsWith('@') || key.startsWith(':')) {
|
38
|
+
for (const [nestedKey, nestedValue] of Object.entries(value)) {
|
39
|
+
if (nestedValue != null && typeof nestedValue === 'object') {
|
40
|
+
throw new Error('Pseudo and At-Rules cannot be nested.');
|
41
|
+
}
|
42
|
+
result[`${key}_${nestedKey}`] = new _Rule.RawRule(nestedKey, nestedValue, key.startsWith(':') ? [key] : [], key.startsWith('@') ? [key] : []);
|
43
|
+
}
|
44
|
+
} else {
|
45
|
+
/*:: (value: RawStyles); */
|
46
|
+
const allRules = getNestedRules(key, value);
|
47
|
+
if (allRules.length > 1) {
|
48
|
+
result[key] = new _Rule.RawRuleList(allRules);
|
49
|
+
} else if (allRules.length === 1) {
|
50
|
+
result[key] = allRules[0];
|
51
|
+
} else if (allRules.length === 0) {
|
52
|
+
result[key] = null;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
} else {
|
56
|
+
result[key] = new _Rule.RawRule(key, value, [], []);
|
57
|
+
}
|
58
|
+
}
|
59
|
+
return result;
|
60
|
+
}
|
61
|
+
function getNestedRules(key, value) {
|
62
|
+
let pseudos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
63
|
+
let atRules = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
|
64
|
+
const result = [];
|
65
|
+
if (value === null) {
|
66
|
+
return result;
|
67
|
+
} else if (Array.isArray(value)) {
|
68
|
+
result.push(new _Rule.RawRuleList(value.map(val => new _Rule.RawRule(key, val, pseudos, atRules))));
|
69
|
+
} else if (typeof value === 'object') {
|
70
|
+
for (const nestedKey of Object.keys(value)) {
|
71
|
+
const nestedValue = value[nestedKey];
|
72
|
+
if (nestedKey.startsWith('@')) {
|
73
|
+
result.push(...getNestedRules(key, nestedValue, pseudos, [...atRules, nestedKey]));
|
74
|
+
} else if (nestedKey.startsWith(':')) {
|
75
|
+
result.push(...getNestedRules(key, nestedValue, [...pseudos, nestedKey], atRules));
|
76
|
+
} else if (nestedKey === 'default') {
|
77
|
+
result.push(...getNestedRules(key, nestedValue, pseudos, atRules));
|
78
|
+
} else {
|
79
|
+
// This can be updated when we support more complex styles, such
|
80
|
+
// as applying a style conditionally when a parent is hovered.
|
81
|
+
throw new Error('Complex Selectors (combinators) are not supported yet.');
|
82
|
+
}
|
83
|
+
}
|
84
|
+
} else {
|
85
|
+
// primitive value
|
86
|
+
result.push(new _Rule.RawRule(key, value, pseudos, atRules));
|
87
|
+
}
|
88
|
+
return result;
|
89
|
+
}
|
@@ -0,0 +1,259 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
9
|
+
/**
|
10
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
11
|
+
*
|
12
|
+
* This source code is licensed under the MIT license found in the
|
13
|
+
* LICENSE file in the root directory of this source tree.
|
14
|
+
*
|
15
|
+
*
|
16
|
+
*/
|
17
|
+
|
18
|
+
const shorthands = {
|
19
|
+
all: _ => {
|
20
|
+
throw new Error('all is not supported');
|
21
|
+
},
|
22
|
+
animation: value => [['animation', value], ['animationName', null], ['animationDuration', null], ['animationTimingFunction', null], ['animationDelay', null], ['animationIterationCount', null], ['animationDirection', null], ['animationFillMode', null], ['animationPlayState', null]],
|
23
|
+
background: value => [['background', value], ['backgroundAttachment', null], ['backgroundClip', null], ['backgroundColor', null], ['backgroundImage', null], ['backgroundOrigin', null], ['backgroundPosition', null], ['backgroundRepeat', null], ['backgroundSize', null]],
|
24
|
+
// These will be removed later, matching the properties with React Native.
|
25
|
+
// For now, we're compiling them to the React Native properties.
|
26
|
+
// @Deprecated
|
27
|
+
border: rawValue => {
|
28
|
+
if (typeof rawValue === 'number') {
|
29
|
+
return shorthands.borderWidth(rawValue);
|
30
|
+
}
|
31
|
+
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
32
|
+
return [...shorthands.borderWidth(width), ...shorthands.borderStyle(style), ...shorthands.borderColor(color)];
|
33
|
+
},
|
34
|
+
// @Deprecated
|
35
|
+
borderInline: rawValue => {
|
36
|
+
if (typeof rawValue === 'number') {
|
37
|
+
return [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]];
|
38
|
+
}
|
39
|
+
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
40
|
+
return [...shorthands.borderInlineWidth(width), ...shorthands.borderInlineStyle(style), ...shorthands.borderInlineColor(color)];
|
41
|
+
},
|
42
|
+
// @Deprecated
|
43
|
+
borderBlock: rawValue => {
|
44
|
+
if (typeof rawValue === 'number') {
|
45
|
+
return [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]];
|
46
|
+
}
|
47
|
+
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
48
|
+
return [...shorthands.borderBlockWidth(width), ...shorthands.borderBlockStyle(style), ...shorthands.borderBlockColor(color)];
|
49
|
+
},
|
50
|
+
// @Deprecated
|
51
|
+
borderTop: rawValue => {
|
52
|
+
if (typeof rawValue === 'number') {
|
53
|
+
return [['borderTopWidth', rawValue]];
|
54
|
+
}
|
55
|
+
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
56
|
+
return [['borderTopWidth', width], ['borderTopStyle', style], ['borderTopColor', color]];
|
57
|
+
},
|
58
|
+
// @Deprecated
|
59
|
+
borderInlineEnd: rawValue => {
|
60
|
+
if (typeof rawValue === 'number') {
|
61
|
+
return [['borderInlineEndWidth', rawValue]];
|
62
|
+
}
|
63
|
+
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
64
|
+
return [['borderInlineEndWidth', width], ['borderInlineEndStyle', style], ['borderInlineEndColor', color]];
|
65
|
+
},
|
66
|
+
// @Deprecated
|
67
|
+
borderRight: rawValue => {
|
68
|
+
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(' '));
|
69
|
+
},
|
70
|
+
// @Deprecated
|
71
|
+
borderBottom: rawValue => {
|
72
|
+
if (typeof rawValue === 'number') {
|
73
|
+
return [['borderBottomWidth', rawValue]];
|
74
|
+
}
|
75
|
+
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
76
|
+
return [['borderBottomWidth', width], ['borderBottomStyle', style], ['borderBottomColor', color]];
|
77
|
+
},
|
78
|
+
// @Deprecated
|
79
|
+
borderInlineStart: rawValue => {
|
80
|
+
if (typeof rawValue === 'number') {
|
81
|
+
return [['borderInlineStartWidth', rawValue]];
|
82
|
+
}
|
83
|
+
const [width, style, color] = (0, _splitCssValue.default)(rawValue);
|
84
|
+
return [['borderInlineStartWidth', width], ['borderInlineStartStyle', style], ['borderInlineStartColor', color]];
|
85
|
+
},
|
86
|
+
// @Deprecated
|
87
|
+
borderLeft: rawValue => {
|
88
|
+
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(' '));
|
89
|
+
},
|
90
|
+
borderInlineWidth: rawValue => [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderLeftWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null]],
|
91
|
+
borderInlineStyle: rawValue => [['borderInlineStyle', rawValue], ['borderInlineStartStyle', null], ['borderLeftStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null]],
|
92
|
+
borderInlineColor: rawValue => [['borderInlineColor', rawValue], ['borderInlineStartColor', null], ['borderLeftColor', null], ['borderInlineEndColor', null], ['borderRightColor', null]],
|
93
|
+
borderBlockWidth: rawValue => [['borderBlockWidth', rawValue], ['borderTopWidth', null], ['borderBottomWidth', null]],
|
94
|
+
borderBlockStyle: rawValue => [['borderBlockStyle', rawValue], ['borderTopStyle', null], ['borderBottomStyle', null]],
|
95
|
+
borderBlockColor: rawValue => [['borderBlockColor', rawValue], ['borderTopColor', null], ['borderBottomColor', null]],
|
96
|
+
borderColor: value => [['borderColor', value], ['borderTopColor', null], ['borderInlineEndColor', null], ['borderRightColor', null], ['borderBottomColor', null], ['borderInlineStartColor', null], ['borderLeftColor', null]],
|
97
|
+
borderStyle: value => [['borderStyle', value], ['borderTopStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null], ['borderBottomStyle', null], ['borderInlineStartStyle', null], ['borderLeftStyle', null]],
|
98
|
+
borderWidth: value => [['borderWidth', value], ['borderTopWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null], ['borderBottomWidth', null], ['borderInlineStartWidth', null], ['borderLeftWidth', null]],
|
99
|
+
borderInlineStartColor: value => [['borderInlineStartColor', value], ['borderLeftColor', null], ['borderRightColor', null]],
|
100
|
+
borderInlineEndColor: value => [['borderInlineEndColor', value], ['borderLeftColor', null], ['borderRightColor', null]],
|
101
|
+
borderInlineStartStyle: value => [['borderInlineStartStyle', value], ['borderLeftStyle', null], ['borderRightStyle', null]],
|
102
|
+
borderInlineEndStyle: value => [['borderInlineEndStyle', value], ['borderLeftStyle', null], ['borderRightStyle', null]],
|
103
|
+
borderInlineStartWidth: value => [['borderInlineStartWidth', value], ['borderLeftWidth', null], ['borderRightWidth', null]],
|
104
|
+
borderInlineEndWidth: value => [['borderInlineEndWidth', value], ['borderLeftWidth', null], ['borderRightWidth', null]],
|
105
|
+
borderLeftColor: value => [['borderLeftColor', value], ['borderInlineStartColor', null], ['borderInlineEndColor', null]],
|
106
|
+
borderRightColor: value => [['borderRightColor', value], ['borderInlineStartColor', null], ['borderInlineEndColor', null]],
|
107
|
+
borderLeftStyle: value => [['borderLeftStyle', value], ['borderInlineStartStyle', null], ['borderInlineEndStyle', null]],
|
108
|
+
borderRightStyle: value => [['borderRightStyle', value], ['borderInlineStartStyle', null], ['borderInlineEndStyle', null]],
|
109
|
+
borderLeftWidth: value => [['borderLeftWidth', value], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]],
|
110
|
+
borderRightWidth: value => [['borderRightWidth', value], ['borderInlineStartWidth', null], ['borderInlineEndWidth', null]],
|
111
|
+
borderRadius: value => {
|
112
|
+
const values = typeof value === 'number' ? [value] : (0, _splitCssValue.default)(value);
|
113
|
+
if (values.length === 1) {
|
114
|
+
return [['borderRadius', value],
|
115
|
+
// // logical constituents
|
116
|
+
['borderStartStartRadius', null], ['borderStartEndRadius', null], ['borderEndStartRadius', null], ['borderEndEndRadius', null],
|
117
|
+
// physical constituents
|
118
|
+
['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
|
119
|
+
}
|
120
|
+
|
121
|
+
// @Deprecated
|
122
|
+
const [startStart, startEnd = startStart, endEnd = startStart, endStart = startEnd] = values;
|
123
|
+
return [
|
124
|
+
// split into logical consituents
|
125
|
+
['borderStartStartRadius', startStart], ['borderStartEndRadius', startEnd], ['borderEndEndRadius', endEnd], ['borderEndStartRadius', endStart],
|
126
|
+
// unset physical consituents
|
127
|
+
['borderTopLeftRadius', null], ['borderTopRightRadius', null], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]];
|
128
|
+
},
|
129
|
+
borderStartStartRadius: value => [['borderStartStartRadius', value], ['borderTopLeftRadius', null], ['borderTopRightRadius', null]],
|
130
|
+
borderStartEndRadius: value => [['borderStartEndRadius', value], ['borderTopLeftRadius', null], ['borderTopRightRadius', null]],
|
131
|
+
borderEndStartRadius: value => [['borderEndStartRadius', value], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]],
|
132
|
+
borderEndEndRadius: value => [['borderEndEndRadius', value], ['borderBottomLeftRadius', null], ['borderBottomRightRadius', null]],
|
133
|
+
borderTopLeftRadius: value => [['borderTopLeftRadius', value], ['borderStartStartRadius', null], ['borderStartEndRadius', null]],
|
134
|
+
borderTopRightRadius: value => [['borderTopRightRadius', value], ['borderStartStartRadius', null], ['borderStartEndRadius', null]],
|
135
|
+
borderBottomLeftRadius: value => [['borderBottomLeftRadius', value], ['borderEndStartRadius', null], ['borderEndEndRadius', null]],
|
136
|
+
borderBottomRightRadius: value => [['borderBottomRightRadius', value], ['borderEndStartRadius', null], ['borderEndEndRadius', null]],
|
137
|
+
columnRule: value => [['columnRule', value], ['columnRuleWidth', null], ['columnRuleStyle', null], ['columnRuleColor', null]],
|
138
|
+
columns: value => [['columns', value], ['columnCount', null], ['columnWidth', null]],
|
139
|
+
container: value => [['container', value], ['containerName', null], ['containerType', null]],
|
140
|
+
flex: value => [['flex', value], ['flexGrow', null], ['flexShrink', null], ['flexBasis', null]],
|
141
|
+
flexFlow: value => [['flexFlow', value], ['flexDirection', null], ['flexWrap', null]],
|
142
|
+
// @Deprecated ?
|
143
|
+
font: value => [['font', value], ['fontFamily', null], ['fontSize', null], ['fontStretch', null], ['fontStyle', null], ['fontVariant', null], ['fontWeight', null], ['lineHeight', null]],
|
144
|
+
gap: value => [['gap', value], ['rowGap', null], ['columnGap', null]],
|
145
|
+
grid: value => [['grid', value], ['gridTemplate', null], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null], ['gridAutoRows', null], ['gridAutoColumns', null], ['gridAutoFlow', null]],
|
146
|
+
gridArea: value => [['gridArea', value], ['gridRow', null], ['gridRowStart', null], ['gridRowEnd', null], ['gridColumn', null], ['gridColumnStart', null], ['gridColumnEnd', null]],
|
147
|
+
gridRow: value => [['gridRow', value], ['gridRowStart', null], ['gridRowEnd', null]],
|
148
|
+
gridColumn: value => [['gridColumn', value], ['gridColumnStart', null], ['gridColumnEnd', null]],
|
149
|
+
gridTemplate: value => [['gridTemplate', value], ['gridTemplateAreas', null], ['gridTemplateColumns', null], ['gridTemplateRows', null]],
|
150
|
+
inset: value => [['inset', value], ['insetInline', null], ['insetBlock', null], ['insetInlineStart', null], ['insetInlineEnd', null], ['top', null], ['right', null], ['bottom', null], ['left', null]],
|
151
|
+
insetInline: value => [['insetInline', value], ['insetInlineStart', null], ['insetInlineEnd', null], ['left', null], ['right', null]],
|
152
|
+
insetBlock: value => [['insetBlock', value], ['top', null], ['bottom', null]],
|
153
|
+
insetInlineStart: value => [['insetInlineStart', value], ['left', null], ['right', null]],
|
154
|
+
insetInlineEnd: value => [['insetInlineEnd', value], ['left', null], ['right', null]],
|
155
|
+
left: value => [['left', value], ['insetInlineStart', null], ['insetInlineEnd', null]],
|
156
|
+
right: value => [['right', value], ['insetInlineStart', null], ['insetInlineEnd', null]],
|
157
|
+
listStyle: value => [['listStyle', value], ['listStyleImage', null], ['listStylePosition', null], ['listStyleType', null]],
|
158
|
+
margin: value => {
|
159
|
+
const values = typeof value === 'number' ? [value] : (0, _splitCssValue.default)(value);
|
160
|
+
if (values.length === 1) {
|
161
|
+
return [['margin', values[0]], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null], ['marginTop', null], ['marginBottom', null]];
|
162
|
+
}
|
163
|
+
// @Deprecated
|
164
|
+
const [top, right = top, bottom = top, left = right] = values;
|
165
|
+
return [['marginTop', top], ['marginInlineEnd', right], ['marginBottom', bottom], ['marginInlineStart', left], ['marginLeft', null], ['marginRight', null]];
|
166
|
+
},
|
167
|
+
marginInline: value => [['marginInline', value], ['marginInlineStart', null], ['marginLeft', null], ['marginInlineEnd', null], ['marginRight', null]],
|
168
|
+
marginBlock: value => [['marginBlock', value], ['marginTop', null], ['marginBottom', null]],
|
169
|
+
marginInlineStart: value => [['marginInlineStart', value], ['marginLeft', null], ['marginRight', null]],
|
170
|
+
marginInlineEnd: value => [['marginInlineEnd', value], ['marginLeft', null], ['marginRight', null]],
|
171
|
+
marginLeft: value => [['marginLeft', value], ['marginInlineStart', null], ['marginInlineEnd', null]],
|
172
|
+
marginRight: value => [['marginRight', value], ['marginInlineStart', null], ['marginInlineEnd', null]],
|
173
|
+
mask: value => [['mask', value], ['maskClip', null], ['maskComposite', null], ['maskImage', null], ['maskMode', null], ['maskOrigin', null], ['maskPosition', null], ['maskRepeat', null], ['maskSize', null]],
|
174
|
+
offset: value => [['offset', value], ['offsetAnchor', null], ['offsetDistance', null], ['offsetPath', null], ['offsetPosition', null], ['offsetRotate', null]],
|
175
|
+
outline: value => [['outline', value], ['outlineColor', null], ['outlineStyle', null], ['outlineWidth', null]],
|
176
|
+
overflow: value => [['overflow', value], ['overflowX', null], ['overflowY', null]],
|
177
|
+
padding: rawValue => {
|
178
|
+
const values = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
|
179
|
+
if (values.length === 1) {
|
180
|
+
return [['padding', values[0]], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null], ['paddingTop', null], ['paddingBottom', null]];
|
181
|
+
}
|
182
|
+
// @Deprecated
|
183
|
+
const [top, right = top, bottom = top, left = right] = values;
|
184
|
+
return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
|
185
|
+
},
|
186
|
+
paddingInline: rawValue => [['paddingInline', rawValue], ['paddingStart', null], ['paddingLeft', null], ['paddingEnd', null], ['paddingRight', null]],
|
187
|
+
paddingBlock: rawValue => [['paddingBlock', rawValue], ['paddingTop', null], ['paddingBottom', null]],
|
188
|
+
paddingInlineStart: value => [['paddingInlineStart', value], ['paddingLeft', null], ['paddingRight', null]],
|
189
|
+
paddingInlineEnd: value => [['paddingInlineEnd', value], ['paddingLeft', null], ['paddingRight', null]],
|
190
|
+
paddingLeft: value => [['paddingLeft', value], ['paddingInlineStart', null], ['paddingInlineEnd', null]],
|
191
|
+
paddingRight: value => [['paddingRight', value], ['paddingInlineStart', null], ['paddingInlineEnd', null]],
|
192
|
+
placeContent: value => [['placeContent', value], ['alignContent', null], ['justifyContent', null]],
|
193
|
+
placeItems: value => [['placeItems', value], ['alignItems', null], ['justifyItems', null]],
|
194
|
+
placeSelf: value => [['placeSelf', value], ['alignSelf', null], ['justifySelf', null]],
|
195
|
+
scrollMargin: value => [['scrollMargin', value], ['scrollMarginBottom', null], ['scrollMarginLeft', null], ['scrollMarginStart', null], ['scrollMarginRight', null], ['scrollMarginEnd', null], ['scrollMarginTop', null]],
|
196
|
+
scrollPadding: value => [['scrollPadding', value], ['scrollPaddingBottom', null], ['scrollPaddingLeft', null], ['scrollPaddingStart', null], ['scrollPaddingRight', null], ['scrollPaddingEnd', null], ['scrollPaddingTop', null]],
|
197
|
+
scrollTimeline: value => [['scrollTimeline', value], ['scrollTimelineName', null], ['scrollTimelineAxis', null]],
|
198
|
+
textDecoration: value => [['textDecoration', value], ['textDecorationColor', null], ['textDecorationLine', null], ['textDecorationStyle', null], ['textDecorationThickness', null]],
|
199
|
+
textEmphasis: value => [['textEmphasis', value], ['textEmphasisColor', null], ['textEmphasisStyle', null]],
|
200
|
+
transition: value => [['transition', value], ['transitionDelay', null], ['transitionDuration', null], ['transitionProperty', null], ['transitionTimingFunction', null]]
|
201
|
+
};
|
202
|
+
const aliases = {
|
203
|
+
// @Deprecated
|
204
|
+
borderHorizontal: shorthands.borderInline,
|
205
|
+
// @Deprecated
|
206
|
+
borderVertical: shorthands.borderBlock,
|
207
|
+
// @Deprecated
|
208
|
+
borderBlockStart: shorthands.borderTop,
|
209
|
+
// @Deprecated
|
210
|
+
borderEnd: shorthands.borderInlineEnd,
|
211
|
+
// @Deprecated
|
212
|
+
borderBlockEnd: shorthands.borderBottom,
|
213
|
+
// @Deprecated
|
214
|
+
borderStart: shorthands.borderInlineStart,
|
215
|
+
borderHorizontalWidth: shorthands.borderInlineWidth,
|
216
|
+
borderHorizontalStyle: shorthands.borderInlineStyle,
|
217
|
+
borderHorizontalColor: shorthands.borderInlineColor,
|
218
|
+
borderVerticalWidth: shorthands.borderBlockWidth,
|
219
|
+
borderVerticalStyle: shorthands.borderBlockStyle,
|
220
|
+
borderVerticalColor: shorthands.borderBlockColor,
|
221
|
+
borderBlockStartColor: value => [['borderTopColor', value]],
|
222
|
+
borderBlockEndColor: value => [['borderBottomColor', value]],
|
223
|
+
borderBlockStartStyle: value => [['borderTopStyle', value]],
|
224
|
+
borderBlockEndStyle: value => [['borderBottomStyle', value]],
|
225
|
+
borderBlockStartWidth: value => [['borderTopWidth', value]],
|
226
|
+
borderBlockEndWidth: value => [['borderBottomWidth', value]],
|
227
|
+
borderStartColor: shorthands.borderInlineStartColor,
|
228
|
+
borderEndColor: shorthands.borderInlineEndColor,
|
229
|
+
borderStartStyle: shorthands.borderInlineStartStyle,
|
230
|
+
borderEndStyle: shorthands.borderInlineEndStyle,
|
231
|
+
borderStartWidth: shorthands.borderInlineStartWidth,
|
232
|
+
borderEndWidth: shorthands.borderInlineEndWidth,
|
233
|
+
borderTopStartRadius: value => [['borderStartStartRadius', value]],
|
234
|
+
borderTopEndRadius: value => [['borderStartEndRadius', value]],
|
235
|
+
borderBottomStartRadius: value => [['borderEndStartRadius', value]],
|
236
|
+
borderBottomEndRadius: value => [['borderEndEndRadius', value]],
|
237
|
+
marginBlockStart: value => [['marginTop', value]],
|
238
|
+
marginBlockEnd: value => [['marginBottom', value]],
|
239
|
+
marginStart: shorthands.marginInlineStart,
|
240
|
+
marginEnd: shorthands.marginInlineEnd,
|
241
|
+
marginHorizontal: shorthands.marginInline,
|
242
|
+
marginVertical: shorthands.marginBlock,
|
243
|
+
paddingBlockStart: rawValue => [['paddingTop', rawValue]],
|
244
|
+
paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
|
245
|
+
paddingStart: shorthands.paddingInlineStart,
|
246
|
+
paddingEnd: shorthands.paddingInlineEnd,
|
247
|
+
paddingHorizontal: shorthands.paddingInline,
|
248
|
+
paddingVertical: shorthands.paddingBlock,
|
249
|
+
insetBlockStart: value => [['top', value]],
|
250
|
+
insetBlockEnd: value => [['bottom', value]],
|
251
|
+
start: shorthands.insetInlineStart,
|
252
|
+
end: shorthands.insetInlineEnd
|
253
|
+
};
|
254
|
+
const expansions = {
|
255
|
+
...shorthands,
|
256
|
+
...aliases
|
257
|
+
};
|
258
|
+
var _default = expansions;
|
259
|
+
exports.default = _default;
|
@@ -0,0 +1,156 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = void 0;
|
7
|
+
var _splitCssValue = _interopRequireDefault(require("../utils/split-css-value"));
|
8
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
9
|
+
/**
|
10
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
11
|
+
*
|
12
|
+
* This source code is licensed under the MIT license found in the
|
13
|
+
* LICENSE file in the root directory of this source tree.
|
14
|
+
*
|
15
|
+
*
|
16
|
+
*/
|
17
|
+
|
18
|
+
// TODO: to be added later.
|
19
|
+
// const aliases = {
|
20
|
+
// marginInlineStart: (rawValue) => [['marginStart', rawValue]],
|
21
|
+
// marginInlineEnd: (rawValue) => [['marginEnd', rawValue]],
|
22
|
+
// marginInline: (rawValue) => [
|
23
|
+
// ['marginStart', rawValue],
|
24
|
+
// ['marginEnd', rawValue],
|
25
|
+
// ],
|
26
|
+
// paddingInlineStart: (rawValue) => [['paddingStart', rawValue]],
|
27
|
+
// paddingInlineEnd: (rawValue) => [['paddingEnd', rawValue]],
|
28
|
+
// paddingInline: (rawValue) => [
|
29
|
+
// ['paddingStart', rawValue],
|
30
|
+
// ['paddingEnd', rawValue],
|
31
|
+
// ],
|
32
|
+
// // 'borderInlineStart': (rawValue) => [['borderStart', rawValue]],
|
33
|
+
// // 'borderInlineEnd': (rawValue) => [['borderEnd', rawValue]],
|
34
|
+
// // // This will need to change.
|
35
|
+
// // 'borderInline': (rawValue) => [
|
36
|
+
// // ['borderStart', rawValue],
|
37
|
+
// // ['borderEnd', rawValue],
|
38
|
+
// // ],
|
39
|
+
// };
|
40
|
+
|
41
|
+
/**
|
42
|
+
* Shorthand properties:
|
43
|
+
* - [x] all - Should be banned
|
44
|
+
* - [ ] animation
|
45
|
+
* - [ ] background
|
46
|
+
* - [-] border
|
47
|
+
* - [x] border-block-end
|
48
|
+
* - [x] border-block-start
|
49
|
+
* - [ ] border-bottom
|
50
|
+
* - [x] border-color
|
51
|
+
* - [x] border-image
|
52
|
+
* - [x] border-inline-end
|
53
|
+
* - [x] border-inline-start
|
54
|
+
* - [ ] border-left
|
55
|
+
* - [x] border-radius
|
56
|
+
* - [ ] border-right
|
57
|
+
* - [x] border-style
|
58
|
+
* - [ ] border-top
|
59
|
+
* - [x] border-width
|
60
|
+
* - [ ] column-rule
|
61
|
+
* - [ ] columns
|
62
|
+
* - [ ] flex
|
63
|
+
* - [ ] flex-flow
|
64
|
+
* - [ ] font
|
65
|
+
* - [ ] gap
|
66
|
+
* - [ ] grid
|
67
|
+
* - [ ] grid-area
|
68
|
+
* - [ ] grid-column
|
69
|
+
* - [ ] grid-row
|
70
|
+
* - [ ] grid-template
|
71
|
+
* - [ ] list-style
|
72
|
+
* - [x] margin
|
73
|
+
* - [ ] mask
|
74
|
+
* - [ ] offset
|
75
|
+
* - [ ] outline
|
76
|
+
* - [x] overflow
|
77
|
+
* - [x] padding
|
78
|
+
* - [ ] place-content
|
79
|
+
* - [ ] place-items
|
80
|
+
* - [ ] place-self
|
81
|
+
* - [ ] scroll-margin
|
82
|
+
* - [ ] scroll-padding
|
83
|
+
* - [ ] text-decoration
|
84
|
+
* - [ ] text-emphasis
|
85
|
+
* - [ ] transition
|
86
|
+
*/
|
87
|
+
|
88
|
+
const expansions = {
|
89
|
+
// ...aliases,
|
90
|
+
border: rawValue => {
|
91
|
+
return [['borderTop', rawValue], ['borderEnd', rawValue], ['borderBottom', rawValue], ['borderStart', rawValue]];
|
92
|
+
},
|
93
|
+
/*
|
94
|
+
// Add this later, as this will be a breaking change
|
95
|
+
border: (rawValue: string): Array<[string, string]> => {
|
96
|
+
if (typeof rawValue === 'number') {
|
97
|
+
return expansions.borderWidth(rawValue);
|
98
|
+
}
|
99
|
+
const [width, style, color] = splitValue(rawValue);
|
100
|
+
return [
|
101
|
+
...expansions.borderWidth(width),
|
102
|
+
...expansions.borderStyle(style),
|
103
|
+
...expansions.borderColor(color),
|
104
|
+
];
|
105
|
+
}
|
106
|
+
*/
|
107
|
+
borderColor: rawValue => {
|
108
|
+
const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
|
109
|
+
return [['borderTopColor', top], ['borderEndColor', right], ['borderBottomColor', bottom], ['borderStartColor', left]];
|
110
|
+
},
|
111
|
+
borderHorizontal: rawValue => {
|
112
|
+
return [['borderStart', rawValue], ['borderEnd', rawValue]];
|
113
|
+
},
|
114
|
+
borderStyle: rawValue => {
|
115
|
+
const [top, right = top, bottom = top, left = right] = (0, _splitCssValue.default)(rawValue);
|
116
|
+
return [['borderTopStyle', top], ['borderEndStyle', right], ['borderBottomStyle', bottom], ['borderStartStyle', left]];
|
117
|
+
},
|
118
|
+
borderVertical: rawValue => {
|
119
|
+
return [['borderTop', rawValue], ['borderBottom', rawValue]];
|
120
|
+
},
|
121
|
+
borderWidth: rawValue => {
|
122
|
+
const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
|
123
|
+
return [['borderTopWidth', top], ['borderEndWidth', right], ['borderBottomWidth', bottom], ['borderStartWidth', left]];
|
124
|
+
},
|
125
|
+
borderRadius: rawValue => {
|
126
|
+
const [top, right = top, bottom = top, left = right] = typeof rawValue === 'string' ? (0, _splitCssValue.default)(rawValue) : typeof rawValue === 'number' ? [rawValue] : rawValue; // remove
|
127
|
+
|
128
|
+
return [['borderTopStartRadius', top], ['borderTopEndRadius', right], ['borderBottomEndRadius', bottom], ['borderBottomStartRadius', left]];
|
129
|
+
},
|
130
|
+
margin: rawValue => {
|
131
|
+
const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
|
132
|
+
return [['marginTop', top], ['marginEnd', right], ['marginBottom', bottom], ['marginStart', left]];
|
133
|
+
},
|
134
|
+
marginHorizontal: rawValue => {
|
135
|
+
return [['marginStart', rawValue], ['marginEnd', rawValue]];
|
136
|
+
},
|
137
|
+
marginVertical: rawValue => {
|
138
|
+
return [['marginTop', rawValue], ['marginBottom', rawValue]];
|
139
|
+
},
|
140
|
+
overflow: rawValue => {
|
141
|
+
const [x, y = x] = (0, _splitCssValue.default)(rawValue);
|
142
|
+
return [['overflowX', x], ['overflowY', y]];
|
143
|
+
},
|
144
|
+
padding: rawValue => {
|
145
|
+
const [top, right = top, bottom = top, left = right] = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
|
146
|
+
return [['paddingTop', top], ['paddingEnd', right], ['paddingBottom', bottom], ['paddingStart', left]];
|
147
|
+
},
|
148
|
+
paddingHorizontal: rawValue => {
|
149
|
+
return [['paddingStart', rawValue], ['paddingEnd', rawValue]];
|
150
|
+
},
|
151
|
+
paddingVertical: rawValue => {
|
152
|
+
return [['paddingTop', rawValue], ['paddingBottom', rawValue]];
|
153
|
+
}
|
154
|
+
};
|
155
|
+
var _default = expansions;
|
156
|
+
exports.default = _default;
|