@stylexjs/shared 0.2.0-beta.20 → 0.2.0-beta.22

package/lib/{stylex-override-vars.d.ts → stylex-create-theme.d.ts}

@@ -8,7 +8,7 @@
  */
 
 import type { InjectableStyle, StyleXOptions } from './common-types';
-declare function styleXOverrideVars(
+declare function styleXCreateTheme(
   themeVars: {
     readonly __themeName__: string;
     readonly [$$Key$$: string]: string;
@@ -23,4 +23,4 @@ declare function styleXOverrideVars(
   { $$css: true; readonly [$$Key$$: string]: string },
   { [$$Key$$: string]: InjectableStyle },
 ];
-export default styleXOverrideVars;
+export default styleXCreateTheme;

package/lib/{stylex-override-vars.js → stylex-create-theme.js}

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = styleXOverrideVars;
+exports.default = styleXCreateTheme;
 var _hash = _interopRequireDefault(require("./hash"));
 var _defaultOptions = require("./utils/default-options");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function styleXOverrideVars(themeVars, variables, options) {
-  if (typeof themeVars.__themeName__ !== "string") {
-    throw new Error("Can only override variables theme created with stylex.unstable_createVars().");
+function styleXCreateTheme(themeVars, variables, options) {
+  if (typeof themeVars.__themeName__ !== 'string') {
+    throw new Error('Can only override variables theme created with stylex.defineVars().');
   }
   const {
     classNamePrefix
@@ -22,13 +22,13 @@ function styleXOverrideVars(themeVars, variables, options) {
   const cssVariablesOverrideString = sortedKeys.map(key => {
     const varNameHash = themeVars[key].slice(4, -1);
     const value = variables[key];
-    if (varNameHash != null && value !== null && typeof value === "object") {
+    if (varNameHash != null && value !== null && typeof value === 'object') {
       if (value.default === undefined) {
-        throw new Error("Default value is not defined for " + key + " variable.");
+        throw new Error('Default value is not defined for ' + key + ' variable.');
       }
       const definedVarString = `${varNameHash}:${value.default};`;
       Object.keys(value).forEach(key => {
-        if (key.startsWith("@")) {
+        if (key.startsWith('@')) {
           const definedVarStringForAtRule = `${varNameHash}:${value[key]};`;
           if (atRules[key] == null) {
             atRules[key] = [definedVarStringForAtRule];
@@ -39,16 +39,16 @@ function styleXOverrideVars(themeVars, variables, options) {
       });
       return definedVarString;
     }
-    return varNameHash != null && typeof value !== "object" ? `${varNameHash}:${value};` : "";
-  }).join("");
+    return varNameHash != null && typeof value !== 'object' ? `${varNameHash}:${value};` : '';
+  }).join('');
   const sortedAtRules = Object.keys(atRules).sort();
   const atRulesStringForHash = sortedAtRules.map(atRule => {
-    return `${atRule}{${atRules[atRule].sort().join("")}}`;
-  }).join("");
+    return `${atRule}{${atRules[atRule].sort().join('')}}`;
+  }).join('');
   const overrideClassName = classNamePrefix + (0, _hash.default)(cssVariablesOverrideString + atRulesStringForHash);
   const atRulesCss = sortedAtRules.map(atRule => {
-    return `${atRule}{.${overrideClassName}{${atRules[atRule].join("")}}}`;
-  }).join("");
+    return `${atRule}{.${overrideClassName}{${atRules[atRule].join('')}}}`;
+  }).join('');
   return [{
     $$css: true,
     [themeVars.__themeName__]: overrideClassName

package/lib/{stylex-override-vars.js.flow → stylex-create-theme.js.flow}

@@ -12,7 +12,7 @@ import type { InjectableStyle, StyleXOptions } from './common-types';
 // It takes an object of variables with their values and the original set of variables to override
 // and returns a hashed className with variables overrides.
 //
-declare export default function styleXOverrideVars(
+declare export default function styleXCreateTheme(
   themeVars: { +__themeName__: string, +[string]: string },
   variables: { +[string]: string | { default: string, +[string]: string } },
   options?: StyleXOptions,

package/lib/stylex-create.js

@@ -32,7 +32,7 @@ function styleXCreateSet(namespaces) {
         const className = classNameTuples.map(_ref2 => {
           let [className] = _ref2;
           return className;
-        }).join(" ") || null;
+        }).join(' ') || null;
         namespaceObj[key] = className;
         for (const [className, injectable] of classNameTuples) {
           if (injectedStyles[className] == null) {

package/lib/{stylex-create-vars.d.ts → stylex-define-vars.d.ts}

@@ -12,18 +12,18 @@ type VarsObject<
   Vars extends {
     readonly [$$Key$$: string]:
       | string
-      | { default: string; readonly [$$Key$$: string]: string };
+      | { readonly default: string; readonly [$$Key$$: string]: string };
   },
 > = Readonly</**
  * > 15 |   ...$ObjMapConst<Vars, string>,
  *      |   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Unsupported feature: Translating "object types with complex spreads" is currently not supported.
  **/
 any>;
-declare function styleXCreateVars<
+declare function styleXDefineVars<
   Vars extends {
     readonly [$$Key$$: string]:
       | string
-      | { default: string; readonly [$$Key$$: string]: string };
+      | { readonly default: string; readonly [$$Key$$: string]: string };
   },
 >(
   variables: Vars,
@@ -33,4 +33,4 @@ declare function styleXCreateVars<
     }
   >,
 ): [VarsObject<Vars>, { css: string }];
-export default styleXCreateVars;
+export default styleXDefineVars;

package/lib/{stylex-create-vars.js → stylex-define-vars.js}

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = styleXCreateVars;
+exports.default = styleXDefineVars;
 var _hash = _interopRequireDefault(require("./hash"));
 var _objectUtils = require("./utils/object-utils");
 var _defaultOptions = require("./utils/default-options");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function styleXCreateVars(variables, options) {
+function styleXDefineVars(variables, options) {
   const {
     classNamePrefix,
     themeName
@@ -45,13 +45,13 @@ function constructCssVariablesString(variables) {
       nameHash,
       value
     }] = _ref2;
-    if (value !== null && typeof value === "object") {
+    if (value !== null && typeof value === 'object') {
       if (value.default === undefined) {
-        throw new Error("Default value is not defined for " + key + " variable.");
+        throw new Error('Default value is not defined for ' + key + ' variable.');
       }
       const definedVarString = `--${nameHash}:${value.default};`;
       Object.keys(value).forEach(key => {
-        if (key.startsWith("@")) {
+        if (key.startsWith('@')) {
           const definedVarStringForAtRule = `--${nameHash}:${value[key]};`;
           if (atRules[key] == null) {
             atRules[key] = [definedVarStringForAtRule];
@@ -63,10 +63,10 @@ function constructCssVariablesString(variables) {
       return definedVarString;
     }
     return `--${nameHash}:${value};`;
-  }).join("");
+  }).join('');
   const atRulesString = (0, _objectUtils.objEntries)(atRules).map(_ref3 => {
     let [atRule, varsArr] = _ref3;
-    return `${atRule}{:root{${varsArr.join("")}}}`;
-  }).join("");
-  return `:root{${varsString}}${atRulesString || ""}`;
+    return `${atRule}{:root{${varsArr.join('')}}}`;
+  }).join('');
+  return `:root{${varsString}}${atRulesString || ''}`;
 }

package/lib/{stylex-create-vars.js.flow → stylex-define-vars.js.flow}

@@ -10,7 +10,7 @@
 import type { StyleXOptions } from './common-types';
 
 type VarsObject<
-  Vars: { +[string]: string | { default: string, +[string]: string } },
+  Vars: { +[string]: string | { +default: string, +[string]: string } },
 > = $ReadOnly<{
   ...$ObjMapConst<Vars, string>,
   __themeName__: string,
@@ -18,9 +18,9 @@ type VarsObject<
 
 // Similar to `stylex.create` it takes an object of variables with their values
 // and returns a string after hashing it.
-declare export default function styleXCreateVars<
-  +Vars: {
-    +[string]: string | { default: string, +[string]: string },
+declare export default function styleXDefineVars<
+  Vars: {
+    +[string]: string | { +default: string, +[string]: string },
   },
 >(
   variables: Vars,

package/lib/stylex-keyframes.js

@@ -16,15 +16,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function styleXKeyframes(frames) {
   let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _defaultOptions.defaultOptions;
   const {
-    stylexSheetName = "<>",
-    classNamePrefix = "x"
+    stylexSheetName = '<>',
+    classNamePrefix = 'x'
   } = options;
   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());
   const ltrStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, _generateLtr.default));
   const rtlStyles = (0, _objectUtils.objMap)(expandedObject, frame => (0, _objectUtils.objMapEntry)(frame, entry => (0, _generateRtl.default)(entry) ?? entry));
   const ltrString = constructKeyframesObj(ltrStyles);
   const rtlString = constructKeyframesObj(rtlStyles);
-  const animationName = classNamePrefix + (0, _hash.default)(stylexSheetName + ltrString) + "-B";
+  const animationName = classNamePrefix + (0, _hash.default)(stylexSheetName + ltrString) + '-B';
   const ltr = `@keyframes ${animationName}{${ltrString}}`;
   const rtl = ltrString === rtlString ? null : `@keyframes ${animationName}{${rtlString}}`;
   return [animationName, {
@@ -36,7 +36,7 @@ function styleXKeyframes(frames) {
 function expandFrameShorthands(frame, options) {
   return (0, _objectUtils.objFromEntries)((0, _objectUtils.objEntries)(frame).flatMap(pair => (0, _index.default)(pair, options).map(_ref => {
     let [key, value] = _ref;
-    if (typeof value === "string" || typeof value === "number") {
+    if (typeof value === 'string' || typeof value === 'number') {
       return [key, value];
     }
     return null;
@@ -51,6 +51,6 @@ function constructKeyframesObj(frames) {
     return `${key}{${(0, _objectUtils.objEntries)(value).map(_ref4 => {
       let [k, v] = _ref4;
       return `${k}:${v};`;
-    }).join("")}}`;
-  }).join("");
+    }).join('')}}`;
+  }).join('');
 }

package/lib/transform-value.js

@@ -9,13 +9,13 @@ exports.timeUnits = exports.lengthUnits = void 0;
 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") {
+  const value = typeof rawValue === 'number' ? String(Math.round(rawValue * 10000) / 10000) + getNumberSuffix(key) : rawValue;
+  if (key === 'content' && typeof value === 'string') {
     const val = value.trim();
     if (val.match(/^attr\([a-zA-Z0-9-]+\)$/)) {
       return val;
     }
-    if (!(val.startsWith("\"") && val.endsWith("\"") || val.startsWith("'") && val.endsWith("'"))) {
+    if (!(val.startsWith('"') && val.endsWith('"') || val.startsWith("'") && val.endsWith("'"))) {
       return `"${val}"`;
     }
   }
@@ -23,24 +23,22 @@ function transformValue(key, rawValue) {
 }
 function getNumberSuffix(key) {
   if (unitlessNumberProperties.has(key)) {
-    return "";
+    return '';
   }
   const suffix = numberPropertySuffixes[key];
   if (suffix == null) {
-    return "px";
+    return 'px';
   } else {
     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"]);
+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 numberPropertySuffixes = {
-  animationDelay: "ms",
-  animationDuration: "ms",
-  transitionDelay: "ms",
-  transitionDuration: "ms",
-  voiceDuration: "ms"
+  animationDelay: 'ms',
+  animationDuration: 'ms',
+  transitionDelay: 'ms',
+  transitionDuration: 'ms',
+  voiceDuration: 'ms'
 };
-const timeUnits = new Set(Object.keys(numberPropertySuffixes));
-exports.timeUnits = timeUnits;
-const lengthUnits = new Set(["backgroundPositionX", "backgroundPositionY", "blockSize", "borderBlockEndWidth", "borderBlockStartWidth", "borderBlockWidth", "borderVerticalWidth", "borderVerticalWidth", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomWidth", "borderEndEndRadius", "borderEndStartRadius", "borderImageWidth", "borderInlineEndWidth", "borderEndWidth", "borderInlineStartWidth", "borderStartWidth", "borderInlineWidth", "borderHorizontalWidth", "borderLeftWidth", "borderRightWidth", "borderSpacing", "borderStartEndRadius", "borderStartStartRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderTopWidth", "bottom", "columnGap", "columnRuleWidth", "columnWidth", "containIntrinsicBlockSize", "containIntrinsicHeight", "containIntrinsicInlineSize", "containIntrinsicWidth", "flexBasis", "fontSize", "fontSmooth", "height", "inlineSize", "insetBlockEnd", "insetBlockStart", "insetInlineEnd", "insetInlineStart", "left", "letterSpacing", "marginBlockEnd", "marginBlockStart", "marginBottom", "marginInlineEnd", "marginEnd", "marginInlineStart", "marginStart", "marginLeft", "marginRight", "marginTop", "maskBorderOutset", "maskBorderWidth", "maxBlockSize", "maxHeight", "maxInlineSize", "maxWidth", "minBlockSize", "minHeight", "minInlineSize", "minWidth", "offsetDistance", "outlineOffset", "outlineWidth", "overflowClipMargin", "paddingBlockEnd", "paddingBlockStart", "paddingBottom", "paddingInlineEnd", "paddingEnd", "paddingInlineStart", "paddingStart", "paddingLeft", "paddingRight", "paddingTop", "perspective", "right", "rowGap", "scrollMarginBlockEnd", "scrollMarginBlockStart", "scrollMarginBottom", "scrollMarginInlineEnd", "scrollMarginInlineStart", "scrollMarginLeft", "scrollMarginRight", "scrollMarginTop", "scrollPaddingBlockEnd", "scrollPaddingBlockStart", "scrollPaddingBottom", "scrollPaddingInlineEnd", "scrollPaddingInlineStart", "scrollPaddingLeft", "scrollPaddingRight", "scrollPaddingTop", "scrollSnapMarginBottom", "scrollSnapMarginLeft", "scrollSnapMarginRight", "scrollSnapMarginTop", "shapeMargin", "tabSize", "textDecorationThickness", "textIndent", "textUnderlineOffset", "top", "transformOrigin", "translate", "verticalAlign", "width", "wordSpacing", "border", "borderBlock", "borderBlockEnd", "borderBlockStart", "borderBottom", "borderLeft", "borderRadius", "borderRight", "borderTop", "borderWidth", "columnRule", "containIntrinsicSize", "gap", "inset", "insetBlock", "insetInline", "margin", "marginBlock", "marginVertical", "marginInline", "marginHorizontal", "offset", "outline", "padding", "paddingBlock", "paddingVertical", "paddingInline", "paddingHorizontal", "scrollMargin", "scrollMarginBlock", "scrollMarginInline", "scrollPadding", "scrollPaddingBlock", "scrollPaddingInline", "scrollSnapMargin"]);
-exports.lengthUnits = lengthUnits;
+const timeUnits = exports.timeUnits = new Set(Object.keys(numberPropertySuffixes));
+const lengthUnits = exports.lengthUnits = new Set(['backgroundPositionX', 'backgroundPositionY', 'blockSize', 'borderBlockEndWidth', 'borderBlockStartWidth', 'borderBlockWidth', 'borderVerticalWidth', 'borderVerticalWidth', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomWidth', 'borderEndEndRadius', 'borderEndStartRadius', 'borderImageWidth', 'borderInlineEndWidth', 'borderEndWidth', 'borderInlineStartWidth', 'borderStartWidth', 'borderInlineWidth', 'borderHorizontalWidth', 'borderLeftWidth', 'borderRightWidth', 'borderSpacing', 'borderStartEndRadius', 'borderStartStartRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopWidth', 'bottom', 'columnGap', 'columnRuleWidth', 'columnWidth', 'containIntrinsicBlockSize', 'containIntrinsicHeight', 'containIntrinsicInlineSize', 'containIntrinsicWidth', 'flexBasis', 'fontSize', 'fontSmooth', 'height', 'inlineSize', 'insetBlockEnd', 'insetBlockStart', 'insetInlineEnd', 'insetInlineStart', 'left', 'letterSpacing', 'marginBlockEnd', 'marginBlockStart', 'marginBottom', 'marginInlineEnd', 'marginEnd', 'marginInlineStart', 'marginStart', 'marginLeft', 'marginRight', 'marginTop', 'maskBorderOutset', 'maskBorderWidth', 'maxBlockSize', 'maxHeight', 'maxInlineSize', 'maxWidth', 'minBlockSize', 'minHeight', 'minInlineSize', 'minWidth', 'offsetDistance', 'outlineOffset', 'outlineWidth', 'overflowClipMargin', 'paddingBlockEnd', 'paddingBlockStart', 'paddingBottom', 'paddingInlineEnd', 'paddingEnd', 'paddingInlineStart', 'paddingStart', 'paddingLeft', 'paddingRight', 'paddingTop', 'perspective', 'right', 'rowGap', 'scrollMarginBlockEnd', 'scrollMarginBlockStart', 'scrollMarginBottom', 'scrollMarginInlineEnd', 'scrollMarginInlineStart', 'scrollMarginLeft', 'scrollMarginRight', 'scrollMarginTop', 'scrollPaddingBlockEnd', 'scrollPaddingBlockStart', 'scrollPaddingBottom', 'scrollPaddingInlineEnd', 'scrollPaddingInlineStart', 'scrollPaddingLeft', 'scrollPaddingRight', 'scrollPaddingTop', 'scrollSnapMarginBottom', 'scrollSnapMarginLeft', 'scrollSnapMarginRight', 'scrollSnapMarginTop', 'shapeMargin', 'tabSize', 'textDecorationThickness', 'textIndent', 'textUnderlineOffset', 'top', 'transformOrigin', 'translate', 'verticalAlign', 'width', 'wordSpacing', 'border', 'borderBlock', 'borderBlockEnd', 'borderBlockStart', 'borderBottom', 'borderLeft', 'borderRadius', 'borderRight', 'borderTop', 'borderWidth', 'columnRule', 'containIntrinsicSize', 'gap', 'inset', 'insetBlock', 'insetInline', 'margin', 'marginBlock', 'marginVertical', 'marginInline', 'marginHorizontal', 'offset', 'outline', 'padding', 'paddingBlock', 'paddingVertical', 'paddingInline', 'paddingHorizontal', 'scrollMargin', 'scrollMarginBlock', 'scrollMarginInline', 'scrollPadding', 'scrollPaddingBlock', 'scrollPaddingInline', 'scrollSnapMargin']);

package/lib/types/index.d.ts

@@ -9,10 +9,7 @@
 
 type ValueWithDefault<T> =
   | T
-  | Readonly<{
-      readonly default: T;
-      readonly [$$Key$$: string]: ValueWithDefault<T>;
-    }>;
+  | Readonly<{ default: T; [$$Key$$: string]: ValueWithDefault<T> }>;
 type CSSSyntax =
   | '*'
   | '<length>'

package/lib/types/index.js

@@ -7,8 +7,8 @@ exports.url = exports.transformList = exports.transformFunction = exports.time =
 class CSSType {}
 exports.CSSType = CSSType;
 class Angle extends CSSType {
-  syntax = "<angle>";
-  static syntax = "<angle>";
+  syntax = '<angle>';
+  static syntax = '<angle>';
   constructor(value) {
     super();
     this.value = value;
@@ -18,10 +18,9 @@ class Angle extends CSSType {
   }
 }
 exports.Angle = Angle;
-const angle = Angle.create;
-exports.angle = angle;
+const angle = exports.angle = Angle.create;
 class Color extends CSSType {
-  syntax = "<color>";
+  syntax = '<color>';
   constructor(value) {
     super();
     this.value = value;
@@ -31,10 +30,9 @@ class Color extends CSSType {
   }
 }
 exports.Color = Color;
-const color = Color.create;
-exports.color = color;
+const color = exports.color = Color.create;
 class Url extends CSSType {
-  syntax = "<url>";
+  syntax = '<url>';
   constructor(value) {
     super();
     this.value = value;
@@ -44,10 +42,9 @@ class Url extends CSSType {
   }
 }
 exports.Url = Url;
-const url = Url.create;
-exports.url = url;
+const url = exports.url = Url.create;
 class Image extends Url {
-  syntax = "<image>";
+  syntax = '<image>';
   constructor(value) {
     super(value);
     this.value = value;
@@ -57,10 +54,9 @@ class Image extends Url {
   }
 }
 exports.Image = Image;
-const image = Image.create;
-exports.image = image;
+const image = exports.image = Image.create;
 class Integer extends CSSType {
-  syntax = "<integer>";
+  syntax = '<integer>';
   constructor(value) {
     super();
     this.value = value;
@@ -70,10 +66,9 @@ class Integer extends CSSType {
   }
 }
 exports.Integer = Integer;
-const integer = Integer.create;
-exports.integer = integer;
+const integer = exports.integer = Integer.create;
 class LengthPercentage extends CSSType {
-  syntax = "<length-percentage>";
+  syntax = '<length-percentage>';
   constructor(value) {
     super();
     this.value = value;
@@ -86,10 +81,9 @@ class LengthPercentage extends CSSType {
   }
 }
 exports.LengthPercentage = LengthPercentage;
-const lengthPercentage = LengthPercentage.createLength;
-exports.lengthPercentage = lengthPercentage;
+const lengthPercentage = exports.lengthPercentage = LengthPercentage.createLength;
 class Length extends LengthPercentage {
-  syntax = "<length>";
+  syntax = '<length>';
   constructor(value) {
     super(convertNumberToLength(value));
   }
@@ -98,10 +92,9 @@ class Length extends LengthPercentage {
   }
 }
 exports.Length = Length;
-const length = Length.create;
-exports.length = length;
+const length = exports.length = Length.create;
 class Percentage extends LengthPercentage {
-  syntax = "<percentage>";
+  syntax = '<percentage>';
   constructor(value) {
     super(convertNumberToPercentage(value));
   }
@@ -110,10 +103,9 @@ class Percentage extends LengthPercentage {
   }
 }
 exports.Percentage = Percentage;
-const percentage = Percentage.create;
-exports.percentage = percentage;
+const percentage = exports.percentage = Percentage.create;
 class Num extends CSSType {
-  syntax = "<number>";
+  syntax = '<number>';
   constructor(value) {
     super();
     this.value = value;
@@ -123,10 +115,9 @@ class Num extends CSSType {
   }
 }
 exports.Num = Num;
-const number = Num.create;
-exports.number = number;
+const number = exports.number = Num.create;
 class Resolution extends CSSType {
-  syntax = "<resolution>";
+  syntax = '<resolution>';
   constructor(value) {
     super();
     this.value = value;
@@ -136,10 +127,9 @@ class Resolution extends CSSType {
   }
 }
 exports.Resolution = Resolution;
-const resolution = Resolution.create;
-exports.resolution = resolution;
+const resolution = exports.resolution = Resolution.create;
 class Time extends CSSType {
-  syntax = "<time>";
+  syntax = '<time>';
   constructor(value) {
     super();
     this.value = value;
@@ -149,10 +139,9 @@ class Time extends CSSType {
   }
 }
 exports.Time = Time;
-const time = Time.create;
-exports.time = time;
+const time = exports.time = Time.create;
 class TransformFunction extends CSSType {
-  syntax = "<transform-function>";
+  syntax = '<transform-function>';
   constructor(value) {
     super();
     this.value = value;
@@ -162,10 +151,9 @@ class TransformFunction extends CSSType {
   }
 }
 exports.TransformFunction = TransformFunction;
-const transformFunction = TransformFunction.create;
-exports.transformFunction = transformFunction;
+const transformFunction = exports.transformFunction = TransformFunction.create;
 class TransformList extends CSSType {
-  syntax = "<transform-list>";
+  syntax = '<transform-list>';
   constructor(value) {
     super();
     this.value = value;
@@ -175,23 +163,22 @@ class TransformList extends CSSType {
   }
 }
 exports.TransformList = TransformList;
-const transformList = TransformList.create;
-exports.transformList = transformList;
+const transformList = exports.transformList = TransformList.create;
 const convertNumberToStringUsing = (transformNumber, defaultStr) => value => {
-  if (typeof value === "number") {
+  if (typeof value === 'number') {
     return transformNumber(value);
   }
-  if (typeof value === "string") {
+  if (typeof value === 'string') {
     return value;
   }
-  if (typeof value === "object") {
+  if (typeof value === 'object') {
     const {
       default: defaultValue,
       ...rest
     } = value;
     const defaultResult = convertNumberToLength(defaultValue);
     const result = {
-      default: typeof defaultResult === "string" ? defaultResult : defaultStr
+      default: typeof defaultResult === 'string' ? defaultResult : defaultStr
     };
     for (const [key, value] of Object.entries(rest)) {
       result[key] = convertNumberToLength(value);
@@ -200,5 +187,5 @@ const convertNumberToStringUsing = (transformNumber, defaultStr) => value => {
   }
   return value;
 };
-const convertNumberToLength = convertNumberToStringUsing(value => value === 0 ? "0" : `${value}px`, "0px");
-const convertNumberToPercentage = convertNumberToStringUsing(value => value === 0 ? "0" : `${value * 100}%`, "0");
+const convertNumberToLength = convertNumberToStringUsing(value => value === 0 ? '0' : `${value}px`, '0px');
+const convertNumberToPercentage = convertNumberToStringUsing(value => value === 0 ? '0' : `${value * 100}%`, '0');

package/lib/types/index.js.flow

@@ -22,8 +22,8 @@
 type ValueWithDefault<+T> =
   | T
   | $ReadOnly<{
-      +default: T,
-      +[string]: ValueWithDefault<T>,
+      default: T,
+      [string]: ValueWithDefault<T>,
     }>;
 
 type CSSSyntax =

package/lib/utils/dashify.js

@@ -5,5 +5,5 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = dashify;
 function dashify(str) {
-  return str.replace(/(^|[a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  return str.replace(/(^|[a-z])([A-Z])/g, '$1-$2').toLowerCase();
 }

package/lib/utils/default-options.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultOptions = void 0;
-const defaultOptions = {
+const defaultOptions = exports.defaultOptions = {
   dev: false,
   test: false,
-  classNamePrefix: "x",
-  styleResolution: "application-order"
-};
-exports.defaultOptions = defaultOptions;
+  classNamePrefix: 'x',
+  styleResolution: 'application-order'
+};

package/lib/utils/file-based-identifier.js

@@ -10,5 +10,5 @@ function genFileBasedIdentifier(_ref) {
     exportName,
     key
   } = _ref;
-  return `${fileName}//${exportName}${key != null ? `.${key}` : ""}`;
+  return `${fileName}//${exportName}${key != null ? `.${key}` : ''}`;
 }

package/lib/utils/genCSSRule.js

@@ -1,15 +1,15 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.genCSSRule = genCSSRule;
-const THUMB_VARIANTS = ["::-webkit-slider-thumb", "::-moz-range-thumb", "::-ms-thumb"];
+const THUMB_VARIANTS = ['::-webkit-slider-thumb', '::-moz-range-thumb', '::-ms-thumb'];
 function genCSSRule(className, decls, pseudos, atRules) {
-  const pseudo = pseudos.filter(p => p !== "::thumb").join("");
-  let selectorForAtRules = `.${className}` + atRules.map(() => `.${className}`).join("") + pseudo;
-  if (pseudos.includes("::thumb")) {
-    selectorForAtRules = THUMB_VARIANTS.map(suffix => selectorForAtRules + suffix).join(", ");
+  const pseudo = pseudos.filter(p => p !== '::thumb').join('');
+  let selectorForAtRules = `.${className}` + atRules.map(() => `.${className}`).join('') + pseudo;
+  if (pseudos.includes('::thumb')) {
+    selectorForAtRules = THUMB_VARIANTS.map(suffix => selectorForAtRules + suffix).join(', ');
   }
   return atRules.reduce((acc, atRule) => `${atRule}{${acc}}`, `${selectorForAtRules}{${decls}}`);
 }

package/lib/utils/normalize-value.js

@@ -1,4 +1,4 @@
-"use strict";
+'use strict';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -12,8 +12,9 @@ var _whitespace = _interopRequireDefault(require("./normalizers/whitespace"));
 var _zeroDimensions = _interopRequireDefault(require("./normalizers/zero-dimensions"));
 var _detectUnclosedFns = _interopRequireDefault(require("./normalizers/detect-unclosed-fns"));
 var _postcssValueParser = _interopRequireDefault(require("postcss-value-parser"));
+var _convertCamelCaseValues = _interopRequireDefault(require("./normalizers/convert-camel-case-values"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _fontSizePxToRem.default];
+const normalizers = [_detectUnclosedFns.default, _whitespace.default, _timings.default, _zeroDimensions.default, _leadingZero.default, _quotes.default, _fontSizePxToRem.default, _convertCamelCaseValues.default];
 function normalizeValue(value, key) {
   if (value == null) {
     return value;

package/lib/utils/normalizers/convert-camel-case-transition-props.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+declare function convertCamelCasedTransitionProps(
+  ast: PostCSSValueAST,
+  key: string,
+): PostCSSValueAST;
+export default convertCamelCasedTransitionProps;

package/lib/utils/normalizers/convert-camel-case-transition-props.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = convertCamelCasedTransitionProps;
+var _dashify = _interopRequireDefault(require("../dashify"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function convertCamelCasedTransitionProps(ast, key) {
+  if (key !== 'transitionProperty') {
+    return ast;
+  }
+  const nodes = ast.nodes;
+  if (!nodes) {
+    return ast;
+  }
+  nodes.forEach(node => {
+    if (node.type === 'word' && !node.value.startsWith('--')) {
+      node.value = (0, _dashify.default)(node.value);
+    }
+  });
+  return ast;
+}