feat: Allow "var(--" strings as values for all properties

packages/rollup-plugin/flow_modules/rollup/index.js

@@ -525,7 +525,7 @@ export type SequentialPluginHooks =
   | 'transform';
 
 export type ParallelPluginHooks = Exclude<
-  $Keys<FunctionPluginHooks> | $Keys<AddonHooks>,
+  $Keys<FunctionPluginHooks> | AddonHooks,
   FirstPluginHooks | SequentialPluginHooks,
 >;
 

packages/shared/src/physical-rtl/generate-ltr.js

@@ -7,13 +7,13 @@
  * @flow strict
  */
 
-const logicalToPhysical: $ReadOnly<{ [string]: string }> = {
+const logicalToPhysical: $ReadOnly<{ [string]: ?string }> = {
   start: 'left',
   end: 'right',
 };
 
 const propertyToLTR: $ReadOnly<{
-  [key: string]: ($ReadOnly<[string, string]>) => $ReadOnly<[string, string]>,
+  [key: string]: ?($ReadOnly<[string, string]>) => $ReadOnly<[string, string]>,
 }> = {
   'margin-start': ([_key, val]: $ReadOnly<[string, string]>) => [
     'margin-left',
@@ -122,8 +122,10 @@ export default function generateLTR(
   pair: $ReadOnly<[string, string]>,
 ): $ReadOnly<[string, string]> {
   const [key] = pair;
-  if (propertyToLTR[key]) {
-    return propertyToLTR[key](pair);
+
+  const property = propertyToLTR[key];
+  if (property) {
+    return property(pair);
   }
   return pair;
 }

packages/shared/src/physical-rtl/generate-rtl.js

@@ -9,7 +9,7 @@
 
 import parser from 'postcss-value-parser';
 
-const cursorFlip: $ReadOnly<{ [string]: string }> = {
+const cursorFlip: $ReadOnly<{ [string]: ?string }> = {
   'e-resize': 'w-resize',
   'w-resize': 'e-resize',
   'ne-resize': 'nw-resize',
@@ -98,7 +98,7 @@ const logicalToPhysical: $ReadOnly<{ [string]: ?string }> = {
 };
 
 const propertyToRTL: $ReadOnly<{
-  [key: string]: (
+  [key: string]: ?(
     $ReadOnly<[string, string]>,
   ) => $ReadOnly<[string, string]> | null,
 }> = {
@@ -181,8 +181,9 @@ const propertyToRTL: $ReadOnly<{
 export default function generateRTL([key, value]: $ReadOnly<
   [string, string],
 >): ?$ReadOnly<[string, string]> {
-  if (propertyToRTL[key]) {
-    return propertyToRTL[key]([key, value]);
+  const toRTLForKey = propertyToRTL[key];
+  if (toRTLForKey) {
+    return toRTLForKey([key, value]);
   }
   return null;
 }

packages/shared/src/preprocess-rules/basic-validation.js

@@ -63,8 +63,7 @@ function validateConditionalStyles(
   val: ConditionalStyles,
   conditions: $ReadOnlyArray<string> = [],
 ): void {
-  for (const key in val) {
-    const v = val[key];
+  for (const [key, v] of Object.entries(val)) {
     if (!(key.startsWith('@') || key.startsWith(':') || key === 'default')) {
       throw new Error(messages.INVALID_PSEUDO_OR_AT_RULE);
     }

packages/shared/src/transform-value.js

@@ -115,7 +115,7 @@ const unitlessNumberProperties = new Set([
 ]);
 
 // List of properties that have custom suffixes for numbers
-const numberPropertySuffixes: { +[key: string]: string } = {
+const numberPropertySuffixes: { +[key: string]: ?string } = {
   animationDelay: 'ms',
   animationDuration: 'ms',
   transitionDelay: 'ms',

packages/shared/src/utils/property-priorities.js

@@ -645,7 +645,7 @@ longHandLogical.add('touch-action');
 //   ':active': 170,
 // };
 
-export const PSEUDO_CLASS_PRIORITIES: $ReadOnly<{ [string]: number }> = {
+export const PSEUDO_CLASS_PRIORITIES: $ReadOnly<{ [string]: ?number }> = {
   ':is': 40,
   ':where': 40,
   ':not': 40,

packages/stylex/src/StyleXCSSTypes.js

@@ -100,7 +100,7 @@ type alignSelf =
   | 'safe center'
   | 'unsafe center'
   | all;
-type all = null | 'initial' | 'inherit' | 'unset';
+type all = null | 'initial' | 'inherit' | 'unset' | StringPrefix<'var(--'>;
 type animationDelay = time;
 type animationDirection = singleAnimationDirection;
 type animationDuration = time;