@stylexjs/shared 0.2.0-beta.8 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (178) hide show
  1. package/README.md +81 -0
  2. package/lib/common-types.d.ts +50 -0
  3. package/lib/common-types.js.flow +65 -0
  4. package/lib/convert-to-className.d.ts +16 -0
  5. package/lib/convert-to-className.js +17 -26
  6. package/lib/convert-to-className.js.flow +23 -0
  7. package/lib/generate-css-rule.d.ts +17 -0
  8. package/lib/generate-css-rule.js +8 -47
  9. package/lib/generate-css-rule.js.flow +17 -0
  10. package/lib/hash.d.ts +11 -0
  11. package/lib/hash.js +3 -27
  12. package/lib/hash.js.flow +10 -0
  13. package/lib/index.d.ts +42 -85
  14. package/lib/index.js +19 -27
  15. package/lib/index.js.flow +59 -0
  16. package/lib/messages.d.ts +36 -0
  17. package/lib/messages.js +28 -55
  18. package/lib/messages.js.flow +39 -0
  19. package/lib/physical-rtl/generate-ltr.d.ts +11 -0
  20. package/lib/physical-rtl/generate-ltr.js +18 -46
  21. package/lib/physical-rtl/generate-ltr.js.flow +12 -0
  22. package/lib/physical-rtl/generate-rtl.d.ts +13 -0
  23. package/lib/physical-rtl/generate-rtl.js +18 -50
  24. package/lib/physical-rtl/generate-rtl.js.flow +12 -0
  25. package/lib/preprocess-rules/PreRule.d.ts +52 -0
  26. package/lib/preprocess-rules/PreRule.js +87 -0
  27. package/lib/preprocess-rules/PreRule.js.flow +64 -0
  28. package/lib/preprocess-rules/application-order.d.ts +290 -0
  29. package/lib/preprocess-rules/application-order.js +193 -0
  30. package/lib/preprocess-rules/application-order.js.flow +241 -0
  31. package/lib/preprocess-rules/basic-validation.d.ts +13 -0
  32. package/lib/preprocess-rules/basic-validation.js +83 -0
  33. package/lib/preprocess-rules/basic-validation.js.flow +13 -0
  34. package/lib/preprocess-rules/flatten-raw-style-obj.d.ts +25 -0
  35. package/lib/preprocess-rules/flatten-raw-style-obj.js +120 -0
  36. package/lib/preprocess-rules/flatten-raw-style-obj.js.flow +27 -0
  37. package/lib/preprocess-rules/index.d.ts +18 -0
  38. package/lib/preprocess-rules/index.js +30 -0
  39. package/lib/preprocess-rules/index.js.flow +19 -0
  40. package/lib/preprocess-rules/legacy-expand-shorthands.d.ts +200 -0
  41. package/lib/preprocess-rules/legacy-expand-shorthands.js +136 -0
  42. package/lib/preprocess-rules/legacy-expand-shorthands.js.flow +179 -0
  43. package/lib/preprocess-rules/property-specificity.d.ts +89 -0
  44. package/lib/preprocess-rules/property-specificity.js +107 -0
  45. package/lib/preprocess-rules/property-specificity.js.flow +98 -0
  46. package/lib/properties/CSS Animations.json +445 -0
  47. package/lib/properties/CSS Backgrounds and Borders.json +1085 -0
  48. package/lib/properties/CSS Basic User Interface.json +365 -0
  49. package/lib/properties/CSS Box Alignment.json +245 -0
  50. package/lib/properties/CSS Box Model.json +501 -0
  51. package/lib/properties/CSS Color.json +100 -0
  52. package/lib/properties/CSS Columns.json +185 -0
  53. package/lib/properties/CSS Containment.json +203 -0
  54. package/lib/properties/CSS Counter Styles.json +56 -0
  55. package/lib/properties/CSS Display.json +20 -0
  56. package/lib/properties/CSS Flexible Box Layout.json +167 -0
  57. package/lib/properties/CSS Fonts.json +684 -0
  58. package/lib/properties/CSS Fragmentation.json +110 -0
  59. package/lib/properties/CSS Generated Content.json +38 -0
  60. package/lib/properties/CSS Grid Layout.json +500 -0
  61. package/lib/properties/CSS Images.json +91 -0
  62. package/lib/properties/CSS Inline.json +38 -0
  63. package/lib/properties/CSS Lists and Counters.json +86 -0
  64. package/lib/properties/CSS Logical Properties.json +1086 -0
  65. package/lib/properties/CSS Masking.json +399 -0
  66. package/lib/properties/CSS Miscellaneous.json +38 -0
  67. package/lib/properties/CSS Motion Path.json +132 -0
  68. package/lib/properties/CSS Overflow.json +216 -0
  69. package/lib/properties/CSS Pages.json +83 -0
  70. package/lib/properties/CSS Positioning.json +166 -0
  71. package/lib/properties/CSS Ruby.json +55 -0
  72. package/lib/properties/CSS Scroll Anchoring.json +19 -0
  73. package/lib/properties/CSS Scroll Snap.json +604 -0
  74. package/lib/properties/CSS Scrollbars.json +38 -0
  75. package/lib/properties/CSS Shapes.json +56 -0
  76. package/lib/properties/CSS Speech.json +20 -0
  77. package/lib/properties/CSS Table.json +115 -0
  78. package/lib/properties/CSS Text Decoration.json +312 -0
  79. package/lib/properties/CSS Text.json +415 -0
  80. package/lib/properties/CSS Transforms.json +188 -0
  81. package/lib/properties/CSS Transitions.json +122 -0
  82. package/lib/properties/CSS Variables.json +20 -0
  83. package/lib/properties/CSS View Transitions.json +20 -0
  84. package/lib/properties/CSS Will Change.json +20 -0
  85. package/lib/properties/CSS Writing Modes.json +92 -0
  86. package/lib/properties/Compositing and Blending.json +62 -0
  87. package/lib/properties/Filter Effects.json +38 -0
  88. package/lib/properties/MathML.json +56 -0
  89. package/lib/properties/Microsoft Extensions.json +885 -0
  90. package/lib/properties/Mozilla Extensions.json +607 -0
  91. package/lib/properties/Pointer Events.json +20 -0
  92. package/lib/properties/WebKit Extensions.json +707 -0
  93. package/lib/properties.json +10122 -0
  94. package/lib/stylex-create-theme.d.ts +26 -0
  95. package/lib/stylex-create-theme.js +62 -0
  96. package/lib/stylex-create-theme.js.flow +19 -0
  97. package/lib/stylex-create.d.ts +23 -0
  98. package/lib/stylex-create.js +30 -142
  99. package/lib/stylex-create.js.flow +30 -0
  100. package/lib/stylex-define-vars.d.ts +36 -0
  101. package/lib/stylex-define-vars.js +72 -0
  102. package/lib/stylex-define-vars.js.flow +28 -0
  103. package/lib/stylex-first-that-works.d.ts +13 -0
  104. package/lib/stylex-first-that-works.js +0 -10
  105. package/lib/stylex-first-that-works.js.flow +12 -0
  106. package/lib/stylex-include.d.ts +18 -0
  107. package/lib/stylex-include.js +0 -10
  108. package/lib/stylex-include.js.flow +20 -0
  109. package/lib/stylex-keyframes.d.ts +17 -0
  110. package/lib/stylex-keyframes.js +22 -30
  111. package/lib/stylex-keyframes.js.flow +20 -0
  112. package/lib/transform-value.d.ts +22 -0
  113. package/lib/transform-value.js +9 -23
  114. package/lib/transform-value.js.flow +25 -0
  115. package/lib/types/index.d.ts +205 -0
  116. package/lib/types/index.js +191 -0
  117. package/lib/types/index.js.flow +241 -0
  118. package/lib/utils/Rule.d.ts +58 -0
  119. package/lib/utils/Rule.js +50 -0
  120. package/lib/utils/Rule.js.flow +64 -0
  121. package/lib/utils/dashify.d.ts +11 -0
  122. package/lib/utils/dashify.js +0 -8
  123. package/lib/utils/dashify.js.flow +10 -0
  124. package/lib/utils/default-options.d.ts +11 -0
  125. package/lib/utils/default-options.js +14 -0
  126. package/lib/utils/default-options.js.flow +25 -0
  127. package/lib/utils/file-based-identifier.d.ts +15 -0
  128. package/lib/utils/file-based-identifier.js +14 -0
  129. package/lib/utils/file-based-identifier.js.flow +14 -0
  130. package/lib/utils/genCSSRule.d.ts +15 -0
  131. package/lib/utils/genCSSRule.js +9 -18
  132. package/lib/utils/genCSSRule.js.flow +15 -0
  133. package/lib/utils/normalize-value.d.ts +16 -0
  134. package/lib/utils/normalize-value.js +11 -15
  135. package/lib/utils/normalize-value.js.flow +16 -0
  136. package/lib/utils/normalizers/convert-camel-case-transition-props.d.ts +14 -0
  137. package/lib/utils/normalizers/convert-camel-case-transition-props.js +23 -0
  138. package/lib/utils/normalizers/convert-camel-case-transition-props.js.flow +13 -0
  139. package/lib/utils/normalizers/convert-camel-case-values.d.ts +14 -0
  140. package/lib/utils/normalizers/convert-camel-case-values.js +23 -0
  141. package/lib/utils/normalizers/convert-camel-case-values.js.flow +13 -0
  142. package/lib/utils/normalizers/detect-unclosed-fns.d.ts +17 -0
  143. package/lib/utils/normalizers/detect-unclosed-fns.js +0 -12
  144. package/lib/utils/normalizers/detect-unclosed-fns.js.flow +16 -0
  145. package/lib/utils/normalizers/font-size-px-to-rem.d.ts +19 -0
  146. package/lib/utils/normalizers/font-size-px-to-rem.js +9 -19
  147. package/lib/utils/normalizers/font-size-px-to-rem.js.flow +18 -0
  148. package/lib/utils/normalizers/leading-zero.d.ts +17 -0
  149. package/lib/utils/normalizers/leading-zero.js +0 -12
  150. package/lib/utils/normalizers/leading-zero.js.flow +16 -0
  151. package/lib/utils/normalizers/quotes.d.ts +18 -0
  152. package/lib/utils/normalizers/quotes.js +0 -13
  153. package/lib/utils/normalizers/quotes.js.flow +17 -0
  154. package/lib/utils/normalizers/timings.d.ts +18 -0
  155. package/lib/utils/normalizers/timings.js +0 -14
  156. package/lib/utils/normalizers/timings.js.flow +17 -0
  157. package/lib/utils/normalizers/whitespace.d.ts +19 -0
  158. package/lib/utils/normalizers/whitespace.js +0 -15
  159. package/lib/utils/normalizers/whitespace.js.flow +18 -0
  160. package/lib/utils/normalizers/zero-dimensions.d.ts +19 -0
  161. package/lib/utils/normalizers/zero-dimensions.js +0 -15
  162. package/lib/utils/normalizers/zero-dimensions.js.flow +18 -0
  163. package/lib/utils/object-utils.d.ts +66 -0
  164. package/lib/utils/object-utils.js +21 -13
  165. package/lib/utils/object-utils.js.flow +77 -0
  166. package/lib/utils/property-priorities.d.ts +11 -0
  167. package/lib/utils/property-priorities.js +531 -0
  168. package/lib/utils/property-priorities.js.flow +10 -0
  169. package/lib/utils/split-css-value.d.ts +14 -0
  170. package/lib/utils/split-css-value.js +33 -0
  171. package/lib/utils/split-css-value.js.flow +15 -0
  172. package/lib/validate.d.ts +12 -0
  173. package/lib/validate.js +1 -10
  174. package/lib/validate.js.flow +12 -0
  175. package/package.json +4 -5
  176. package/lib/expand-shorthands.d.ts +0 -5
  177. package/lib/expand-shorthands.js +0 -387
  178. package/lib/stylex-defaultValue.js +0 -397
