@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,142 @@
|
|
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
|
+
/// # Handle CSS shorthands in a React Native compatible way.
|
19
|
+
///
|
20
|
+
/// This means:
|
21
|
+
/// - disallowing certain properties altogether by throwing errors
|
22
|
+
/// - disallowing multiple values within many shorthands
|
23
|
+
/// - Treating certain non-standard properties as aliases for real CSS properties
|
24
|
+
|
25
|
+
const shorthands = {
|
26
|
+
all: _ => {
|
27
|
+
throw new Error('all is not supported');
|
28
|
+
},
|
29
|
+
animation: value => {
|
30
|
+
throw new Error('animation is not supported');
|
31
|
+
},
|
32
|
+
background: value => {
|
33
|
+
throw new Error('background is not supported. Use background-color, border-image etc. instead.');
|
34
|
+
},
|
35
|
+
border: rawValue => {
|
36
|
+
throw new Error('border is not supported. Use border-width, border-style and border-color instead.');
|
37
|
+
},
|
38
|
+
borderInline: rawValue => {
|
39
|
+
throw new Error('borderInline is not supported. Use borderInlineWidth, borderInlineStyle and borderInlineColor instead.');
|
40
|
+
},
|
41
|
+
// @Deprecated
|
42
|
+
borderBlock: rawValue => {
|
43
|
+
throw new Error('borderBlock is not supported. Use borderBlockWidth, borderBlockStyle and borderBlockColor instead.');
|
44
|
+
},
|
45
|
+
// @Deprecated
|
46
|
+
borderTop: rawValue => {
|
47
|
+
throw new Error('borderTop is not supported. Use borderTopWidth, borderTopStyle and borderTopColor instead.');
|
48
|
+
},
|
49
|
+
// @Deprecated
|
50
|
+
borderInlineEnd: rawValue => {
|
51
|
+
throw new Error('borderInlineEnd is not supported. Use borderInlineEndWidth, borderInlineEndStyle and borderInlineEndColor instead.');
|
52
|
+
},
|
53
|
+
// @Deprecated
|
54
|
+
borderRight: rawValue => {
|
55
|
+
throw new Error('borderRight is not supported. Use borderRightWidth, borderRightStyle and borderRightColor instead.');
|
56
|
+
},
|
57
|
+
// @Deprecated
|
58
|
+
borderBottom: rawValue => {
|
59
|
+
throw new Error('borderBottom is not supported. Use borderBottomWidth, borderBottomStyle and borderBottomColor instead.');
|
60
|
+
},
|
61
|
+
// @Deprecated
|
62
|
+
borderInlineStart: rawValue => {
|
63
|
+
throw new Error('borderInlineStart is not supported. Use borderInlineStartWidth, borderInlineStartStyle and borderInlineStartColor instead.');
|
64
|
+
},
|
65
|
+
// @Deprecated
|
66
|
+
borderLeft: rawValue => {
|
67
|
+
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(' '));
|
68
|
+
},
|
69
|
+
margin: value => {
|
70
|
+
const values = typeof value === 'number' ? [value] : (0, _splitCssValue.default)(value);
|
71
|
+
if (values.length === 1) {
|
72
|
+
return [['margin', values[0]]];
|
73
|
+
} else {
|
74
|
+
throw new Error('margin shorthand with multiple values is not supported. Use marginTop, marginInlineEnd, marginBottom and marginInlineStart instead.');
|
75
|
+
}
|
76
|
+
},
|
77
|
+
padding: rawValue => {
|
78
|
+
const values = typeof rawValue === 'number' ? [rawValue] : (0, _splitCssValue.default)(rawValue);
|
79
|
+
if (values.length === 1) {
|
80
|
+
return [['padding', values[0]]];
|
81
|
+
}
|
82
|
+
throw new Error('padding shorthand with multiple values is not supported. Use paddingTop, paddingInlineEnd, paddingBottom and paddingInlineStart instead.');
|
83
|
+
}
|
84
|
+
};
|
85
|
+
const aliases = {
|
86
|
+
// @UNSUPPORTED
|
87
|
+
borderHorizontal: shorthands.borderInline,
|
88
|
+
// @UNSUPPORTED
|
89
|
+
borderVertical: shorthands.borderBlock,
|
90
|
+
// @UNSUPPORTED
|
91
|
+
borderBlockStart: shorthands.borderTop,
|
92
|
+
// @UNSUPPORTED
|
93
|
+
borderEnd: shorthands.borderInlineEnd,
|
94
|
+
// @UNSUPPORTED
|
95
|
+
borderBlockEnd: shorthands.borderBottom,
|
96
|
+
// @UNSUPPORTED
|
97
|
+
borderStart: shorthands.borderInlineStart,
|
98
|
+
borderHorizontalWidth: value => [['borderInlineWidth', value]],
|
99
|
+
borderHorizontalStyle: value => [['borderInlineStyle', value]],
|
100
|
+
borderHorizontalColor: value => [['borderInlineColor', value]],
|
101
|
+
borderVerticalWidth: value => [['borderBlockWidth', value]],
|
102
|
+
borderVerticalStyle: value => [['borderBlockStyle', value]],
|
103
|
+
borderVerticalColor: value => [['borderBlockColor', value]],
|
104
|
+
borderBlockStartColor: value => [['borderTopColor', value]],
|
105
|
+
borderBlockEndColor: value => [['borderBottomColor', value]],
|
106
|
+
borderBlockStartStyle: value => [['borderTopStyle', value]],
|
107
|
+
borderBlockEndStyle: value => [['borderBottomStyle', value]],
|
108
|
+
borderBlockStartWidth: value => [['borderTopWidth', value]],
|
109
|
+
borderBlockEndWidth: value => [['borderBottomWidth', value]],
|
110
|
+
borderStartColor: value => [['borderInlineStartColor', value]],
|
111
|
+
borderEndColor: value => [['borderInlineEndColor', value]],
|
112
|
+
borderStartStyle: value => [['borderInlineStartStyle', value]],
|
113
|
+
borderEndStyle: value => [['borderInlineEndStyle', value]],
|
114
|
+
borderStartWidth: value => [['borderInlineStartWidth', value]],
|
115
|
+
borderEndWidth: value => [['borderInlineEndWidth', value]],
|
116
|
+
borderTopStartRadius: value => [['borderStartStartRadius', value]],
|
117
|
+
borderTopEndRadius: value => [['borderStartEndRadius', value]],
|
118
|
+
borderBottomStartRadius: value => [['borderEndStartRadius', value]],
|
119
|
+
borderBottomEndRadius: value => [['borderEndEndRadius', value]],
|
120
|
+
marginBlockStart: value => [['marginTop', value]],
|
121
|
+
marginBlockEnd: value => [['marginBottom', value]],
|
122
|
+
marginStart: value => [['marginInlineStart', value]],
|
123
|
+
marginEnd: value => [['marginInlineEnd', value]],
|
124
|
+
marginHorizontal: value => [['marginInline', value]],
|
125
|
+
marginVertical: value => [['marginBlock', value]],
|
126
|
+
paddingBlockStart: rawValue => [['paddingTop', rawValue]],
|
127
|
+
paddingBlockEnd: rawValue => [['paddingBottom', rawValue]],
|
128
|
+
paddingStart: value => [['paddingInlineStart', value]],
|
129
|
+
paddingEnd: value => [['paddingInlineEnd', value]],
|
130
|
+
paddingHorizontal: value => [['paddingInline', value]],
|
131
|
+
paddingVertical: value => [['paddingBlock', value]],
|
132
|
+
insetBlockStart: value => [['top', value]],
|
133
|
+
insetBlockEnd: value => [['bottom', value]],
|
134
|
+
start: value => [['insetInlineStart', value]],
|
135
|
+
end: value => [['insetInlineEnd', value]]
|
136
|
+
};
|
137
|
+
const expansions = {
|
138
|
+
...shorthands,
|
139
|
+
...aliases
|
140
|
+
};
|
141
|
+
var _default = expansions;
|
142
|
+
exports.default = _default;
|
package/lib/stylex-create.js
CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.default = styleXCreateSet;
|
7
7
|
var _convertToClassName = _interopRequireDefault(require("./convert-to-className"));
|
8
|
-
var
|
8
|
+
var _index = _interopRequireWildcard(require("./preprocess-rules/index"));
|
9
9
|
var _objectUtils = require("./utils/object-utils");
|
10
10
|
var messages = _interopRequireWildcard(require("./messages"));
|
11
11
|
var _stylexInclude = require("./stylex-include");
|
@@ -40,6 +40,9 @@ function styleXCreateSet(namespaces) {
|
|
40
40
|
if (typeof namespace !== 'object' || Array.isArray(namespace)) {
|
41
41
|
throw new Error(messages.ILLEGAL_NAMESPACE_VALUE);
|
42
42
|
}
|
43
|
+
|
44
|
+
// namespace = preflatten(namespace);
|
45
|
+
|
43
46
|
const [resolvedNamespace, injected] = styleXCreateNamespace(namespace, options);
|
44
47
|
const compiledNamespace = (0, _objectUtils.flattenObject)(resolvedNamespace);
|
45
48
|
resolvedNamespaces[namespaceName] = {
|
@@ -72,16 +75,18 @@ function styleXCreateSet(namespaces) {
|
|
72
75
|
function styleXCreateNamespace(style, options) {
|
73
76
|
const namespaceEntries = (0, _objectUtils.objEntries)(style);
|
74
77
|
|
75
|
-
// First
|
76
|
-
// e.g. `margin` gets expanded to `marginTop`, `marginBottom`, `marginStart`, `marginEnd`.
|
77
|
-
// `entries` is an array of [key, value] pairs.
|
78
|
+
// First handle shorthands. The strategy for this is based on the `styleResolution` option.
|
78
79
|
const entries = namespaceEntries.flatMap(_ref => {
|
79
80
|
let [key, value] = _ref;
|
81
|
+
// Detect style ...spreads and leave them unmodified
|
80
82
|
if (value instanceof _stylexInclude.IncludedStyles) {
|
81
83
|
return [[key, value]];
|
82
84
|
}
|
85
|
+
// Detect nested style objects.
|
83
86
|
if (value != null && typeof value === 'object' && !Array.isArray(value)) {
|
84
|
-
|
87
|
+
// Nested Objects are only allowed for legacy :pseudo, @media or long-hand properties for now.
|
88
|
+
// In the future, we will try to support shorthands as well.
|
89
|
+
if (!key.startsWith(':') && !key.startsWith('@') && (0, _index.getExpandedKeys)(options).includes(key)) {
|
85
90
|
throw new Error(messages.INVALID_PSEUDO);
|
86
91
|
}
|
87
92
|
return [[key, (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(value).flatMap(_ref2 => {
|
@@ -89,7 +94,7 @@ function styleXCreateNamespace(style, options) {
|
|
89
94
|
if (innerValue != null && typeof innerValue === 'object' && !Array.isArray(innerValue)) {
|
90
95
|
throw new Error(messages.ILLEGAL_NESTED_PSEUDO);
|
91
96
|
}
|
92
|
-
return (0,
|
97
|
+
return (0, _index.default)([innerKey, innerValue], options);
|
93
98
|
}))]];
|
94
99
|
} else {
|
95
100
|
if (value !== null && typeof value !== 'string' && typeof value !== 'number' && !Array.isArray(value)) {
|
@@ -98,7 +103,7 @@ function styleXCreateNamespace(style, options) {
|
|
98
103
|
if (Array.isArray(value) && value.some(val => typeof val === 'object')) {
|
99
104
|
throw new Error(messages.ILLEGAL_PROP_ARRAY_VALUE);
|
100
105
|
}
|
101
|
-
return (0,
|
106
|
+
return (0, _index.default)([key, value], options);
|
102
107
|
}
|
103
108
|
});
|
104
109
|
|
@@ -113,18 +118,39 @@ function styleXCreateNamespace(style, options) {
|
|
113
118
|
if (val instanceof _stylexInclude.IncludedStyles) {
|
114
119
|
resolvedNamespace[key] = val;
|
115
120
|
} else if (val != null && typeof val === 'object' && !Array.isArray(val)) {
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
121
|
+
if (key.startsWith(':') || key.startsWith('@')) {
|
122
|
+
const pseudo = key;
|
123
|
+
const innerObj = {};
|
124
|
+
for (const [innerKey, innerVal] of (0, _objectUtils.objEntries)(val)) {
|
125
|
+
if (innerVal === null) {
|
126
|
+
innerObj[innerKey] = null;
|
127
|
+
} else if (typeof innerVal === 'object' && !Array.isArray(innerVal)) {
|
128
|
+
throw new Error(messages.ILLEGAL_NESTED_PSEUDO);
|
129
|
+
} else {
|
130
|
+
const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([innerKey, innerVal], pseudo, options);
|
131
|
+
innerObj[updatedKey] = className;
|
132
|
+
injectedStyles[updatedKey + pseudo] = [className, cssRule];
|
133
|
+
}
|
134
|
+
}
|
135
|
+
resolvedNamespace[key] = innerObj;
|
136
|
+
} else {
|
137
|
+
const propKey = key;
|
138
|
+
const classNames = [];
|
139
|
+
for (const [pseudo, innerVal] of (0, _objectUtils.objEntries)(val)) {
|
140
|
+
if (pseudo !== 'default' && !pseudo.startsWith(':') && !pseudo.startsWith('@')) {
|
141
|
+
throw new Error(messages.INVALID_PSEUDO);
|
142
|
+
}
|
143
|
+
if (typeof innerVal === 'object' && !Array.isArray(innerVal)) {
|
144
|
+
throw new Error(messages.ILLEGAL_NESTED_PSEUDO);
|
145
|
+
}
|
146
|
+
if (innerVal !== null) {
|
147
|
+
const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([propKey, innerVal], pseudo === 'default' ? undefined : pseudo, options);
|
148
|
+
injectedStyles[updatedKey + pseudo] = [className, cssRule];
|
149
|
+
classNames.push(className);
|
150
|
+
}
|
125
151
|
}
|
152
|
+
resolvedNamespace[key] = classNames.join(' ');
|
126
153
|
}
|
127
|
-
resolvedNamespace[key] = innerObj;
|
128
154
|
} else {
|
129
155
|
if (val === null) {
|
130
156
|
resolvedNamespace[key] = null;
|
@@ -10,22 +10,38 @@ var _dashify = _interopRequireDefault(require("./utils/dashify"));
|
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
11
11
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
12
12
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
13
|
+
function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
|
13
14
|
function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
|
14
15
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
15
16
|
function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
|
17
|
+
function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
|
18
|
+
function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
|
19
|
+
function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) { return descriptor.get.call(receiver); } return descriptor.value; }
|
16
20
|
var _set = /*#__PURE__*/new WeakSet();
|
21
|
+
var _mediaWidths = /*#__PURE__*/new WeakMap();
|
22
|
+
var _mediaHeights = /*#__PURE__*/new WeakMap();
|
17
23
|
class StylexValueBuilder {
|
18
24
|
constructor(defaultValue) {
|
19
25
|
_classPrivateMethodInitSpec(this, _set);
|
26
|
+
_classPrivateFieldInitSpec(this, _mediaWidths, {
|
27
|
+
writable: true,
|
28
|
+
value: []
|
29
|
+
});
|
30
|
+
_classPrivateFieldInitSpec(this, _mediaHeights, {
|
31
|
+
writable: true,
|
32
|
+
value: []
|
33
|
+
});
|
20
34
|
this.default = defaultValue;
|
21
35
|
}
|
22
|
-
// @media Queries
|
23
|
-
|
24
|
-
mediaPrint(value) {
|
25
|
-
return _classPrivateMethodGet(this, _set, _set2).call(this, '@media print', value);
|
26
|
-
}
|
27
36
|
mediaWidth(_ref, value) {
|
28
37
|
let [min, max] = _ref;
|
38
|
+
if (_classPrivateFieldGet(this, _mediaWidths).some(_ref2 => {
|
39
|
+
let [m, M] = _ref2;
|
40
|
+
return m <= min && min < M || m < max && max <= M || min <= m && max >= M;
|
41
|
+
})) {
|
42
|
+
throw new Error(messages.OVERLAPPING_MEDIA_WIDTHS);
|
43
|
+
}
|
44
|
+
_classPrivateFieldGet(this, _mediaWidths).push([min, max]);
|
29
45
|
if (min > 0 && max < Infinity) {
|
30
46
|
return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-width: ${min}px and max-width: ${max}px)`, value);
|
31
47
|
} else if (min === 0) {
|
@@ -35,8 +51,15 @@ class StylexValueBuilder {
|
|
35
51
|
}
|
36
52
|
throw new Error(messages.INVALID_MEDIA_QUERY);
|
37
53
|
}
|
38
|
-
mediaHeight(
|
39
|
-
let [min, max] =
|
54
|
+
mediaHeight(_ref3, value) {
|
55
|
+
let [min, max] = _ref3;
|
56
|
+
if (_classPrivateFieldGet(this, _mediaHeights).some(_ref4 => {
|
57
|
+
let [m, M] = _ref4;
|
58
|
+
return m <= min && min < M || m < max && max <= M || min <= m && max >= M;
|
59
|
+
})) {
|
60
|
+
throw new Error(messages.OVERLAPPING_MEDIA_HEIGHTS);
|
61
|
+
}
|
62
|
+
_classPrivateFieldGet(this, _mediaHeights).push([min, max]);
|
40
63
|
if (min > 0 && max < Infinity) {
|
41
64
|
return _classPrivateMethodGet(this, _set, _set2).call(this, `@media (min-height: ${min}px and max-height: ${max}px)`, value);
|
42
65
|
} else if (min === 0) {
|
@@ -46,110 +69,184 @@ class StylexValueBuilder {
|
|
46
69
|
}
|
47
70
|
throw new Error(messages.INVALID_MEDIA_QUERY);
|
48
71
|
}
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
}
|
60
|
-
|
61
|
-
|
62
|
-
}
|
63
|
-
|
64
|
-
|
65
|
-
}
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
}
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
}
|
72
|
+
|
73
|
+
// mediaAspectRatio<TAddedValue>(
|
74
|
+
// [min, max]: [number, number],
|
75
|
+
// value: TAddedValue
|
76
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
77
|
+
// if (min > 0 && max < Infinity) {
|
78
|
+
// return this.#set(
|
79
|
+
// `@media (min-aspect-ratio: ${min} and max-aspect-ratio: $, })`,
|
80
|
+
// value
|
81
|
+
// );
|
82
|
+
// } else if (min === 0) {
|
83
|
+
// return this.#set(`@media (max-aspect-ratio: ${max})`, value);
|
84
|
+
// } else if (max === Infinity) {
|
85
|
+
// return this.#set(`@media (min-aspect-ratio: ${min})`, value);
|
86
|
+
// }
|
87
|
+
// throw new Error(messages.INVALID_MEDIA_QUERY);
|
88
|
+
// }
|
89
|
+
|
90
|
+
// mediaPortrait<TAddedValue>(
|
91
|
+
// value: TAddedValue
|
92
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
93
|
+
// return this.#set('@media (orientation: portrait)', value);
|
94
|
+
// }
|
95
|
+
|
96
|
+
// mediaLandscape<TAddedValue>(
|
97
|
+
// value: TAddedValue
|
98
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
99
|
+
// return this.#set('@media (orientation: landscape)', value);
|
100
|
+
// }
|
101
|
+
|
102
|
+
// mediaSRGBDisplay<TAddedValue>(
|
103
|
+
// value: TAddedValue
|
104
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
105
|
+
// return this.#set('@media (color-gamut: srgb)', value);
|
106
|
+
// }
|
107
|
+
|
108
|
+
// mediaP3Display<TAddedValue>(
|
109
|
+
// value: TAddedValue
|
110
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
111
|
+
// return this.#set('@media (color-gamut: p3)', value);
|
112
|
+
// }
|
113
|
+
|
114
|
+
// mediaRec2020Display<TAddedValue>(
|
115
|
+
// value: TAddedValue
|
116
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
117
|
+
// return this.#set('@media (color-gamut: rec2020)', value);
|
118
|
+
// }
|
119
|
+
|
120
|
+
// mediaIsFullscreen<TAddedValue>(
|
121
|
+
// value: TAddedValue
|
122
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
123
|
+
// return this.#set('@media (display-mode: fullscreen)', value);
|
124
|
+
// }
|
78
125
|
|
79
126
|
// These are confusing, so skipping them for now
|
80
127
|
// mediaIsStandalone
|
81
128
|
// mediaIsMinimalUI
|
82
129
|
|
83
|
-
mediaSDRDisplay(
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
130
|
+
// mediaSDRDisplay<TAddedValue>(
|
131
|
+
// value: TAddedValue
|
132
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
133
|
+
// return this.#set('@media (dynamic-range: standard)', value);
|
134
|
+
// }
|
135
|
+
|
136
|
+
// mediaHDRDisplay<TAddedValue>(
|
137
|
+
// value: TAddedValue
|
138
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
139
|
+
// return this.#set('@media (dynamic-range: high)', value);
|
140
|
+
// }
|
141
|
+
|
142
|
+
// mediaSupportsHDRVideo<TAddedValue>(
|
143
|
+
// value: TAddedValue
|
144
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
145
|
+
// return this.#set('@media (video-dynamic-range: high)', value);
|
146
|
+
// }
|
92
147
|
|
93
148
|
//<TAddedValue> mediaHasColor(value: TAddedValue): StylexValueBuilder<TValue | TAddedValue> {
|
94
149
|
// return this.#set('@media (color)', value);
|
95
150
|
// }
|
96
151
|
|
97
|
-
primaryInputCanHover(
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
152
|
+
// primaryInputCanHover<TAddedValue>(
|
153
|
+
// value: TAddedValue
|
154
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
155
|
+
// return this.#set('@media (hover: hover)', value);
|
156
|
+
// }
|
157
|
+
// primaryInputCanNotHover<TAddedValue>(
|
158
|
+
// value: TAddedValue
|
159
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
160
|
+
// return this.#set('@media (hover: none)', value);
|
161
|
+
// }
|
162
|
+
|
163
|
+
// someInputCanHover<TAddedValue>(
|
164
|
+
// value: TAddedValue
|
165
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
166
|
+
// return this.#set('@media (any-hover: hover)', value);
|
167
|
+
// }
|
168
|
+
|
169
|
+
// noInputCanHover<TAddedValue>(
|
170
|
+
// value: TAddedValue
|
171
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
172
|
+
// return this.#set('@media (any-hover: none)', value);
|
173
|
+
// }
|
174
|
+
|
175
|
+
// somePointerIsFine<TAddedValue>(
|
176
|
+
// value: TAddedValue
|
177
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
178
|
+
// return this.#set('@media (any-pointer: fine)', value);
|
179
|
+
// }
|
180
|
+
|
181
|
+
// somePointerIsCoarse<TAddedValue>(
|
182
|
+
// value: TAddedValue
|
183
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
184
|
+
// return this.#set('@media (any-pointer: coarse)', value);
|
185
|
+
// }
|
186
|
+
|
187
|
+
// primaryPointerIsFine<TAddedValue>(
|
188
|
+
// value: TAddedValue
|
189
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
190
|
+
// return this.#set('@media (pointer: fine)', value);
|
191
|
+
// }
|
192
|
+
|
193
|
+
// primaryPointerIsCoarse<TAddedValue>(
|
194
|
+
// value: TAddedValue
|
195
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
196
|
+
// return this.#set('@media (pointer: coarse)', value);
|
197
|
+
// }
|
198
|
+
|
199
|
+
// lightMode<TAddedValue>(
|
200
|
+
// value: TAddedValue
|
201
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
202
|
+
// return this.#set('@media (prefers-color-scheme: light)', value);
|
203
|
+
// }
|
204
|
+
|
205
|
+
// darkMode<TAddedValue>(
|
206
|
+
// value: TAddedValue
|
207
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
208
|
+
// return this.#set('@media (prefers-color-scheme: dark)', value);
|
209
|
+
// }
|
210
|
+
|
211
|
+
// userPrefersMoreContrast<TAddedValue>(
|
212
|
+
// value: TAddedValue
|
213
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
214
|
+
// return this.#set('@media (prefers-contrast: more)', value);
|
215
|
+
// }
|
216
|
+
|
217
|
+
// userPrefersLessContrast<TAddedValue>(
|
218
|
+
// value: TAddedValue
|
219
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
220
|
+
// return this.#set('@media (prefers-contrast: less)', value);
|
221
|
+
// }
|
222
|
+
|
223
|
+
// userPrefersReducedMotion<TAddedValue>(
|
224
|
+
// value: TAddedValue
|
225
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
226
|
+
// return this.#set('@media (prefers-reduced-motion)', value);
|
227
|
+
// }
|
228
|
+
|
229
|
+
// noScript<TAddedValue>(
|
230
|
+
// value: TAddedValue
|
231
|
+
// ): StylexValueBuilder<TValue | TAddedValue> {
|
232
|
+
// return this.#set('@media (scripting: none)', value);
|
233
|
+
// }
|
234
|
+
|
235
|
+
// Choosing a catch-all for now for familiarity
|
236
|
+
matchMedia(query, value) {
|
140
237
|
return _classPrivateMethodGet(this, _set, _set2).call(this, `@media ${query}`, value);
|
141
238
|
}
|
142
239
|
supports(selector, value) {
|
143
|
-
const toSelector =
|
144
|
-
let [k, v] =
|
240
|
+
const toSelector = _ref5 => {
|
241
|
+
let [k, v] = _ref5;
|
145
242
|
return `(${(0, _dashify.default)(k)}: ${String(v)})`;
|
146
243
|
};
|
147
244
|
const query = Object.entries(selector).map(toSelector).join(' and ');
|
148
245
|
return _classPrivateMethodGet(this, _set, _set2).call(this, `@supports ${query}`, value);
|
149
246
|
}
|
150
247
|
supportsNot(selector, value) {
|
151
|
-
const toSelector =
|
152
|
-
let [k, v] =
|
248
|
+
const toSelector = _ref6 => {
|
249
|
+
let [k, v] = _ref6;
|
153
250
|
return `(not (${(0, _dashify.default)(k)}: ${String(v)}))`;
|
154
251
|
};
|
155
252
|
const query = Object.entries(selector).map(toSelector).join(' and ');
|
@@ -203,12 +300,6 @@ class StylexValueBuilder {
|
|
203
300
|
invalid(value) {
|
204
301
|
return _classPrivateMethodGet(this, _set, _set2).call(this, ':invalid', value);
|
205
302
|
}
|
206
|
-
isUNSAFE(selector, value) {
|
207
|
-
return _classPrivateMethodGet(this, _set, _set2).call(this, `:is(${selector})`, value);
|
208
|
-
}
|
209
|
-
notUNSAFE(selector, value) {
|
210
|
-
return _classPrivateMethodGet(this, _set, _set2).call(this, `:not(${selector})`, value);
|
211
|
-
}
|
212
303
|
lang(value) {
|
213
304
|
return _classPrivateMethodGet(this, _set, _set2).call(this, ':lang', value);
|
214
305
|
}
|
@@ -251,9 +342,50 @@ class StylexValueBuilder {
|
|
251
342
|
visited(value) {
|
252
343
|
return _classPrivateMethodGet(this, _set, _set2).call(this, ':visited', value);
|
253
344
|
}
|
345
|
+
get not() {
|
346
|
+
return {
|
347
|
+
hover: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:hover)', value),
|
348
|
+
focus: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:focus)', value),
|
349
|
+
focusVisible: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:focus-visible)', value),
|
350
|
+
focusWithin: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:focus-within)', value),
|
351
|
+
active: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:active)', value),
|
352
|
+
anyLink: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:any-link)', value),
|
353
|
+
autofill: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:autofill)', value),
|
354
|
+
checked: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:checked)', value),
|
355
|
+
defaultSelection: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:default)', value),
|
356
|
+
disabled: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:disabled)', value),
|
357
|
+
empty: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:empty)', value),
|
358
|
+
enabled: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:enabled)', value),
|
359
|
+
fullscreen: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:fullscreen)', value),
|
360
|
+
indeterminate: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:indeterminate)', value),
|
361
|
+
invalid: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:invalid)', value),
|
362
|
+
lang: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:lang)', value),
|
363
|
+
dirRTLUNSFAE: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:dir-rtlunsfae)', value),
|
364
|
+
link: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:link)', value),
|
365
|
+
optional: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:optional)', value),
|
366
|
+
pictureInPicture: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:picture-in-picture)', value),
|
367
|
+
placeholderShown: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:placeholder-shown)', value),
|
368
|
+
paused: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:paused)', value),
|
369
|
+
playing: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:playing)', value),
|
370
|
+
readOnly: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:read-only)', value),
|
371
|
+
readWrite: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:read-write)', value),
|
372
|
+
required: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:required)', value),
|
373
|
+
target: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:target)', value),
|
374
|
+
valid: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:valid)', value),
|
375
|
+
visited: value => _classPrivateMethodGet(this, _set, _set2).call(this, ':not(:visited)', value)
|
376
|
+
};
|
377
|
+
}
|
254
378
|
pseudoUNSAFE(selector, value) {
|
255
379
|
return _classPrivateMethodGet(this, _set, _set2).call(this, `:${selector}`, value);
|
256
380
|
}
|
381
|
+
// These can be used to write arbitrary CSS selectors
|
382
|
+
// Which is UNSAFE!
|
383
|
+
_isUNSAFE(selector, value) {
|
384
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `:is(${selector})`, value);
|
385
|
+
}
|
386
|
+
_notUNSAFE(selector, value) {
|
387
|
+
return _classPrivateMethodGet(this, _set, _set2).call(this, `:not(${selector})`, value);
|
388
|
+
}
|
257
389
|
}
|
258
390
|
exports.StylexValueBuilder = StylexValueBuilder;
|
259
391
|
function _set2(key, value) {
|