From 4b4123cad53eea53e69fd3794fbfb96632ff261a Mon Sep 17 00:00:00 2001 From: Jesse Maltese Date: Fri, 31 Oct 2025 11:52:32 -0400 Subject: [PATCH 1/2] Add defineConsts tests --- .../perf/fixtures/create-complex.js | 67 +++++++++++++++++-- .../perf/fixtures/sizes.stylex.consts.js | 42 ++++++++++++ 2 files changed, 102 insertions(+), 7 deletions(-) create mode 100644 packages/benchmarks/perf/fixtures/sizes.stylex.consts.js diff --git a/packages/benchmarks/perf/fixtures/create-complex.js b/packages/benchmarks/perf/fixtures/create-complex.js index e523a77d4..0866e953f 100644 --- a/packages/benchmarks/perf/fixtures/create-complex.js +++ b/packages/benchmarks/perf/fixtures/create-complex.js @@ -6,11 +6,13 @@ */ import * as stylex from '@stylexjs/stylex'; +import { sizes } from './sizes.stylex'; export const styles = stylex.create({ root: { backgroundColor: 'transparent', borderWidth: 0, + borderRadius: sizes.borderRadiusMedium, color: { default: 'inherit', ':hover': 'black', @@ -19,9 +21,10 @@ export const styles = stylex.create({ display: 'inline-block', fontFamily: 'inherit', fontSize: 'inherit', + gap: sizes.gapSmall, lineHeight: 'inherit', - margin: 0, - padding: 0, + margin: sizes.marginTiny, + padding: sizes.paddingTiny, textAlign: 'inherit', textDecoration: { default: 'inherit', @@ -38,12 +41,17 @@ export const styles = stylex.create({ }, wrapper: { alignItems: 'center', - borderRadius: 4, + borderRadius: sizes.borderRadiusLarge, display: 'flex', + gap: sizes.gapMedium, height: 254, justifyContent: 'center', + margin: sizes.marginSmall, minHeight: 100, overflow: 'hidden', + padding: sizes.paddingMedium, + paddingBlock: sizes.paddingLarge, + paddingInline: sizes.paddingSmall, position: 'relative', textAlign: 'center', width: '100%', @@ -52,6 +60,7 @@ export const styles = stylex.create({ }, }, button: { + borderRadius: sizes.borderRadiusMedium, color: { default: 'var(--blue-link)', ':hover': { @@ -60,16 +69,38 @@ export const styles = stylex.create({ }, ':active': 'scale(0.9)', }, + height: sizes.buttonHeightMedium, + padding: sizes.paddingSmall, + paddingBlock: sizes.paddingTiny, + paddingInline: sizes.paddingMedium, + }, + buttonSmall: { + borderRadius: sizes.borderRadiusSmall, + height: sizes.buttonHeightSmall, + margin: sizes.marginTiny, + padding: sizes.paddingTiny, + paddingBlock: sizes.paddingTiny, + paddingInline: sizes.paddingSmall, + }, + buttonLarge: { + borderRadius: sizes.borderRadiusLarge, + height: sizes.buttonHeightLarge, + margin: sizes.marginSmall, + padding: sizes.paddingLarge, + paddingBlock: sizes.paddingMedium, + paddingInline: sizes.paddingLarge, }, linkUnderline: { backgroundColor: 'var(--primary-button-background)', - borderTopEndRadius: 1, - borderTopStartRadius: 1, + borderTopEndRadius: sizes.borderRadiusSmall, + borderTopStartRadius: sizes.borderRadiusSmall, bottom: 0, - end: 2, + end: sizes.paddingSmall, height: 3, + margin: sizes.marginTiny, + padding: sizes.paddingTiny, position: 'absolute', - start: 2, + start: sizes.paddingSmall, transform: 'scaleY(0)', transformOrigin: 'center bottom', transitionDuration: 'var(--fds-fast)', @@ -77,15 +108,34 @@ export const styles = stylex.create({ transitionTimingFunction: 'var(--fds-soft)', }, outerWithExpandedOnLargeScreensGlobalPanel: { + borderRadius: sizes.borderRadiusMedium, + gap: sizes.gapSmall, insetInlineStart: { default: 'var(--global-panel-width-expanded)', '@media (max-width: 1200px)': 'var(--global-panel-width)', }, + margin: sizes.marginMedium, + padding: sizes.paddingMedium, width: { default: 'calc(100% - var(--global-panel-width-expanded))', '@media (max-width: 1200px)': 'calc(100% - var(--global-panel-width))', }, }, + panel: { + borderRadius: sizes.borderRadiusLarge, + gap: sizes.gapMedium, + margin: sizes.marginLarge, + padding: sizes.paddingLarge, + paddingBlock: sizes.paddingMedium, + paddingInline: sizes.paddingLarge, + }, + panelHeader: { + borderRadius: sizes.borderRadiusMedium, + gap: sizes.gapSmall, + margin: sizes.marginSmall, + marginBlockEnd: sizes.marginMedium, + padding: sizes.paddingMedium, + }, dynamicHeight: (height) => ({ height }), dynamicPadding: (paddingTop, paddingBottom) => ({ paddingTop, @@ -98,4 +148,7 @@ export const styles = stylex.create({ dynamicLetterSpacing: (letterSpacing) => ({ letterSpacing }), dynamicTextTransform: (textTransform) => ({ textTransform }), dynamicTextDecoration: (textDecoration) => ({ textDecoration }), + dynamicBorderRadius: (borderRadius) => ({ borderRadius }), + dynamicMargin: (margin) => ({ margin }), + dynamicGap: (gap) => ({ gap }), }); diff --git a/packages/benchmarks/perf/fixtures/sizes.stylex.consts.js b/packages/benchmarks/perf/fixtures/sizes.stylex.consts.js new file mode 100644 index 000000000..eaed1df85 --- /dev/null +++ b/packages/benchmarks/perf/fixtures/sizes.stylex.consts.js @@ -0,0 +1,42 @@ +/** + * 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. + */ +import * as stylex from '@stylexjs/stylex'; + +const SemanticSizes = { + borderRadiusSmall: '0.25rem', + borderRadiusMedium: '0.5rem', + borderRadiusLarge: '0.75rem', + borderRadiusXLarge: '1rem', + paddingTiny: '0.25rem', + paddingSmall: '0.5rem', + paddingMedium: '1rem', + paddingLarge: '1.5rem', + paddingXLarge: '2rem', + marginTiny: '0.25rem', + marginSmall: '0.5rem', + marginMedium: '1rem', + marginLarge: '1.5rem', + marginXLarge: '2rem', + gapTiny: '0.25rem', + gapSmall: '0.5rem', + gapMedium: '1rem', + gapLarge: '1.5rem', + iconSizeSmall: '1rem', + iconSizeMedium: '1.5rem', + iconSizeLarge: '2rem', + buttonHeightSmall: '2rem', + buttonHeightMedium: '2.5rem', + buttonHeightLarge: '3rem', + inputHeightSmall: '2rem', + inputHeightMedium: '2.5rem', + inputHeightLarge: '3rem', + containerWidthSmall: '20rem', + containerWidthMedium: '40rem', + containerWidthLarge: '60rem', +}; + +export const sizes = stylex.defineConsts(SemanticSizes); From 2f1b408b1aad6d3e16aff382ac65ee2f69bd99b6 Mon Sep 17 00:00:00 2001 From: Jesse Maltese Date: Fri, 31 Oct 2025 11:56:25 -0400 Subject: [PATCH 2/2] Add defineConsts to the benchmark --- .../perf/fixtures/{sizes.stylex.consts.js => sizes.stylex.js} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/benchmarks/perf/fixtures/{sizes.stylex.consts.js => sizes.stylex.js} (100%) diff --git a/packages/benchmarks/perf/fixtures/sizes.stylex.consts.js b/packages/benchmarks/perf/fixtures/sizes.stylex.js similarity index 100% rename from packages/benchmarks/perf/fixtures/sizes.stylex.consts.js rename to packages/benchmarks/perf/fixtures/sizes.stylex.js