package/README.md ADDED
@@ -0,0 +1,81 @@
1
+ # @stylexjs/shared
2
+
3
+ This package contains most of the core JavaScript logic for stylex.
4
+
5
+ It exports two primary functions `create` and `keyframes`.
6
+
7
+ 1. `create` - takes a map of style rules. The return value include: a) the map with each style value replaced by a unique, reproducible, hashed className string, and b) a list of the CSS styles to be inserted into the document.
8
+ 2. `keyframes` - takes a `@keyframes` animation as JS object. Returns a hashed string and the style ot be injected.
9
+
10
+ #### ⭐️ `create`
11
+
12
+ The `stylex.create` function is implemented here and can be found within `stylex-create.js` and is the default export of a function named `styleXCreateSet(...)`.
13
+
14
+ ##### `styleXCreateSet(...)`
15
+
16
+ > The function is called `styleXCreateSet` because `stylex.create` transforms a "set" or collection of multiple style [namespaces](#namespace)
17
+
18
+ This function itself mostly just traverses over the objects to run each [namespaces](#namespace) through the `styleXCreateNamespace(...)` function. Other than that, it takes the styles to be injected from each namespace in a [Namespace Set](#namespace-set) and deduplicates them so the style isn't injected multiple times if it's used within multiple Namespaces in the same set.
19
+
20
+ ##### `styleXCreateNamespace(...)`
21
+
22
+ > This function has been kept separate in case we want to add a new function to the StyleX API in the future called `stylex.createOne` which transforms a single [namespace](#namespace) instead of a [Namespace Set](#namespace-set)
23
+
24
+ This function is responsible to transforming a [namespace](#namespace) to a [Compiled Namespace](#compiled-namespace) by hashing each key value pair and returning an object where the values have been replaced by classNames.
25
+
26
+ **Step 1**
27
+
28
+ The first step here is expanding all [shorthands](#shorthands) into their individual properties. To do this we `.flatMap` over the object entries of the Namespace and use the `expandShorthands(...)` function defined within `expand-shorthands.js`
29
+
30
+ **Step 2**
31
+
32
+ We hash each style `[key, value]` pair and generate a className and an associated CSS rule. Thie is done in the `convertToClassName(...)` function defined within [`convert-to-className.js`](#convert-to-classname-shared-package). (Explained below)
33
+
34
+ **Step 3**
35
+
36
+ Using the classNames generated in _step 2_ above, we collect all the individual style keys along with their associated classNames in the `resolvedNamespace` object.
37
+
38
+ All the generated CSS rules from _step 2_ are collected in the `injectedStyles` object.
39
+
40
+ The `[resolvedNamespace, injectedStyles]` is returned.
41
+
42
+ ##### Back to `styleXCreateSet(...)`
43
+
44
+ `styleXCreateSet(...)` takes all the `[resolvedNamespace, finalInjectedStyles]` tuples and returns a tuple of `[compiledNamespaceSet, allInjectedStyles]`
45
+
46
+ ### Back to `create` with the `@stylexjs/babel-plugin` package
47
+
48
+ The `create` function within the babel plugin package takes the `stylex.create(...)` function call and replaces it with the `compiledNamespaceSet`.
49
+
50
+ It also takes each of the `injectedStyles` and:
51
+
52
+ 1. Either injects it as a `stylex.inject` call (if in `dev` mode)
53
+ 2. Or, adds it to the array of injected styles on [`babel.state.metadata`](#babel-metadata)
54
+
55
+ #### ⭐️ `keyframes`
56
+
57
+ This is the function backing `stylex.keyframes`. It works similarly to `create` but it's more simplified since it only defines a single CSS `@keyframes` rule and returns a single string.
58
+
59
+ Here again, the source AST is converted to a JS object and passed to `stylex-keyframes.js` within the `shared` package.
60
+
61
+ There, first the shorthands are expanded and then the whole objects is hashed. The resulting hash is used as the generated `animation name` for a `@keyframes` rule.
62
+
63
+ The "name" and the CSS `@keyframes` rules are returned as a tuple.
64
+
65
+ The `stylex.keyframes` call is replaced with the final string.
66
+
67
+ The CSS `@keyframes` rule is either injected using `stylex.inject` in dev mode or set onto the `stylex` array on [`babel.state.metadata`](#babel-metadata).
68
+
69
+ #### `convert-to-className` (`shared` package)
70
+
71
+ This function is responsible for converting a single style key-value pair into a tuple of `[key, className, CSSRules]`
72
+
73
+ It does so in the following steps:
74
+
75
+ 1. Convert the camelCased keys that are used by end-users to define [Namespaces](#namespace) and convert them to the dash-separated keys used within CSS.
76
+ 2. Hash `key` + (any `pseudo` or `at-rule`) + `value` to generate a className
77
+ 3. Generate the CSS rule using the `generateCSSRule` function defined in [`generate-css-rule.js`](#generate-css-rulejs) in the `shared` package.
78
+
79
+ #### `generate-css-rule.js`
80
+
81
+ This function takes a CSS key value pair, checks if has an RTL counterpart and returns them along side a pre-configured priority based on the type of CSS rule it is.
@@ -0,0 +1,50 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ *
8
+ */
9
+
10
+ import type { IncludedStyles } from './stylex-include';
11
+ export type TRawValue = number | string | ReadonlyArray<number | string>;
12
+ export type TStyleValue = null | TRawValue;
13
+ export type TNestableStyleValue = TStyleValue | PrimitiveRawStyles;
14
+ export type RawStyles = Readonly<{
15
+ [$$Key$$: string]: TNestableStyleValue | IncludedStyles;
16
+ }>;
17
+ export type PrimitiveRawStyles = Readonly<{
18
+ [$$Key$$: string]: TNestableStyleValue;
19
+ }>;
20
+ export type InjectableStyle = {
21
+ readonly priority: number;
22
+ readonly ltr: string;
23
+ readonly rtl: null | string;
24
+ };
25
+ export type StyleRule = [string, string, InjectableStyle];
26
+ export type CompiledStyles = Readonly<{
27
+ [$$Key$$: string]:
28
+ | IncludedStyles
29
+ | null
30
+ | string
31
+ | Readonly<{ [$$Key$$: string]: null | string }>;
32
+ }>;
33
+ export type FlatCompiledStyles = Readonly<{
34
+ [$$Key$$: string]: string | IncludedStyles | null;
35
+ $$css: true;
36
+ }>;
37
+ export type StyleXOptions = {
38
+ dev: boolean;
39
+ test: boolean;
40
+ useRemForFontSize: boolean;
41
+ runtimeInjection: boolean;
42
+ classNamePrefix: string;
43
+ definedStylexCSSVariables?: { [key: string]: unknown };
44
+ styleResolution:
45
+ | 'application-order'
46
+ | 'property-specificity'
47
+ | 'legacy-expand-shorthands';
48
+ };
49
+ export type MutableCompiledNamespaces = { [key: string]: FlatCompiledStyles };
50
+ export type CompiledNamespaces = Readonly<MutableCompiledNamespaces>;
@@ -0,0 +1,65 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow strict
8
+ */
9
+
10
+ import type { IncludedStyles } from './stylex-include';
11
+
12
+ export type TRawValue = number | string | $ReadOnlyArray<number | string>;
13
+ export type TStyleValue = null | TRawValue;
14
+ export type TNestableStyleValue = TStyleValue | PrimitiveRawStyles;
15
+
16
+ export type RawStyles = $ReadOnly<{
17
+ [string]: TNestableStyleValue | IncludedStyles,
18
+ }>;
19
+ export type PrimitiveRawStyles = $ReadOnly<{
20
+ [string]: TNestableStyleValue,
21
+ }>;
22
+
23
+ export type InjectableStyle = {
24
+ +priority: number,
25
+ +ltr: string,
26
+ +rtl: null | string,
27
+ };
28
+
29
+ export type StyleRule = [string, string, InjectableStyle];
30
+
31
+ export type CompiledStyles = $ReadOnly<{
32
+ [string]:
33
+ | IncludedStyles
34
+ | null
35
+ | string
36
+ | $ReadOnly<{ [string]: null | string }>,
37
+ }>;
38
+
39
+ export type FlatCompiledStyles = $ReadOnly<{
40
+ [string]: string | IncludedStyles | null,
41
+ $$css: true,
42
+ }>;
43
+
44
+ export type StyleXOptions = {
45
+ dev: boolean,
46
+ test: boolean,
47
+ useRemForFontSize: boolean,
48
+ runtimeInjection: boolean,
49
+ classNamePrefix: string,
50
+ definedStylexCSSVariables?: { [key: string]: mixed },
51
+ styleResolution:
52
+ | 'application-order' // The last style applied wins.
53
+ // More specific styles will win over less specific styles. (margin-top wins over margin)
54
+ | 'property-specificity'
55
+ // Legacy behavior, that expands shorthand properties into their longhand counterparts at compile-time.
56
+ // This is not recommended, and will be removed in a future version.
57
+ | 'legacy-expand-shorthands',
58
+ ...
59
+ };
60
+
61
+ export type MutableCompiledNamespaces = {
62
+ [key: string]: FlatCompiledStyles,
63
+ };
64
+
65
+ export type CompiledNamespaces = $ReadOnly<MutableCompiledNamespaces>;
@@ -0,0 +1,16 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ *
8
+ */
9
+
10
+ import type { TRawValue, StyleRule, StyleXOptions } from './common-types';
11
+ export declare function convertStyleToClassName(
12
+ objEntry: [string, TRawValue],
13
+ pseudos: ReadonlyArray<string>,
14
+ atRules: ReadonlyArray<string>,
15
+ options: StyleXOptions,
16
+ ): StyleRule;
@@ -3,38 +3,29 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = convertToClassName;
6
+ exports.convertStyleToClassName = convertStyleToClassName;
7
7
  var _hash = _interopRequireDefault(require("./hash"));
8
8
  var _dashify = _interopRequireDefault(require("./utils/dashify"));
9
9
  var _transformValue = _interopRequireDefault(require("./transform-value"));
10
- var _generateCssRule = _interopRequireDefault(require("./generate-css-rule"));
10
+ var _generateCssRule = require("./generate-css-rule");
11
+ var _defaultOptions = require("./utils/default-options");
12
+ var _objectUtils = require("./utils/object-utils");
11
13
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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 function takes a single style rule and transforms it into a CSS rule.
22
- // [color: 'red'] => ['color', 'classname-for-color-red', CSSRULE{ltr, rtl, priority}]
23
- //
24
- // It converts the camelCased style key to a dash-separated key.
25
- // Handles RTL-flipping
26
- // Hashes to get a className
27
- // Returns the final key, className a CSS Rule
28
- function convertToClassName(objEntry, pseudo) {
29
- let {
30
- stylexSheetName = '<>',
14
+ function convertStyleToClassName(objEntry, pseudos, atRules) {
15
+ let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : _defaultOptions.defaultOptions;
16
+ const {
31
17
  classNamePrefix = 'x'
32
- } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
18
+ } = options;
33
19
  const [key, rawValue] = objEntry;
34
20
  const dashedKey = (0, _dashify.default)(key);
35
- const value = Array.isArray(rawValue) ? rawValue.map(eachValue => (0, _transformValue.default)(key, eachValue)) : (0, _transformValue.default)(key, rawValue);
36
- const stringToHash = Array.isArray(value) ? dashedKey + value.join(', ') + (pseudo ?? 'null') : dashedKey + value + (pseudo ?? 'null');
37
- const className = classNamePrefix + (0, _hash.default)(stylexSheetName + stringToHash);
38
- const cssRules = (0, _generateCssRule.default)(className, dashedKey, value, pseudo);
21
+ const value = Array.isArray(rawValue) ? rawValue.map(eachValue => (0, _transformValue.default)(key, eachValue, options)) : (0, _transformValue.default)(key, rawValue, options);
22
+ const sortedPseudos = (0, _objectUtils.arraySort)(pseudos ?? []);
23
+ const sortedAtRules = (0, _objectUtils.arraySort)(atRules ?? []);
24
+ const atRuleHashString = sortedPseudos.join('');
25
+ const pseudoHashString = sortedAtRules.join('');
26
+ const modifierHashString = atRuleHashString + pseudoHashString || 'null';
27
+ const stringToHash = Array.isArray(value) ? dashedKey + value.join(', ') + modifierHashString : dashedKey + value + modifierHashString;
28
+ const className = classNamePrefix + (0, _hash.default)('<>' + stringToHash);
29
+ const cssRules = (0, _generateCssRule.generateRule)(className, dashedKey, value, pseudos, atRules);
39
30
  return [key, className, cssRules];
40
31
  }
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow strict
8
+ */
9
+
10
+ import type { TRawValue, StyleRule, StyleXOptions } from './common-types';
11
+ // This function takes a single style rule and transforms it into a CSS rule.
12
+ // [color: 'red'] => ['color', 'classname-for-color-red', CSSRULE{ltr, rtl, priority}]
13
+ //
14
+ // It converts the camelCased style key to a dash-separated key.
15
+ // Handles RTL-flipping
16
+ // Hashes to get a className
17
+ // Returns the final key, className a CSS Rule
18
+ declare export function convertStyleToClassName(
19
+ objEntry: [string, TRawValue],
20
+ pseudos: $ReadOnlyArray<string>,
21
+ atRules: $ReadOnlyArray<string>,
22
+ options: StyleXOptions,
23
+ ): StyleRule;
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ *
8
+ */
9
+
10
+ import type { InjectableStyle } from './common-types';
11
+ export declare function generateRule(
12
+ className: string,
13
+ key: string,
14
+ value: string | ReadonlyArray<string>,
15
+ pseudos: ReadonlyArray<string>,
16
+ atRules: ReadonlyArray<string>,
17
+ ): InjectableStyle;
@@ -3,62 +3,23 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = generateCSSRule;
6
+ exports.generateRule = generateRule;
7
7
  var _generateLtr = _interopRequireDefault(require("./physical-rtl/generate-ltr"));
8
8
  var _generateRtl = _interopRequireDefault(require("./physical-rtl/generate-rtl"));
9
- var _genCSSRule = _interopRequireDefault(require("./utils/genCSSRule"));
9
+ var _genCSSRule = require("./utils/genCSSRule");
10
+ var _propertyPriorities = _interopRequireDefault(require("./utils/property-priorities"));
10
11
  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
- function generateCSSRule(className, key, value, pseudo) {
12
+ function generateRule(className, key, value, pseudos, atRules) {
21
13
  const pairs = Array.isArray(value) ? value.map(eachValue => [key, eachValue]) : [[key, value]];
22
14
  const ltrPairs = pairs.map(_generateLtr.default);
23
15
  const ltrDecls = ltrPairs.map(pair => pair.join(':')).join(';');
24
16
  const rtlDecls = pairs.map(_generateRtl.default).filter(Boolean).map(pair => pair.join(':')).join(';');
25
- const ltrRule = (0, _genCSSRule.default)(className, ltrDecls, pseudo);
26
- const rtlRule = !rtlDecls ? null : (0, _genCSSRule.default)(className, rtlDecls, pseudo);
27
- let priority = 1;
28
- if (pseudo != null) {
29
- if (pseudo[0] === '@') {
30
- priority = 2;
31
- } else if (pseudo[0] === ':') {
32
- priority = pseudoPriorities[pseudo] ?? 2;
33
- if (pseudo.startsWith(':nth-child')) {
34
- priority = 6;
35
- }
36
- if (pseudo.startsWith(':nth-of-type')) {
37
- priority = 7;
38
- }
39
- }
40
- }
41
- if (key.toLowerCase().includes('left') || key.toLowerCase().includes('right')) {
42
- // Bump priority for physical left/right values.
43
- priority += 0.1;
44
- }
17
+ const ltrRule = (0, _genCSSRule.genCSSRule)(className, ltrDecls, pseudos, atRules);
18
+ const rtlRule = !rtlDecls ? null : (0, _genCSSRule.genCSSRule)(className, rtlDecls, pseudos, atRules);
19
+ const priority = (0, _propertyPriorities.default)(key) + pseudos.map(_propertyPriorities.default).reduce((a, b) => a + b, 0) + atRules.map(_propertyPriorities.default).reduce((a, b) => a + b, 0);
45
20
  return {
46
21
  priority,
47
22
  ltr: ltrRule,
48
23
  rtl: rtlRule
49
24
  };
50
- }
51
- const pseudoPriorities = {
52
- // Might become unsupported:
53
- ':first-child': 3,
54
- ':last-child': 4,
55
- ':only-child': 5,
56
- ':nth-child': 6,
57
- ':nth-of-type': 7,
58
- ':hover': 8,
59
- ':focus': 9,
60
- ':active': 10,
61
- ':disabled': 11,
62
- '::placeholder': 12,
63
- '::thumb': 13
64
- };
25
+ }
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow strict
8
+ */
9
+
10
+ import type { InjectableStyle } from './common-types';
11
+ declare export function generateRule(
12
+ className: string,
13
+ key: string,
14
+ value: string | $ReadOnlyArray<string>,
15
+ pseudos: $ReadOnlyArray<string>,
16
+ atRules: $ReadOnlyArray<string>,
17
+ ): InjectableStyle;
package/lib/hash.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ *
8
+ */
9
+
10
+ declare const $$EXPORT_DEFAULT_DECLARATION$$: (str: string) => string;
11
+ export default $$EXPORT_DEFAULT_DECLARATION$$;
package/lib/hash.js CHANGED
@@ -4,31 +4,8 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = 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
- /* eslint-disable default-case */
17
- /* eslint-disable no-fallthrough */
18
-
19
- /**
20
- * JS Implementation of MurmurHash2
21
- *
22
- * @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
23
- * @see http://github.com/garycourt/murmurhash-js
24
- * @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
25
- * @see http://sites.google.com/site/murmurhash/
26
- *
27
- * @param {string} str ASCII only
28
- * @param {number} seed Positive integer only
29
- * @return {number} 32-bit positive integer hash
30
- */
31
- function murmurhash2_32_gc(str, seed) {
7
+ function murmurhash2_32_gc(str) {
8
+ let seed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
32
9
  let l = str.length,
33
10
  h = seed ^ l,
34
11
  i = 0,
@@ -57,5 +34,4 @@ function murmurhash2_32_gc(str, seed) {
57
34
  return h >>> 0;
58
35
  }
59
36
  const hash = str => murmurhash2_32_gc(str, 1).toString(36);
60
- var _default = hash;
61
- exports.default = _default;
37
+ var _default = exports.default = hash;
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @flow strict
8
+ */
9
+
10
+ declare export default (str: string) => string;
package/lib/index.d.ts CHANGED
@@ -3,91 +3,48 @@
3
3
  *
4
4
  * This source code is licensed under the MIT license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
+ *
7
+ *
6
8
  */
7
9
 
8
- export type TRawValue = number | string | Array<number | string>;
9
-
10
- export type TStyleValue = number | string | Array<number | string>;
11
- export type TNestableStyleValue =
12
- | TStyleValue
13
- | { readonly [key: string]: TStyleValue };
14
-
15
- export type RawStyles = $ReadOnly<{
16
- [key: string]: TNestableStyleValue;
17
- }>;
18
-
19
- export type InjectableStyle = {
20
- readonly priority: number;
21
- readonly ltr: string;
22
- readonly rtl?: string;
23
- };
24
-
25
- export type StyleRule = readonly [string, string, InjectableStyle];
26
-
27
- export type CompiledStyles = {
28
- readonly [key: string]: string | null;
29
- readonly $$css: true;
30
- };
31
- export type MutableCompiledStyles = {
32
- [key: string]: string | null;
33
- $$css: true;
34
- };
35
-
36
- export type CompiledNamespaces = { readonly [key: string]: CompiledStyles };
37
-
38
- export type MutableCompiledNamespaces = {
39
- [key: string]: MutableCompiledStyles;
40
- };
41
-
42
- export function create<N extends { readonly [key: string]: RawStyles }>(
43
- namespaces: N,
44
- options?: StyleXOptions
45
- ): readonly [CompiledNamespaces, { readonly [key: string]: InjectableStyle }];
46
-
47
- export function keyframes<
48
- Obj extends {
49
- readonly [key: string]: { readonly [k: string]: string | number };
50
- }
51
- >(animation: Obj, options?: StyleXOptions): readonly [string, InjectableStyle];
52
-
53
- export function include(animation: {
54
- readonly [key: string]: string | number;
55
- }): readonly { [key: string]: IncludedStyles };
56
-
57
- export class IncludedStyles {
58
- astNode: any;
59
- }
60
-
61
- export type StyleXOptions = {
62
- dev: boolean;
63
- test: boolean;
64
- stylexSheetName?: string | undefined;
65
- classNamePrefix: string;
66
- definedStylexCSSVariables?: { [key: string]: any };
67
- allowUnsafeProperties: boolean;
68
- [key: string]: any;
69
- };
70
-
71
- export function firstThatWorks<T>(...args: T[]): T[];
72
-
73
- export const messages: {
74
- ILLEGAL_ARGUMENT_LENGTH: string;
75
- NON_STATIC_VALUE: string;
76
- ESCAPED_STYLEX_VALUE: string;
77
- UNBOUND_STYLEX_CALL_VALUE: string;
78
- ONLY_TOP_LEVEL: string;
79
- NON_OBJECT_FOR_STYLEX_CALL: string;
80
- UNKNOWN_PROP_KEY: string;
81
- INVALID_PSEUDO: string;
82
- ILLEGAL_NAMESPACE_TYPE: string;
83
- UNKNOWN_NAMESPACE: string;
84
- ILLEGAL_NESTED_PSEUDO: string;
85
- ILLEGAL_PROP_VALUE: string;
86
- ILLEGAL_PROP_ARRAY_VALUE: string;
87
- ILLEGAL_NAMESPACE_VALUE: string;
88
- INVALID_SPREAD: string;
89
- LINT_UNCLOSED_FUNCTION: string;
90
- LOCAL_ONLY: string;
91
- UNEXPECTED_ARGUMENT: string;
92
- EXPECTED_FUNCTION_CALL: string;
10
+ export type {
11
+ RawStyles,
12
+ StyleRule,
13
+ TNestableStyleValue,
14
+ TRawValue,
15
+ TStyleValue,
16
+ } from './common-types';
17
+ import styleXCreateSet from './stylex-create';
18
+ import styleXDefineVars from './stylex-define-vars';
19
+ import styleXCreateTheme from './stylex-create-theme';
20
+ import stylexKeyframes from './stylex-keyframes';
21
+ import stylexInclude, {
22
+ IncludedStyles as _IncludedStyles,
23
+ } from './stylex-include';
24
+ import stylexFirstThatWorks from './stylex-first-that-works';
25
+ import hash from './hash';
26
+ import genFileBasedIdentifier from './utils/file-based-identifier';
27
+ import * as m from './messages';
28
+ export * as types from './types';
29
+ import type {
30
+ InjectableStyle as _InjectableStyle,
31
+ CompiledNamespaces as _CompiledNamespaces,
32
+ MutableCompiledNamespaces as _MutableCompiledNamespaces,
33
+ StyleXOptions as _StyleXOptions,
34
+ } from './common-types';
35
+ export declare const create: typeof styleXCreateSet;
36
+ export declare const defineVars: typeof styleXDefineVars;
37
+ export declare const createTheme: typeof styleXCreateTheme;
38
+ export declare const keyframes: typeof stylexKeyframes;
39
+ export declare const include: typeof stylexInclude;
40
+ export declare const utils: {
41
+ hash: typeof hash;
42
+ genFileBasedIdentifier: typeof genFileBasedIdentifier;
93
43
  };
44
+ export declare const messages: typeof m;
45
+ export declare const IncludedStyles: typeof _IncludedStyles;
46
+ export declare const firstThatWorks: typeof stylexFirstThatWorks;
47
+ export type InjectableStyle = _InjectableStyle;
48
+ export type CompiledNamespaces = _CompiledNamespaces;
49
+ export type MutableCompiledNamespaces = _MutableCompiledNamespaces;
50
+ export type StyleXOptions = _StyleXOptions;
package/lib/index.js CHANGED
@@ -3,38 +3,30 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.messages = exports.keyframes = exports.include = exports.firstThatWorks = exports.create = exports.IncludedStyles = void 0;
6
+ exports.utils = exports.types = exports.messages = exports.keyframes = exports.include = exports.firstThatWorks = exports.defineVars = exports.createTheme = exports.create = exports.IncludedStyles = void 0;
7
7
  var _stylexCreate = _interopRequireDefault(require("./stylex-create"));
8
+ var _stylexDefineVars = _interopRequireDefault(require("./stylex-define-vars"));
9
+ var _stylexCreateTheme = _interopRequireDefault(require("./stylex-create-theme"));
8
10
  var _stylexKeyframes = _interopRequireDefault(require("./stylex-keyframes"));
9
11
  var _stylexInclude = _interopRequireWildcard(require("./stylex-include"));
10
12
  var _stylexFirstThatWorks = _interopRequireDefault(require("./stylex-first-that-works"));
13
+ var _hash = _interopRequireDefault(require("./hash"));
14
+ var _fileBasedIdentifier = _interopRequireDefault(require("./utils/file-based-identifier"));
11
15
  var m = _interopRequireWildcard(require("./messages"));
16
+ var _types = _interopRequireWildcard(require("./types"));
17
+ exports.types = _types;
12
18
  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); }
13
19
  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; }
14
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
- /**
16
- * Copyright (c) Meta Platforms, Inc. and affiliates.
17
- *
18
- * This source code is licensed under the MIT license found in the
19
- * LICENSE file in the root directory of this source tree.
20
- *
21
- *
22
- */
23
-
24
- // All functions exposed from `stylex` are defined in a way that can be run
25
- // entirely in the browser.
26
-
27
- // These are the implementations of those functions.
28
-
29
- const create = _stylexCreate.default;
30
- exports.create = create;
31
- const keyframes = _stylexKeyframes.default;
32
- exports.keyframes = keyframes;
33
- const include = _stylexInclude.default;
34
- exports.include = include;
35
- const messages = m;
36
- exports.messages = messages;
37
- const IncludedStyles = _stylexInclude.IncludedStyles;
38
- exports.IncludedStyles = IncludedStyles;
39
- const firstThatWorks = _stylexFirstThatWorks.default;
40
- exports.firstThatWorks = firstThatWorks;
21
+ const create = exports.create = _stylexCreate.default;
22
+ const defineVars = exports.defineVars = _stylexDefineVars.default;
23
+ const createTheme = exports.createTheme = _stylexCreateTheme.default;
24
+ const keyframes = exports.keyframes = _stylexKeyframes.default;
25
+ const include = exports.include = _stylexInclude.default;
26
+ const utils = exports.utils = {
27
+ hash: _hash.default,
28
+ genFileBasedIdentifier: _fileBasedIdentifier.default
29
+ };
30
+ const messages = exports.messages = m;
31
+ const IncludedStyles = exports.IncludedStyles = _stylexInclude.IncludedStyles;
32
+ const firstThatWorks = exports.firstThatWorks = _stylexFirstThatWorks.default;