@stylexjs/shared 0.2.0-beta.8 → 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.
@@ -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 _expandShorthands = _interopRequireWildcard(require("./expand-shorthands"));
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 the shorthand properties are expanded.
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
- if (!key.startsWith(':') && !key.startsWith('@') && _expandShorthands.expandedKeys.includes(key)) {
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,10 +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
- if (!options.allowUnsafeProperties && _expandShorthands.BANNED_PROPERTIES[key]) {
93
- throw new Error(_expandShorthands.BANNED_PROPERTIES[key]);
94
- }
95
- return (0, _expandShorthands.default)([innerKey, innerValue]);
97
+ return (0, _index.default)([innerKey, innerValue], options);
96
98
  }))]];
97
99
  } else {
98
100
  if (value !== null && typeof value !== 'string' && typeof value !== 'number' && !Array.isArray(value)) {
@@ -101,10 +103,7 @@ function styleXCreateNamespace(style, options) {
101
103
  if (Array.isArray(value) && value.some(val => typeof val === 'object')) {
102
104
  throw new Error(messages.ILLEGAL_PROP_ARRAY_VALUE);
103
105
  }
104
- if (!options.allowUnsafeProperties && _expandShorthands.BANNED_PROPERTIES[key]) {
105
- throw new Error(_expandShorthands.BANNED_PROPERTIES[key]);
106
- }
107
- return (0, _expandShorthands.default)([key, value]);
106
+ return (0, _index.default)([key, value], options);
108
107
  }
109
108
  });
110
109
 
@@ -125,6 +124,8 @@ function styleXCreateNamespace(style, options) {
125
124
  for (const [innerKey, innerVal] of (0, _objectUtils.objEntries)(val)) {
126
125
  if (innerVal === null) {
127
126
  innerObj[innerKey] = null;
127
+ } else if (typeof innerVal === 'object' && !Array.isArray(innerVal)) {
128
+ throw new Error(messages.ILLEGAL_NESTED_PSEUDO);
128
129
  } else {
129
130
  const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([innerKey, innerVal], pseudo, options);
130
131
  innerObj[updatedKey] = className;
@@ -139,6 +140,9 @@ function styleXCreateNamespace(style, options) {
139
140
  if (pseudo !== 'default' && !pseudo.startsWith(':') && !pseudo.startsWith('@')) {
140
141
  throw new Error(messages.INVALID_PSEUDO);
141
142
  }
143
+ if (typeof innerVal === 'object' && !Array.isArray(innerVal)) {
144
+ throw new Error(messages.ILLEGAL_NESTED_PSEUDO);
145
+ }
142
146
  if (innerVal !== null) {
143
147
  const [updatedKey, className, cssRule] = (0, _convertToClassName.default)([propKey, innerVal], pseudo === 'default' ? undefined : pseudo, options);
144
148
  injectedStyles[updatedKey + pseudo] = [className, cssRule];
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = styleXKeyframes;
7
7
  var _hash = _interopRequireDefault(require("./hash"));
8
- var _expandShorthands = _interopRequireDefault(require("./expand-shorthands"));
8
+ var _index = _interopRequireDefault(require("./preprocess-rules/index"));
9
9
  var _generateLtr = _interopRequireDefault(require("./physical-rtl/generate-ltr"));
10
10
  var _generateRtl = _interopRequireDefault(require("./physical-rtl/generate-rtl"));
11
11
  var _transformValue = _interopRequireDefault(require("./transform-value"));
@@ -27,11 +27,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
27
27
  // It also expands shorthand properties to maintain parity with
28
28
  // `stylex.create`.
29
29
  function styleXKeyframes(frames) {
30
- let {
30
+ let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
31
+ const {
31
32
  stylexSheetName = '<>',
32
33
  classNamePrefix = 'x'
33
- } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
34
- const expandedObject = (0, _objectUtils.objMap)(frames, frame => _objectUtils.Pipe.create(frame).pipe(expandFrameShorthands).pipe(x => (0, _objectUtils.objMapKeys)(x, _dashify.default)).pipe(x => (0, _objectUtils.objMap)(x, (value, key) => (0, _transformValue.default)(key, value))).done());
34
+ } = options;
35
+ 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());
35
36
  const ltrStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, _generateLtr.default));
36
37
  const rtlStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, entry => (0, _generateRtl.default)(entry) ?? entry));
37
38
  const ltrString = constructKeyframesObj(ltrStyles);
@@ -47,16 +48,27 @@ function styleXKeyframes(frames) {
47
48
  priority: 1
48
49
  }];
