@stylexjs/babel-plugin 0.2.0-beta.25 → 0.2.0-beta.26

package/README.md

@@ -14,7 +14,7 @@ by passing them to the functions of the corresponding names within `@stylex/shar
 
 ## Babel Metadata
 
-The StyleX Babel plugin does more than transform Javascript (or Typescript) files. It also returns a list of injected styles. The way that such a value can be returned while transforming a JS file is by using Babel's `metadata` API.
+The StyleX Babel plugin does more than transform JavaScript (or Typescript) files. It also returns a list of injected styles. The way that such a value can be returned while transforming a JS file is by using Babel's `metadata` API.
 
 An example of this can be seen in some of the tests, but the result of using Babel's `transform(...)` function returns an object contains at least two keys:
 

package/flow_modules/@babel/core/index.js.flow

@@ -3,6 +3,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
+ *
  * @flow strict
  */
 

package/lib/index.js

@@ -540,33 +540,15 @@ const shorthands$2 = {
   animationRange: value => [['animationRange', value], ['animationRangeEnd', null], ['animationRangeStart', null]],
   background: value => [['background', value], ['backgroundAttachment', null], ['backgroundClip', null], ['backgroundColor', null], ['backgroundImage', null], ['backgroundOrigin', null], ...shorthands$2.backgroundPosition(null), ['backgroundRepeat', null], ['backgroundSize', null]],
   backgroundPosition: value => [['backgroundPosition', value], ['backgroundPositionX', null], ['backgroundPositionY', null]],
-  border: _rawValue => {
-    throw new Error('`border` shorthand is not supported. Use `borderWidth`, `borderStyle` and `borderColor` instead.');
-  },
-  borderInline: _rawValue => {
-    throw new Error('`borderInline` shorthand is not supported. Use `borderInlineWidth`, `borderInlineStyle` and `borderInlineColor` instead.');
-  },
-  borderBlock: _rawValue => {
-    throw new Error('`borderBlock` shorthand is not supported. Use `borderBlockWidth`, `borderBlockStyle` and `borderBlockColor` instead.');
-  },
-  borderTop: _rawValue => {
-    throw new Error(['`borderTop` is not supported.', 'Use `borderTopWidth`, `borderTopStyle` and `borderTopColor`,'].join(' '));
-  },
-  borderInlineEnd: _rawValue => {
-    throw new Error('`borderInlineEnd` shorthand is not supported. Use `borderInlineEndWidth`, `borderInlineEndStyle` and `borderInlineEndColor` instead.');
-  },
-  borderRight: _rawValue => {
-    throw new Error('`borderRight` shorthand is not supported. Use `borderRightWidth`, `borderRightStyle` and `borderRightColor` instead.');
-  },
-  borderBottom: _rawValue => {
-    throw new Error('`borderBottom` shorthand is not supported. Use `borderBottomWidth`, `borderBottomStyle` and `borderBottomColor` instead.');
-  },
-  borderInlineStart: _rawValue => {
-    throw new Error('`borderInlineStart` shorthand is not supported. Use `borderInlineStartWidth`, `borderInlineStartStyle` and `borderInlineStartColor` instead.');
-  },
-  borderLeft: _rawValue => {
-    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(' '));
-  },
+  border: rawValue => [['border', rawValue], ...shorthands$2.borderWidth(null), ...shorthands$2.borderStyle(null), ...shorthands$2.borderColor(null)],
+  borderInline: rawValue => [['borderInline', rawValue], ...shorthands$2.borderInlineWidth(null), ...shorthands$2.borderInlineStyle(null), ...shorthands$2.borderInlineColor(null)],
+  borderBlock: rawValue => [['borderBlock', rawValue], ...shorthands$2.borderBlockWidth(null), ...shorthands$2.borderBlockStyle(null), ...shorthands$2.borderBlockColor(null)],
+  borderTop: rawValue => [['borderTop', rawValue], ['borderTopWidth', null], ['borderTopStyle', null], ['borderTopColor', null]],
+  borderInlineEnd: rawValue => [['borderInlineEnd', rawValue], ...shorthands$2.borderInlineEndWidth(null), ...shorthands$2.borderInlineEndStyle(null), ...shorthands$2.borderInlineEndColor(null)],
+  borderRight: rawValue => [['borderRight', rawValue], ...shorthands$2.borderRightWidth(null), ...shorthands$2.borderRightStyle(null), ...shorthands$2.borderRightColor(null)],
+  borderBottom: rawValue => [['borderBottom', rawValue], ['borderBottomWidth', null], ['borderBottomStyle', null], ['borderBottomColor', null]],
+  borderInlineStart: _rawValue => [['borderInlineStart', null], ...shorthands$2.borderInlineStartWidth(null), ...shorthands$2.borderInlineStartStyle(null), ...shorthands$2.borderInlineStartColor(null)],
+  borderLeft: _rawValue => [['borderLeft', null], ...shorthands$2.borderLeftWidth(null), ...shorthands$2.borderLeftStyle(null), ...shorthands$2.borderLeftColor(null)],
   borderInlineWidth: rawValue => [['borderInlineWidth', rawValue], ['borderInlineStartWidth', null], ['borderLeftWidth', null], ['borderInlineEndWidth', null], ['borderRightWidth', null]],
   borderInlineStyle: rawValue => [['borderInlineStyle', rawValue], ['borderInlineStartStyle', null], ['borderLeftStyle', null], ['borderInlineEndStyle', null], ['borderRightStyle', null]],
   borderInlineColor: rawValue => [['borderInlineColor', rawValue], ['borderInlineStartColor', null], ['borderLeftColor', null], ['borderInlineEndColor', null], ['borderRightColor', null]],
@@ -1308,7 +1290,7 @@ var _normalizeValue = _interopRequireDefault$a(normalizeValue$1);
 function _interopRequireDefault$a(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function transformValue(key, rawValue) {
   const value = typeof rawValue === 'number' ? String(Math.round(rawValue * 10000) / 10000) + getNumberSuffix(key) : rawValue;
-  if (key === 'content' && typeof value === 'string') {
+  if ((key === 'content' || key === 'hyphenateCharacter' || key === 'hyphenate-character') && typeof value === 'string') {
     const val = value.trim();
     if (val.match(/^attr\([a-zA-Z0-9-]+\)$/)) {
       return val;
@@ -1330,7 +1312,7 @@ function getNumberSuffix(key) {
     return suffix;
   }
 }
-const unitlessNumberProperties = new Set(['animationIterationCount', 'aspectRatio', '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', 'scale']);
+const unitlessNumberProperties = new Set(['WebkitLineClamp', 'animationIterationCount', 'aspectRatio', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'counterSet', 'columnCount', 'flex', 'flexGrow', 'flexPositive', 'flexShrink', 'flexOrder', 'gridRow', 'gridColumn', 'fontWeight', 'hyphenateLimitChars', 'lineClamp', 'lineHeight', 'maskBorderOutset', 'maskBorderSlice', 'maskBorderWidth', 'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'fillOpacity', 'floodOpacity', 'rotate', 'scale', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth', 'scale', 'mathDepth']);
 const numberPropertySuffixes = {
   animationDelay: 'ms',
   animationDuration: 'ms',
@@ -1988,7 +1970,6 @@ longHandLogical.add('inset-inline-end');
 longHandPhysical.add('right');
 longHandLogical.add('clear');
 longHandLogical.add('float');
-longHandLogical.add('overlay');
 longHandLogical.add('position');
 longHandLogical.add('z-index');
 longHandLogical.add('ruby-align');
@@ -2018,14 +1999,8 @@ longHandPhysical.add('scroll-padding-left');
 longHandLogical.add('scroll-padding-inline-end');
 longHandPhysical.add('scroll-padding-right');
 longHandLogical.add('scroll-snap-align');
-longHandLogical.add('scroll-snap-coordinate');
-longHandLogical.add('scroll-snap-destination');
-longHandLogical.add('scroll-snap-points-x');
-longHandLogical.add('scroll-snap-points-y');
 longHandLogical.add('scroll-snap-stop');
 shorthandsOfLonghands.add('scroll-snap-type');
-longHandLogical.add('scroll-snap-type-x');
-longHandLogical.add('scroll-snap-type-y');
 longHandLogical.add('scrollbar-color');
 longHandLogical.add('scrollbar-width');
 longHandLogical.add('shape-image-threshold');
@@ -2070,7 +2045,6 @@ longHandLogical.add('text-transform');
 longHandLogical.add('text-wrap');
 longHandLogical.add('white-space');
 longHandLogical.add('white-space-collapse');
-longHandLogical.add('white-space-trim');
 longHandLogical.add('word-break');
 longHandLogical.add('word-spacing');
 longHandLogical.add('word-wrap');
@@ -2085,7 +2059,6 @@ longHandLogical.add('transform-origin');
 longHandLogical.add('transform-style');
 longHandLogical.add('translate');
 shorthandsOfLonghands.add('transition');
-longHandLogical.add('transition-behavior');
 longHandLogical.add('transition-delay');
 longHandLogical.add('transition-duration');
 longHandLogical.add('transition-property');
@@ -3165,6 +3138,9 @@ function isStatement(path, props) {
 function isStringLiteral(path, props) {
   return path.isStringLiteral(props);
 }
+function isTSAsExpression(path, props) {
+  return path.isTSAsExpression(props);
+}
 function isTaggedTemplateExpression(path, props) {
   return path.isTaggedTemplateExpression(props);
 }
@@ -3320,6 +3296,14 @@ function _evaluate(path, state) {
       return state.functions.identifiers[name];
     }
   }
+  if (isTSAsExpression(path)) {
+    const expr = path.get('expression');
+    return evaluateCached(expr, state);
+  }
+  if (path.node.type === 'TSSatisfiesExpression') {
+    const expr = path.get('expression');
+    return evaluateCached(expr, state);
+  }
   if (isSequenceExpression(path)) {
     const exprs = path.get('expressions');
     return evaluateCached(exprs[exprs.length - 1], state);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/babel-plugin",
-  "version": "0.2.0-beta.25",
+  "version": "0.2.0-beta.26",
   "description": "StyleX babel plugin.",
   "main": "lib/index.js",
   "repository": "https://github.com/facebook/stylex",
@@ -12,7 +12,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@stylexjs/shared": "0.2.0-beta.25"
+    "@stylexjs/shared": "0.2.0-beta.26"
   },
   "peerDependencies": {
     "@babel/core": "^7.19.6",