@stylexjs/shared 0.2.0-beta.25 → 0.2.0-beta.27

package/lib/preprocess-rules/application-order.d.ts

@@ -117,13 +117,13 @@ declare const shorthands: {
   animationRange: (value: TStyleValue) => TReturn;
   background: (value: TStyleValue) => TReturn;
   backgroundPosition: (value: TStyleValue) => TReturn;
-  border: (_rawValue: TStyleValue) => TReturn;
-  borderInline: (_rawValue: TStyleValue) => TReturn;
-  borderBlock: (_rawValue: TStyleValue) => TReturn;
-  borderTop: (_rawValue: TStyleValue) => TReturn;
-  borderInlineEnd: (_rawValue: TStyleValue) => TReturn;
-  borderRight: (_rawValue: TStyleValue) => TReturn;
-  borderBottom: (_rawValue: TStyleValue) => TReturn;
+  border: (rawValue: TStyleValue) => TReturn;
+  borderInline: (rawValue: TStyleValue) => TReturn;
+  borderBlock: (rawValue: TStyleValue) => TReturn;
+  borderTop: (rawValue: TStyleValue) => TReturn;
+  borderInlineEnd: (rawValue: TStyleValue) => TReturn;
+  borderRight: (rawValue: TStyleValue) => TReturn;
+  borderBottom: (rawValue: TStyleValue) => TReturn;
   borderInlineStart: (_rawValue: TStyleValue) => TReturn;
   borderLeft: (_rawValue: TStyleValue) => TReturn;
   borderInlineWidth: (rawValue: TStyleValue) => TReturn;

package/lib/preprocess-rules/application-order.js

@@ -14,33 +14,15 @@ const shorthands = {
   animationRange: value => [['animationRange', value], ['animationRangeEnd', null], ['animationRangeStart', null]],
   background: value => [['background', value], ['backgroundAttachment', null], ['backgroundClip', null], ['backgroundColor', null], ['backgroundImage', null], ['backgroundOrigin', null], ...shorthands.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.borderWidth(null), ...shorthands.borderStyle(null), ...shorthands.borderColor(null)],
+  borderInline: rawValue => [['borderInline', rawValue], ...shorthands.borderInlineWidth(null), ...shorthands.borderInlineStyle(null), ...shorthands.borderInlineColor(null)],
+  borderBlock: rawValue => [['borderBlock', rawValue], ...shorthands.borderBlockWidth(null), ...shorthands.borderBlockStyle(null), ...shorthands.borderBlockColor(null)],
+  borderTop: rawValue => [['borderTop', rawValue], ['borderTopWidth', null], ['borderTopStyle', null], ['borderTopColor', null]],
+  borderInlineEnd: rawValue => [['borderInlineEnd', rawValue], ...shorthands.borderInlineEndWidth(null), ...shorthands.borderInlineEndStyle(null), ...shorthands.borderInlineEndColor(null)],
+  borderRight: rawValue => [['borderRight', rawValue], ...shorthands.borderRightWidth(null), ...shorthands.borderRightStyle(null), ...shorthands.borderRightColor(null)],
+  borderBottom: rawValue => [['borderBottom', rawValue], ['borderBottomWidth', null], ['borderBottomStyle', null], ['borderBottomColor', null]],
+  borderInlineStart: _rawValue => [['borderInlineStart', null], ...shorthands.borderInlineStartWidth(null), ...shorthands.borderInlineStartStyle(null), ...shorthands.borderInlineStartColor(null)],
+  borderLeft: _rawValue => [['borderLeft', null], ...shorthands.borderLeftWidth(null), ...shorthands.borderLeftStyle(null), ...shorthands.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]],

package/lib/preprocess-rules/application-order.js.flow

@@ -68,13 +68,13 @@ declare const shorthands: {
   animationRange: (value: TStyleValue) => TReturn,
   background: (value: TStyleValue) => TReturn,
   backgroundPosition: (value: TStyleValue) => TReturn,
-  border: (_rawValue: TStyleValue) => TReturn,
-  borderInline: (_rawValue: TStyleValue) => TReturn,
-  borderBlock: (_rawValue: TStyleValue) => TReturn,
-  borderTop: (_rawValue: TStyleValue) => TReturn,
-  borderInlineEnd: (_rawValue: TStyleValue) => TReturn,
-  borderRight: (_rawValue: TStyleValue) => TReturn,
-  borderBottom: (_rawValue: TStyleValue) => TReturn,
+  border: (rawValue: TStyleValue) => TReturn,
+  borderInline: (rawValue: TStyleValue) => TReturn,
+  borderBlock: (rawValue: TStyleValue) => TReturn,
+  borderTop: (rawValue: TStyleValue) => TReturn,
+  borderInlineEnd: (rawValue: TStyleValue) => TReturn,
+  borderRight: (rawValue: TStyleValue) => TReturn,
+  borderBottom: (rawValue: TStyleValue) => TReturn,
   borderInlineStart: (_rawValue: TStyleValue) => TReturn,
   borderLeft: (_rawValue: TStyleValue) => TReturn,
   borderInlineWidth: (rawValue: TStyleValue) => TReturn,

package/lib/transform-value.js

@@ -10,7 +10,7 @@ var _normalizeValue = _interopRequireDefault(require("./utils/normalize-value"))
 function _interopRequireDefault(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;
@@ -32,7 +32,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',

package/lib/utils/property-priorities.js

@@ -334,7 +334,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');
@@ -364,14 +363,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');
@@ -416,7 +409,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');
@@ -431,7 +423,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');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stylexjs/shared",
-  "version": "0.2.0-beta.25",
+  "version": "0.2.0-beta.27",
   "main": "lib/index.js",
   "repository": "https://www.github.com/facebook/stylex",
   "license": "MIT",
@@ -13,7 +13,7 @@
     "postcss-value-parser": "^4.1.0"
   },
   "devDependencies": {
-    "@stylexjs/scripts": "0.2.0-beta.25"
+    "@stylexjs/scripts": "0.2.0-beta.27"
   },
   "jest": {
     "snapshotFormat": {