49
50
  }
50
- function expandFrameShorthands(frame) {
51
- return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(frame).flatMap(pair => (0, _expandShorthands.default)(pair)));
51
+ function expandFrameShorthands(frame, options) {
52
+ return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(frame).flatMap(pair => (0, _index.default)(pair, options).map(_ref => {
53
+ let [key, value] = _ref;
54
+ if (typeof value === 'string' || typeof value === 'number') {
55
+ return [key, value];
56
+ }
57
+ return null;
58
+ }).filter(Boolean))
59
+ // Keyframes are not combined. The nulls can be skipped
60
+ .filter(_ref2 => {
61
+ let [key, value] = _ref2;
62
+ return value != null;
63
+ }));
52
64
  }
53
65
 
54
66
  // Create t
55
67
  function constructKeyframesObj(frames) {
56
- return (0, _objectUtils.objEntries)(frames).map(_ref => {
57
- let [key, value] = _ref;
58
- return `${key}{${(0, _objectUtils.objEntries)(value).map(_ref2 => {
59
- let [k, v] = _ref2;
68
+ return (0, _objectUtils.objEntries)(frames).map(_ref3 => {
69
+ let [key, value] = _ref3;
70
+ return `${key}{${(0, _objectUtils.objEntries)(value).map(_ref4 => {
71
+ let [k, v] = _ref4;
60
72
  return `${k}:${v};`;
61
73
  }).join('')}}`;
62
74
  }).join('');
@@ -0,0 +1,71 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
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
+ 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
+ exports.Rule = Rule;
30
+ class RawRule extends Rule {
31
+ constructor(key, value, psuedos, atRules) {
32
+ super();
33
+ this.key = key;
34
+ this.value = value;
35
+ this.psuedos = psuedos;
36
+ this.atRules = atRules;
37
+ }
38
+ }
39
+ exports.RawRule = RawRule;
40
+ class RawRuleList extends Rule {
41
+ constructor(rules) {
42
+ super();
43
+ this.rules = rules;
44
+ }
45
+ }
46
+ exports.RawRuleList = RawRuleList;
47
+ class RawRuleRTLTuple extends Rule {
48
+ constructor(rule1, rule2) {
49
+ super();
50
+ this.rules = [rule1, rule2];
51
+ }
52
+ }
53
+ exports.RawRuleRTLTuple = RawRuleRTLTuple;
54
+ class CompiledRule extends Rule {
55
+ constructor(key, value, psuedos, atRules, className) {
56
+ super();
57
+ this.key = key;
58
+ this.value = value;
59
+ this.psuedos = psuedos;
60
+ this.atRules = atRules;
61
+ this.className = className;
62
+ }
63
+ }
64
+ exports.CompiledRule = CompiledRule;
65
+ class CompiledRuleTuple2 extends Rule {
66
+ constructor(rule1, rule2) {
67
+ super();
68
+ this.rules = [rule1, rule2];
69
+ }
70
+ }
71
+ exports.CompiledRuleTuple2 = CompiledRuleTuple2;
@@ -27,6 +27,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
27
27
  // changes 500ms to 0.5s, then `LeadingZero` makes it .5s
28
28
  const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _fontSizePxToRem.default];
29
29
  function normalizeValue(value, key) {
30
+ if (value == null) {
31
+ return value;
32
+ }
30
33
  const parsedAST = (0, _postcssValueParser.default)(value);
31
34
  return normalizers.reduce((ast, fn) => fn(ast, key), parsedAST).toString();
32
35
  }
@@ -0,0 +1,116 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = getPriority;
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
+ const PRIORITIES = {
17
+ // These should never exist at runtime:
18
+ border: 1,
19
+ 'border-block-end': 2,
20
+ 'border-block-start': 2,
21
+ 'border-top': 2.1,
22
+ 'border-bottom': 2.1,
23
+ 'border-inline-end': 2,
24
+ 'border-inline-start': 2,
25
+ 'border-left': 2,
26
+ 'border-right': 2,
27
+ // End of never-exist-at-runtime properties.
28
+
29
+ // These are shorthands of shorthands:
30
+ grid: 2,
31
+ 'grid-area': 2,
32
+ // These are shorthands of final properties:
33
+ 'border-color': 3,
34
+ 'border-style': 3,
35
+ 'border-width': 3,
36
+ 'border-image': 3,
37
+ 'border-radius': 3,
38
+ animation: 3,
39
+ background: 3,
40
+ 'column-rule': 3,
41
+ columns: 3,
42
+ flex: 3,
43
+ 'flex-flow': 3,
44
+ font: 3,
45
+ gap: 3,
46
+ 'grid-column': 3,
47
+ 'grid-row': 3,
48
+ 'grid-template': 3,
49
+ 'list-style': 3,
50
+ margin: 3,
51
+ mask: 3,
52
+ offset: 3,
53
+ outline: 3,
54
+ overflow: 3,
55
+ padding: 3,
56
+ 'place-content': 3,
57
+ 'place-items': 3,
58
+ 'place-self': 3,
59
+ 'scroll-margin': 3,
60
+ 'scroll-padding': 3,
61
+ 'text-decoration': 3,
62
+ 'text-emphasis': 3,
63
+ transition: 3,
64
+ ':has': 4.5,
65
+ ':dir': 5,
66
+ ':lang': 5.1,
67
+ ':first-child': 5.2,
68
+ ':last-child': 5.3,
69
+ ':only-child': 5.4,
70
+ ':nth-child': 6,
71
+ ':nth-of-type': 6.1,
72
+ ':only-of-type': 6.2,
73
+ ':empty': 7,
74
+ ':link': 8,
75
+ ':any-link': 8.1,
76
+ ':target': 8.2,
77
+ ':visited': 8.3,
78
+ ':enabled': 9.1,
79
+ ':disabled': 9.2,
80
+ ':required': 9.3,
81
+ ':optional': 9.4,
82
+ ':read-only': 9.5,
83
+ ':read-write': 9.6,
84
+ ':placeholder-shown': 9.7,
85
+ ':default': 10,
86
+ ':checked': 10.1,
87
+ ':indeterminate': 10.1,
88
+ ':blank': 10.2,
89
+ ':valid': 10.3,
90
+ ':invalid': 10.4,
91
+ ':autofill': 11,
92
+ ':picture-in-picture': 12,
93
+ ':fullscreen': 12.1,
94
+ ':paused': 12.2,
95
+ ':playing': 12.3,
96
+ ':hover': 13,
97
+ ':focusWithin': 14,
98
+ ':focusVisible': 15,
99
+ ':focus': 16,
100
+ ':active': 17
101
+ };
102
+ function getPriority(key) {
103
+ if (key.startsWith('@supports')) {
104
+ return 20;
105
+ }
106
+ if (key.startsWith('@media')) {
107
+ return 21;
108
+ }
109
+ const prop = key.startsWith(':') && key.includes('(') ? key.slice(0, key.indexOf('(')) : key;
110
+ let priority = PRIORITIES[prop] ?? 4;
111
+ if (key.toLowerCase().includes('left') || key.toLowerCase().includes('right')) {
112
+ // Bump priority for physical left/right values.
113
+ priority += 0.1;
114
+ }
115
+ return priority;
116
+ }
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = splitValue;
7
+ var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
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
+
19
+ function printNode(node) {
20
+ switch (node.type) {
21
+ case 'word':
22
+ case 'string':
23
+ return `${node.value}`;
24
+ case 'function':
25
+ return `${node.value}(${node.nodes.map(printNode).join('')})`;
26
+ default:
27
+ return node.value;
28
+ }
29
+ }
30
+
31
+ // Using split(' ') Isn't enough bcause of values like calc.
32
+ function splitValue(str) {
33
+ if (str == null || typeof str === 'number') {
34
+ return [str];
35
+ }
36
+
37
+ // This will never happen, but keeping here for Flow.
38
+ if (Array.isArray(str)) {
39
+ return str;
40
+ }
41
+ const parsed = (0, _postcssValueParser.default)(str.trim());
42
+ const nodes = parsed.nodes.filter(node => node.type !== 'space' && node.type !== 'div').map(printNode);
43
+ if (nodes.length > 1 && nodes[nodes.length - 1].toLowerCase() === '!important') {
44
+ return nodes.slice(0, nodes.length - 1).map(node => node + ' !important');
45
+ }
46
+ return nodes;
47
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stylexjs/shared",
3
- "version": "0.2.0-beta.8",
3
+ "version": "0.2.0-beta.9",
4
4
  "description": "Shared Code for Stylex compile and runtime.",
5
5
  "main": "lib/index.js",
6
6
  "repository": "https://www.github.com/facebookexternal/stylex",