@stylexjs/shared 0.2.0-beta.16 → 0.2.0-beta.18
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/convert-to-className.d.ts +1 -1
- package/lib/convert-to-className.js +6 -22
- package/lib/convert-to-className.js.flow +1 -1
- package/lib/generate-css-rule.d.ts +1 -1
- package/lib/generate-css-rule.js +3 -14
- package/lib/generate-css-rule.js.flow +1 -1
- package/lib/hash.d.ts +2 -2
- package/lib/hash.js +9 -33
- package/lib/hash.js.flow +1 -3
- package/lib/index.d.ts +9 -9
- package/lib/index.js +0 -14
- package/lib/index.js.flow +9 -9
- package/lib/messages.d.ts +26 -26
- package/lib/messages.js +26 -36
- package/lib/messages.js.flow +26 -26
- package/lib/physical-rtl/generate-ltr.js +39 -67
- package/lib/physical-rtl/generate-ltr.js.flow +1 -1
- package/lib/physical-rtl/generate-rtl.d.ts +1 -2
- package/lib/physical-rtl/generate-rtl.js +57 -89
- package/lib/physical-rtl/generate-rtl.js.flow +1 -2
- package/lib/preprocess-rules/PreRule.d.ts +3 -3
- package/lib/preprocess-rules/PreRule.js +3 -17
- package/lib/preprocess-rules/PreRule.js.flow +3 -3
- package/lib/preprocess-rules/application-order.d.ts +8 -5
- package/lib/preprocess-rules/application-order.js +121 -160
- package/lib/preprocess-rules/application-order.js.flow +6 -5
- package/lib/preprocess-rules/basic-validation.d.ts +1 -1
- package/lib/preprocess-rules/basic-validation.js +6 -15
- package/lib/preprocess-rules/basic-validation.js.flow +1 -1
- package/lib/preprocess-rules/flatten-raw-style-obj.d.ts +2 -2
- package/lib/preprocess-rules/flatten-raw-style-obj.js +14 -43
- package/lib/preprocess-rules/flatten-raw-style-obj.js.flow +2 -2
- package/lib/preprocess-rules/index.d.ts +2 -2
- package/lib/preprocess-rules/index.js +6 -15
- package/lib/preprocess-rules/index.js.flow +2 -2
- package/lib/preprocess-rules/legacy-expand-shorthands.d.ts +3 -2
- package/lib/preprocess-rules/legacy-expand-shorthands.js +14 -33
- package/lib/preprocess-rules/legacy-expand-shorthands.js.flow +2 -2
- package/lib/preprocess-rules/property-specificity.d.ts +8 -5
- package/lib/preprocess-rules/property-specificity.js +54 -76
- package/lib/preprocess-rules/property-specificity.js.flow +6 -5
- package/lib/stylex-create-vars.d.ts +17 -8
- package/lib/stylex-create-vars.js +30 -17
- package/lib/stylex-create-vars.js.flow +10 -4
- package/lib/stylex-create.d.ts +2 -2
- package/lib/stylex-create.js +1 -20
- package/lib/stylex-create.js.flow +1 -1
- package/lib/stylex-first-that-works.js +0 -10
- package/lib/stylex-include.js +0 -10
- package/lib/stylex-keyframes.d.ts +1 -1
- package/lib/stylex-keyframes.js +7 -27
- package/lib/stylex-keyframes.js.flow +1 -1
- package/lib/stylex-override-vars.d.ts +11 -4
- package/lib/stylex-override-vars.js +32 -18
- package/lib/stylex-override-vars.js.flow +3 -3
- package/lib/transform-value.js +11 -29
- package/lib/transform-value.js.flow +1 -1
- package/lib/utils/Rule.d.ts +2 -2
- package/lib/utils/Rule.js +0 -21
- package/lib/utils/Rule.js.flow +2 -2
- package/lib/utils/dashify.js +1 -9
- package/lib/utils/default-options.d.ts +1 -1
- package/lib/utils/default-options.js +2 -23
- package/lib/utils/default-options.js.flow +1 -1
- package/lib/utils/file-based-identifier.js +1 -9
- package/lib/utils/genCSSRule.d.ts +1 -1
- package/lib/utils/genCSSRule.js +6 -16
- package/lib/utils/genCSSRule.js.flow +1 -1
- package/lib/utils/normalize-value.js +1 -13
- package/lib/utils/normalize-value.js.flow +1 -1
- package/lib/utils/normalizers/detect-unclosed-fns.d.ts +1 -1
- package/lib/utils/normalizers/detect-unclosed-fns.js +2 -14
- package/lib/utils/normalizers/detect-unclosed-fns.js.flow +1 -1
- package/lib/utils/normalizers/font-size-px-to-rem.d.ts +1 -1
- package/lib/utils/normalizers/font-size-px-to-rem.js +4 -19
- package/lib/utils/normalizers/font-size-px-to-rem.js.flow +1 -1
- package/lib/utils/normalizers/leading-zero.d.ts +1 -1
- package/lib/utils/normalizers/leading-zero.js +3 -15
- package/lib/utils/normalizers/leading-zero.js.flow +1 -1
- package/lib/utils/normalizers/quotes.d.ts +1 -1
- package/lib/utils/normalizers/quotes.js +4 -17
- package/lib/utils/normalizers/quotes.js.flow +1 -1
- package/lib/utils/normalizers/timings.d.ts +1 -1
- package/lib/utils/normalizers/timings.js +4 -18
- package/lib/utils/normalizers/timings.js.flow +1 -1
- package/lib/utils/normalizers/whitespace.d.ts +1 -1
- package/lib/utils/normalizers/whitespace.js +12 -27
- package/lib/utils/normalizers/whitespace.js.flow +1 -1
- package/lib/utils/normalizers/zero-dimensions.d.ts +1 -1
- package/lib/utils/normalizers/zero-dimensions.js +8 -23
- package/lib/utils/normalizers/zero-dimensions.js.flow +1 -1
- package/lib/utils/object-utils.d.ts +28 -20
- package/lib/utils/object-utils.js +2 -15
- package/lib/utils/object-utils.js.flow +23 -27
- package/lib/utils/property-priorities.js +68 -83
- package/lib/utils/split-css-value.d.ts +1 -1
- package/lib/utils/split-css-value.js +8 -22
- package/lib/utils/split-css-value.js.flow +1 -1
- package/lib/validate.js +2 -11
- package/package.json +2 -3
@@ -8,17 +8,6 @@ var _hash = _interopRequireDefault(require("./hash"));
|
|
8
8
|
var _objectUtils = require("./utils/object-utils");
|
9
9
|
var _defaultOptions = require("./utils/default-options");
|
10
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
11
|
-
/**
|
12
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
13
|
-
*
|
14
|
-
* This source code is licensed under the MIT license found in the
|
15
|
-
* LICENSE file in the root directory of this source tree.
|
16
|
-
*
|
17
|
-
*
|
18
|
-
*/
|
19
|
-
|
20
|
-
// Similar to `stylex.create` it takes an object of variables with their values
|
21
|
-
// and returns a string after hashing it.
|
22
11
|
function styleXCreateVars(variables, options) {
|
23
12
|
const {
|
24
13
|
classNamePrefix,
|
@@ -29,7 +18,6 @@ function styleXCreateVars(variables, options) {
|
|
29
18
|
};
|
30
19
|
const themeNameHash = classNamePrefix + (0, _hash.default)(themeName);
|
31
20
|
const variablesMap = (0, _objectUtils.objMap)(variables, (value, key) => {
|
32
|
-
// Created hashed variable names with fileName//themeName//key
|
33
21
|
const nameHash = classNamePrefix + (0, _hash.default)(`${themeName}.${key}`);
|
34
22
|
return {
|
35
23
|
nameHash,
|
@@ -51,9 +39,34 @@ function styleXCreateVars(variables, options) {
|
|
51
39
|
}];
|
52
40
|
}
|
53
41
|
function constructCssVariablesString(variables) {
|
54
|
-
const
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
42
|
+
const atRules = {};
|
43
|
+
const varsString = (0, _objectUtils.objEntries)(variables).map(_ref2 => {
|
44
|
+
let [key, {
|
45
|
+
nameHash,
|
46
|
+
value
|
47
|
+
}] = _ref2;
|
48
|
+
if (value !== null && typeof value === "object") {
|
49
|
+
if (value.default === undefined) {
|
50
|
+
throw new Error("Default value is not defined for " + key + " variable.");
|
51
|
+
}
|
52
|
+
const definedVarString = `--${nameHash}:${value.default};`;
|
53
|
+
Object.keys(value).forEach(key => {
|
54
|
+
if (key.startsWith("@")) {
|
55
|
+
const definedVarStringForAtRule = `--${nameHash}:${value[key]};`;
|
56
|
+
if (atRules[key] == null) {
|
57
|
+
atRules[key] = [definedVarStringForAtRule];
|
58
|
+
} else {
|
59
|
+
atRules[key].push(definedVarStringForAtRule);
|
60
|
+
}
|
61
|
+
}
|
62
|
+
});
|
63
|
+
return definedVarString;
|
64
|
+
}
|
65
|
+
return `--${nameHash}:${value};`;
|
66
|
+
}).join("");
|
67
|
+
const atRulesString = (0, _objectUtils.objEntries)(atRules).map(_ref3 => {
|
68
|
+
let [atRule, varsArr] = _ref3;
|
69
|
+
return `${atRule}{:root{${varsArr.join("")}}}`;
|
70
|
+
}).join("");
|
71
|
+
return `:root{${varsString}}${atRulesString || ""}`;
|
59
72
|
}
|
@@ -9,14 +9,20 @@
|
|
9
9
|
|
10
10
|
import type { StyleXOptions } from './common-types';
|
11
11
|
|
12
|
-
type VarsObject<
|
12
|
+
type VarsObject<
|
13
|
+
Vars: { +[string]: string | { default: string, +[string]: string } },
|
14
|
+
> = $ReadOnly<{
|
13
15
|
...$ObjMapConst<Vars, string>,
|
14
16
|
__themeName__: string,
|
15
|
-
}
|
17
|
+
}>;
|
16
18
|
|
17
19
|
// Similar to `stylex.create` it takes an object of variables with their values
|
18
20
|
// and returns a string after hashing it.
|
19
|
-
declare export default function styleXCreateVars
|
21
|
+
declare export default function styleXCreateVars<
|
22
|
+
+Vars: {
|
23
|
+
+[string]: string | { default: string, +[string]: string },
|
24
|
+
},
|
25
|
+
>(
|
20
26
|
variables: Vars,
|
21
|
-
options: $ReadOnly<{ ...Partial<StyleXOptions>, themeName: string, ... }
|
27
|
+
options: $ReadOnly<{ ...Partial<StyleXOptions>, themeName: string, ... }>,
|
22
28
|
): [VarsObject<Vars>, { css: string }];
|
package/lib/stylex-create.d.ts
CHANGED
@@ -15,9 +15,9 @@ import type {
|
|
15
15
|
} from './common-types';
|
16
16
|
declare function styleXCreateSet(
|
17
17
|
namespaces: { readonly [$$Key$$: string]: RawStyles },
|
18
|
-
options?: StyleXOptions
|
18
|
+
options?: StyleXOptions,
|
19
19
|
): [
|
20
20
|
{ [$$Key$$: string]: FlatCompiledStyles },
|
21
|
-
{ [$$Key$$: string]: InjectableStyle }
|
21
|
+
{ [$$Key$$: string]: InjectableStyle },
|
22
22
|
];
|
23
23
|
export default styleXCreateSet;
|
package/lib/stylex-create.js
CHANGED
@@ -9,25 +9,6 @@ var _stylexInclude = require("./stylex-include");
|
|
9
9
|
var _defaultOptions = require("./utils/default-options");
|
10
10
|
var _flattenRawStyleObj = require("./preprocess-rules/flatten-raw-style-obj");
|
11
11
|
var _basicValidation = require("./preprocess-rules/basic-validation");
|
12
|
-
/**
|
13
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
14
|
-
*
|
15
|
-
* This source code is licensed under the MIT license found in the
|
16
|
-
* LICENSE file in the root directory of this source tree.
|
17
|
-
*
|
18
|
-
*
|
19
|
-
*/
|
20
|
-
|
21
|
-
// This takes the object of styles passed to `stylex.create` and transforms it.
|
22
|
-
// The transformation replaces style values with classNames.
|
23
|
-
//
|
24
|
-
// It also collects all injected styles along the way.
|
25
|
-
// It then returns a tuple of the transformed style Object and an object of injected styles.
|
26
|
-
//
|
27
|
-
// This function does some basic validation, and then uses `styleXCreateNamespace` to transform
|
28
|
-
// each namespace within,
|
29
|
-
//
|
30
|
-
// Before returning, it ensures that there are no duplicate styles being injected.
|
31
12
|
function styleXCreateSet(namespaces) {
|
32
13
|
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions.defaultOptions;
|
33
14
|
const resolvedNamespaces = {};
|
@@ -51,7 +32,7 @@ function styleXCreateSet(namespaces) {
|
|
51
32
|
const className = classNameTuples.map(_ref2 => {
|
52
33
|
let [className] = _ref2;
|
53
34
|
return className;
|
54
|
-
}).join(
|
35
|
+
}).join(" ") || null;
|
55
36
|
namespaceObj[key] = className;
|
56
37
|
for (const [className, injectable] of classNameTuples) {
|
57
38
|
if (injectedStyles[className] == null) {
|
@@ -26,5 +26,5 @@ import type {
|
|
26
26
|
// Before returning, it ensures that there are no duplicate styles being injected.
|
27
27
|
declare export default function styleXCreateSet(
|
28
28
|
namespaces: { +[string]: RawStyles },
|
29
|
-
options?: StyleXOptions
|
29
|
+
options?: StyleXOptions,
|
30
30
|
): [{ [string]: FlatCompiledStyles }, { [string]: InjectableStyle }];
|
@@ -4,16 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = stylexFirstThatWorks;
|
7
|
-
/**
|
8
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
9
|
-
*
|
10
|
-
* This source code is licensed under the MIT license found in the
|
11
|
-
* LICENSE file in the root directory of this source tree.
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*
|
15
|
-
*/
|
16
|
-
|
17
7
|
function stylexFirstThatWorks() {
|
18
8
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
19
9
|
args[_key] = arguments[_key];
|
package/lib/stylex-include.js
CHANGED
@@ -8,16 +8,6 @@ exports.default = stylexInclude;
|
|
8
8
|
var messages = _interopRequireWildcard(require("./messages"));
|
9
9
|
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); }
|
10
10
|
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; }
|
11
|
-
/**
|
12
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
13
|
-
*
|
14
|
-
* This source code is licensed under the MIT license found in the
|
15
|
-
* LICENSE file in the root directory of this source tree.
|
16
|
-
*
|
17
|
-
*
|
18
|
-
*
|
19
|
-
*/
|
20
|
-
|
21
11
|
let number = 0;
|
22
12
|
function uuid() {
|
23
13
|
return `__included_${++number}__`;
|
package/lib/stylex-keyframes.js
CHANGED
@@ -13,34 +13,18 @@ var _dashify = _interopRequireDefault(require("./utils/dashify"));
|
|
13
13
|
var _objectUtils = require("./utils/object-utils");
|
14
14
|
var _defaultOptions = require("./utils/default-options");
|
15
15
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
16
|
-
/**
|
17
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
18
|
-
*
|
19
|
-
* This source code is licensed under the MIT license found in the
|
20
|
-
* LICENSE file in the root directory of this source tree.
|
21
|
-
*
|
22
|
-
*
|
23
|
-
*/
|
24
|
-
|
25
|
-
// Similar to `stylex.create` it takes an object of keyframes
|
26
|
-
// and returns a string after hashing it.
|
27
|
-
//
|
28
|
-
// It also expands shorthand properties to maintain parity with
|
29
|
-
// `stylex.create`.
|
30
16
|
function styleXKeyframes(frames) {
|
31
17
|
let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions.defaultOptions;
|
32
18
|
const {
|
33
|
-
stylexSheetName =
|
34
|
-
classNamePrefix =
|
19
|
+
stylexSheetName = "<>",
|
20
|
+
classNamePrefix = "x"
|
35
21
|
} = options;
|
36
22
|
const expandedObject = (0, _objectUtils.objMap)(frames, frame => _objectUtils.Pipe.create(frame).pipe(frame => expandFrameShorthands(frame, options)).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value))).done());
|
37
23
|
const ltrStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, _generateLtr.default));
|
38
24
|
const rtlStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, entry => (0, _generateRtl.default)(entry) ?? entry));
|
39
25
|
const ltrString = constructKeyframesObj(ltrStyles);
|
40
26
|
const rtlString = constructKeyframesObj(rtlStyles);
|
41
|
-
|
42
|
-
// This extra `-B` is kept for some idiosyncratic legacy compatibility for now.
|
43
|
-
const animationName = classNamePrefix + (0, _hash.default)(stylexSheetName + ltrString) + '-B';
|
27
|
+
const animationName = classNamePrefix + (0, _hash.default)(stylexSheetName + ltrString) + "-B";
|
44
28
|
const ltr = `@keyframes ${animationName}{${ltrString}}`;
|
45
29
|
const rtl = ltrString === rtlString ? null : `@keyframes ${animationName}{${rtlString}}`;
|
46
30
|
return [animationName, {
|
@@ -52,25 +36,21 @@ function styleXKeyframes(frames) {
|
|
52
36
|
function expandFrameShorthands(frame, options) {
|
53
37
|
return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(frame).flatMap(pair => (0, _index.default)(pair, options).map(_ref => {
|
54
38
|
let [key, value] = _ref;
|
55
|
-
if (typeof value ===
|
39
|
+
if (typeof value === "string" || typeof value === "number") {
|
56
40
|
return [key, value];
|
57
41
|
}
|
58
42
|
return null;
|
59
|
-
}).filter(Boolean))
|
60
|
-
// Keyframes are not combined. The nulls can be skipped
|
61
|
-
.filter(_ref2 => {
|
43
|
+
}).filter(Boolean)).filter(_ref2 => {
|
62
44
|
let [_key, value] = _ref2;
|
63
45
|
return value != null;
|
64
46
|
}));
|
65
47
|
}
|
66
|
-
|
67
|
-
// Create t
|
68
48
|
function constructKeyframesObj(frames) {
|
69
49
|
return (0, _objectUtils.objEntries)(frames).map(_ref3 => {
|
70
50
|
let [key, value] = _ref3;
|
71
51
|
return `${key}{${(0, _objectUtils.objEntries)(value).map(_ref4 => {
|
72
52
|
let [k, v] = _ref4;
|
73
53
|
return `${k}:${v};`;
|
74
|
-
}).join(
|
75
|
-
}).join(
|
54
|
+
}).join("")}}`;
|
55
|
+
}).join("");
|
76
56
|
}
|
@@ -16,5 +16,5 @@ import type { InjectableStyle, StyleXOptions } from './common-types';
|
|
16
16
|
// `stylex.create`.
|
17
17
|
declare export default function styleXKeyframes(
|
18
18
|
frames: { +[string]: { +[string]: string | number } },
|
19
|
-
options: StyleXOptions
|
19
|
+
options: StyleXOptions,
|
20
20
|
): [string, InjectableStyle];
|
@@ -9,11 +9,18 @@
|
|
9
9
|
|
10
10
|
import type { InjectableStyle, StyleXOptions } from './common-types';
|
11
11
|
declare function styleXOverrideVars(
|
12
|
-
themeVars: {
|
13
|
-
|
14
|
-
|
12
|
+
themeVars: {
|
13
|
+
readonly __themeName__: string;
|
14
|
+
readonly [$$Key$$: string]: string;
|
15
|
+
},
|
16
|
+
variables: {
|
17
|
+
readonly [$$Key$$: string]:
|
18
|
+
| string
|
19
|
+
| { default: string; readonly [$$Key$$: string]: string };
|
20
|
+
},
|
21
|
+
options?: StyleXOptions,
|
15
22
|
): [
|
16
23
|
{ $$css: true; readonly [$$Key$$: string]: string },
|
17
|
-
{ [$$Key$$: string]: InjectableStyle }
|
24
|
+
{ [$$Key$$: string]: InjectableStyle },
|
18
25
|
];
|
19
26
|
export default styleXOverrideVars;
|
@@ -7,21 +7,9 @@ exports.default = styleXOverrideVars;
|
|
7
7
|
var _hash = _interopRequireDefault(require("./hash"));
|
8
8
|
var _defaultOptions = require("./utils/default-options");
|
9
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
|
-
// It takes an object of variables with their values and the original set of variables to override
|
20
|
-
// and returns a hashed className with variables overrides.
|
21
|
-
//
|
22
10
|
function styleXOverrideVars(themeVars, variables, options) {
|
23
|
-
if (typeof themeVars.__themeName__ !==
|
24
|
-
throw new Error(
|
11
|
+
if (typeof themeVars.__themeName__ !== "string") {
|
12
|
+
throw new Error("Can only override variables theme created with stylex.unstable_createVars().");
|
25
13
|
}
|
26
14
|
const {
|
27
15
|
classNamePrefix
|
@@ -30,17 +18,43 @@ function styleXOverrideVars(themeVars, variables, options) {
|
|
30
18
|
...options
|
31
19
|
};
|
32
20
|
const sortedKeys = Object.keys(variables).sort();
|
21
|
+
const atRules = {};
|
33
22
|
const cssVariablesOverrideString = sortedKeys.map(key => {
|
34
23
|
const varNameHash = themeVars[key].slice(4, -1);
|
35
|
-
|
36
|
-
|
37
|
-
|
24
|
+
const value = variables[key];
|
25
|
+
if (varNameHash != null && value !== null && typeof value === "object") {
|
26
|
+
if (value.default === undefined) {
|
27
|
+
throw new Error("Default value is not defined for " + key + " variable.");
|
28
|
+
}
|
29
|
+
const definedVarString = `${varNameHash}:${value.default};`;
|
30
|
+
Object.keys(value).forEach(key => {
|
31
|
+
if (key.startsWith("@")) {
|
32
|
+
const definedVarStringForAtRule = `${varNameHash}:${value[key]};`;
|
33
|
+
if (atRules[key] == null) {
|
34
|
+
atRules[key] = [definedVarStringForAtRule];
|
35
|
+
} else {
|
36
|
+
atRules[key].push(definedVarStringForAtRule);
|
37
|
+
}
|
38
|
+
}
|
39
|
+
});
|
40
|
+
return definedVarString;
|
41
|
+
}
|
42
|
+
return varNameHash != null && typeof value !== "object" ? `${varNameHash}:${value};` : "";
|
43
|
+
}).join("");
|
44
|
+
const sortedAtRules = Object.keys(atRules).sort();
|
45
|
+
const atRulesStringForHash = sortedAtRules.map(atRule => {
|
46
|
+
return `${atRule}{${atRules[atRule].sort().join("")}}`;
|
47
|
+
}).join("");
|
48
|
+
const overrideClassName = classNamePrefix + (0, _hash.default)(cssVariablesOverrideString + atRulesStringForHash);
|
49
|
+
const atRulesCss = sortedAtRules.map(atRule => {
|
50
|
+
return `${atRule}{.${overrideClassName}{${atRules[atRule].join("")}}}`;
|
51
|
+
}).join("");
|
38
52
|
return [{
|
39
53
|
$$css: true,
|
40
54
|
[themeVars.__themeName__]: overrideClassName
|
41
55
|
}, {
|
42
56
|
[overrideClassName]: {
|
43
|
-
ltr: `.${overrideClassName}{${cssVariablesOverrideString}}`,
|
57
|
+
ltr: `.${overrideClassName}{${cssVariablesOverrideString}${atRulesCss}}`,
|
44
58
|
priority: 0.99,
|
45
59
|
rtl: undefined
|
46
60
|
}
|
@@ -13,7 +13,7 @@ import type { InjectableStyle, StyleXOptions } from './common-types';
|
|
13
13
|
// and returns a hashed className with variables overrides.
|
14
14
|
//
|
15
15
|
declare export default function styleXOverrideVars(
|
16
|
-
themeVars: { __themeName__: string, +[string]: string },
|
17
|
-
variables: { +[string]: string },
|
18
|
-
options?: StyleXOptions
|
16
|
+
themeVars: { +__themeName__: string, +[string]: string },
|
17
|
+
variables: { +[string]: string | { default: string, +[string]: string } },
|
18
|
+
options?: StyleXOptions,
|
19
19
|
): [{ $$css: true, +[string]: string }, { [string]: InjectableStyle }];
|
package/lib/transform-value.js
CHANGED
@@ -6,28 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.default = transformValue;
|
7
7
|
var _normalizeValue = _interopRequireDefault(require("./utils/normalize-value"));
|
8
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
|
-
* Convert a CSS value in JS to the final CSS string value
|
19
|
-
*/
|
20
9
|
function transformValue(key, rawValue) {
|
21
|
-
const value = typeof rawValue ===
|
22
|
-
|
23
|
-
// content is one of the values that needs to wrapped in quotes.
|
24
|
-
// Users may write `''` without thinking about it, so we fix that.
|
25
|
-
if (key === 'content' && typeof value === 'string') {
|
10
|
+
const value = typeof rawValue === "number" ? String(Math.round(rawValue * 10000) / 10000) + getNumberSuffix(key) : rawValue;
|
11
|
+
if (key === "content" && typeof value === "string") {
|
26
12
|
const val = value.trim();
|
27
13
|
if (val.match(/^attr\([a-zA-Z0-9-]+\)$/)) {
|
28
14
|
return val;
|
29
15
|
}
|
30
|
-
if (!(val.startsWith(
|
16
|
+
if (!(val.startsWith("\"") && val.endsWith("\"") || val.startsWith("'") && val.endsWith("'"))) {
|
31
17
|
return `"${val}"`;
|
32
18
|
}
|
33
19
|
}
|
@@ -35,24 +21,20 @@ function transformValue(key, rawValue) {
|
|
35
21
|
}
|
36
22
|
function getNumberSuffix(key) {
|
37
23
|
if (unitlessNumberProperties.has(key)) {
|
38
|
-
return
|
24
|
+
return "";
|
39
25
|
}
|
40
26
|
const suffix = numberPropertySuffixes[key];
|
41
27
|
if (suffix == null) {
|
42
|
-
return
|
28
|
+
return "px";
|
43
29
|
} else {
|
44
30
|
return suffix;
|
45
31
|
}
|
46
32
|
}
|
47
|
-
const unitlessNumberProperties = new Set([
|
48
|
-
// Unsupported
|
49
|
-
'flexGrow', 'flexPositive', 'flexShrink', 'flexOrder', 'gridRow', 'gridColumn', 'fontWeight', 'lineClamp', 'lineHeight', 'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'fillOpacity', 'floodOpacity', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth']);
|
50
|
-
|
51
|
-
// List of properties that have custom suffixes for numbers
|
33
|
+
const unitlessNumberProperties = new Set(["animationIterationCount", "borderImageOutset", "borderImageSlice", "borderImageWidth", "columnCount", "flex", "flexGrow", "flexPositive", "flexShrink", "flexOrder", "gridRow", "gridColumn", "fontWeight", "lineClamp", "lineHeight", "opacity", "order", "orphans", "tabSize", "widows", "zIndex", "fillOpacity", "floodOpacity", "stopOpacity", "strokeDasharray", "strokeDashoffset", "strokeMiterlimit", "strokeOpacity", "strokeWidth"]);
|
52
34
|
const numberPropertySuffixes = {
|
53
|
-
animationDelay:
|
54
|
-
animationDuration:
|
55
|
-
transitionDelay:
|
56
|
-
transitionDuration:
|
57
|
-
voiceDuration:
|
35
|
+
animationDelay: "ms",
|
36
|
+
animationDuration: "ms",
|
37
|
+
transitionDelay: "ms",
|
38
|
+
transitionDuration: "ms",
|
39
|
+
voiceDuration: "ms"
|
58
40
|
};
|
package/lib/utils/Rule.d.ts
CHANGED
@@ -27,7 +27,7 @@ export declare class RawRule<V> extends Rule<V> {
|
|
27
27
|
key: string,
|
28
28
|
value: V,
|
29
29
|
psuedos: null | undefined | ReadonlyArray<string>,
|
30
|
-
atRules: null | undefined | ReadonlyArray<string
|
30
|
+
atRules: null | undefined | ReadonlyArray<string>,
|
31
31
|
);
|
32
32
|
}
|
33
33
|
export declare class RawRuleList<V> extends Rule<V> {
|
@@ -49,7 +49,7 @@ export declare class CompiledRule<V> extends Rule<V> {
|
|
49
49
|
value: V,
|
50
50
|
psuedos: null | undefined | ReadonlyArray<string>,
|
51
51
|
atRules: null | undefined | ReadonlyArray<string>,
|
52
|
-
className: string
|
52
|
+
className: string,
|
53
53
|
);
|
54
54
|
}
|
55
55
|
export declare class CompiledRuleTuple2<V1, V2> extends Rule<V1 | V2> {
|
package/lib/utils/Rule.js
CHANGED
@@ -4,28 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.Rule = exports.RawRuleRTLTuple = exports.RawRuleList = exports.RawRule = exports.CompiledRuleTuple2 = exports.CompiledRule = void 0;
|
7
|
-
/**
|
8
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
9
|
-
*
|
10
|
-
* This source code is licensed under the MIT license found in the
|
11
|
-
* LICENSE file in the root directory of this source tree.
|
12
|
-
*
|
13
|
-
*
|
14
|
-
*/
|
15
|
-
|
16
|
-
/**
|
17
|
-
* This could be an interface, but we use a class so that we can
|
18
|
-
* use instanceof to check for it.
|
19
|
-
*/
|
20
|
-
// eslint-disable-next-line no-unused-vars
|
21
7
|
class Rule {}
|
22
|
-
|
23
|
-
/**
|
24
|
-
* This is a class that represents a raw style rule.
|
25
|
-
*
|
26
|
-
* It exists to track the actual CSS rule that should be compiled
|
27
|
-
* even as we transform the structure of the RawStyles object.
|
28
|
-
*/
|
29
8
|
exports.Rule = Rule;
|
30
9
|
class RawRule extends Rule {
|
31
10
|
constructor(key, value, psuedos, atRules) {
|
package/lib/utils/Rule.js.flow
CHANGED
@@ -29,7 +29,7 @@ declare export class RawRule<V> extends Rule<V> {
|
|
29
29
|
key: string,
|
30
30
|
value: V,
|
31
31
|
psuedos: ?$ReadOnlyArray<string>,
|
32
|
-
atRules: ?$ReadOnlyArray<string
|
32
|
+
atRules: ?$ReadOnlyArray<string>,
|
33
33
|
): void;
|
34
34
|
}
|
35
35
|
|
@@ -54,7 +54,7 @@ declare export class CompiledRule<V> extends Rule<V> {
|
|
54
54
|
value: V,
|
55
55
|
psuedos: ?$ReadOnlyArray<string>,
|
56
56
|
atRules: ?$ReadOnlyArray<string>,
|
57
|
-
className: string
|
57
|
+
className: string,
|
58
58
|
): void;
|
59
59
|
}
|
60
60
|
|
package/lib/utils/dashify.js
CHANGED
@@ -4,14 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = dashify;
|
7
|
-
/**
|
8
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
9
|
-
*
|
10
|
-
* This source code is licensed under the MIT license found in the
|
11
|
-
* LICENSE file in the root directory of this source tree.
|
12
|
-
*
|
13
|
-
*/
|
14
|
-
|
15
7
|
function dashify(str) {
|
16
|
-
return str.replace(/(^|[a-z])([A-Z])/g,
|
8
|
+
return str.replace(/(^|[a-z])([A-Z])/g, "$1-$2").toLowerCase();
|
17
9
|
}
|
@@ -4,31 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.defaultOptions = void 0;
|
7
|
-
/**
|
8
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
9
|
-
*
|
10
|
-
* This source code is licensed under the MIT license found in the
|
11
|
-
* LICENSE file in the root directory of this source tree.
|
12
|
-
*
|
13
|
-
*/
|
14
|
-
|
15
|
-
// {
|
16
|
-
// ...options,
|
17
|
-
// dev: !!(options as any).dev,
|
18
|
-
// test: !!(options as any).test,
|
19
|
-
// stylexSheetName: (options as any).stylexSheetName ?? undefined,
|
20
|
-
// classNamePrefix: (options as any).classNamePrefix ?? 'x',
|
21
|
-
// importSources: (options as any).importSources ?? [name, 'stylex'],
|
22
|
-
// definedStylexCSSVariables:
|
23
|
-
// (options as any).definedStylexCSSVariables ?? {},
|
24
|
-
// genConditionalClasses: !!(options as any).genConditionalClasses,
|
25
|
-
// skipShorthandExpansion: !!(options as any).skipShorthandExpansion,
|
26
|
-
// } as StyleXOptions;
|
27
|
-
|
28
7
|
const defaultOptions = {
|
29
8
|
dev: false,
|
30
9
|
test: false,
|
31
|
-
classNamePrefix:
|
32
|
-
styleResolution:
|
10
|
+
classNamePrefix: "x",
|
11
|
+
styleResolution: "application-order"
|
33
12
|
};
|
34
13
|
exports.defaultOptions = defaultOptions;
|
@@ -4,19 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = genFileBasedIdentifier;
|
7
|
-
/**
|
8
|
-
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
9
|
-
*
|
10
|
-
* This source code is licensed under the MIT license found in the
|
11
|
-
* LICENSE file in the root directory of this source tree.
|
12
|
-
*
|
13
|
-
*/
|
14
|
-
|
15
7
|
function genFileBasedIdentifier(_ref) {
|
16
8
|
let {
|
17
9
|
fileName,
|
18
10
|
exportName,
|
19
11
|
key
|
20
12
|
} = _ref;
|
21
|
-
return `${fileName}//${exportName}${key != null ? `.${key}` :
|
13
|
+
return `${fileName}//${exportName}${key != null ? `.${key}` : ""}`;
|
22
14
|
}
|
package/lib/utils/genCSSRule.js
CHANGED
@@ -1,25 +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
|
-
'use strict';
|
1
|
+
"use strict";
|
12
2
|
|
13
3
|
Object.defineProperty(exports, "__esModule", {
|
14
4
|
value: true
|
15
5
|
});
|
16
6
|
exports.genCSSRule = genCSSRule;
|
17
|
-
const THUMB_VARIANTS = [
|
7
|
+
const THUMB_VARIANTS = ["::-webkit-slider-thumb", "::-moz-range-thumb", "::-ms-thumb"];
|
18
8
|
function genCSSRule(className, decls, pseudos, atRules) {
|
19
|
-
const pseudo = pseudos.filter(p => p !==
|
20
|
-
let selectorForAtRules = `.${className}` + atRules.map(() => `.${className}`).join(
|
21
|
-
if (pseudos.includes(
|
22
|
-
selectorForAtRules = THUMB_VARIANTS.map(suffix => selectorForAtRules + suffix).join(
|
9
|
+
const pseudo = pseudos.filter(p => p !== "::thumb").join("");
|
10
|
+
let selectorForAtRules = `.${className}` + atRules.map(() => `.${className}`).join("") + pseudo;
|
11
|
+
if (pseudos.includes("::thumb")) {
|
12
|
+
selectorForAtRules = THUMB_VARIANTS.map(suffix => selectorForAtRules + suffix).join(", ");
|
23
13
|
}
|
24
14
|
return atRules.reduce((acc, atRule) => `${atRule}{${acc}}`, `${selectorForAtRules}{${decls}}`);
|
25
15
|
}
|