Add opt-in compressed class names

packages/@stylexjs/babel-plugin/__tests__/transform-stylex-create-test.js

@@ -5318,6 +5318,128 @@ describe('@stylexjs/babel-plugin', () => {
       });
     });
 
+    describe('options `enableCompressedClassnames:true`', () => {
+      test('uses short names for simple declarations and hashes the rest', () => {
+        const { code, metadata } = transform(
+          `
+            import * as stylex from '@stylexjs/stylex';
+            export const styles = stylex.create({
+              root: {
+                margin: 0,
+                marginTop: '4px',
+                paddingTop: '16px',
+                display: 'flex',
+                position: 'absolute',
+                opacity: 0.5,
+                color: '#fff',
+                animationTimeline: 'auto',
+                ':hover': {
+                  marginBottom: 0,
+                },
+              },
+            });
+          `,
+          { enableCompressedClassnames: true },
+        );
+
+        expect(code).toMatchInlineSnapshot(`
+          "import * as stylex from '@stylexjs/stylex';
+          export const styles = {
+            root: {
+              m: "m0",
+              mt: "mt4",
+              pt: "pt16",
+              d: "d-f",
+              po: "po-a",
+              op: "op0d5",
+              c: "c-fff",
+              kjjejL: "xyuw9oy",
+              kCBjJz: "x2xz49s",
+              $$css: true
+            }
+          };"
+        `);
+        expect(metadata).toMatchInlineSnapshot(`
+          {
+            "stylex": [
+              [
+                "m0",
+                {
+                  "ltr": ".m0{margin:0}",
+                  "rtl": null,
+                },
+                1000,
+              ],
+              [
+                "mt4",
+                {
+                  "ltr": ".mt4{margin-top:4px}",
+                  "rtl": null,
+                },
+                4000,
+              ],
+              [
+                "pt16",
+                {
+                  "ltr": ".pt16{padding-top:16px}",
+                  "rtl": null,
+                },
+                4000,
+              ],
+              [
+                "d-f",
+                {
+                  "ltr": ".d-f{display:flex}",
+                  "rtl": null,
+                },
+                3000,
+              ],
+              [
+                "po-a",
+                {
+                  "ltr": ".po-a{position:absolute}",
+                  "rtl": null,
+                },
+                3000,
+              ],
+              [
+                "op0d5",
+                {
+                  "ltr": ".op0d5{opacity:.5}",
+                  "rtl": null,
+                },
+                3000,
+              ],
+              [
+                "c-fff",
+                {
+                  "ltr": ".c-fff{color:#fff}",
+                  "rtl": null,
+                },
+                3000,
+              ],
+              [
+                "xyuw9oy",
+                {
+                  "ltr": ".xyuw9oy{animation-timeline:auto}",
+                  "rtl": null,
+                },
+                3000,
+              ],
+              [
+                "x2xz49s",
+                {
+                  "ltr": ".x2xz49s:hover{margin-bottom:0}",
+                  "rtl": null,
+                },
+                4130,
+              ],
+            ],
+          }
+        `);
+      });
+    });
+
     describe('options `debug:true`', () => {
       test('adds debug data', () => {
         const options = {

packages/@stylexjs/babel-plugin/src/shared/common-types.d.ts

@@ -43,6 +43,7 @@ export type StyleXOptions = Readonly<{
   env?: Readonly<{ [$$Key$$: string]: any }>;
   dev: boolean;
   propertyValidationMode?: 'throw' | 'warn' | 'silent';
+  enableCompressedClassnames?: null | undefined | boolean;
   enableDebugDataProp?: null | undefined | boolean;
   enableDevClassNames?: null | undefined | boolean;
   enableFontSizePxToRem?: null | undefined | boolean;

packages/@stylexjs/babel-plugin/src/shared/common-types.js

@@ -50,6 +50,7 @@ export type StyleXOptions = $ReadOnly<{
   env?: $ReadOnly<{ [string]: any }>,
   dev: boolean,
   propertyValidationMode?: 'throw' | 'warn' | 'silent',
+  enableCompressedClassnames?: ?boolean,
   enableDebugDataProp?: ?boolean,
   enableDevClassNames?: ?boolean,
   enableFontSizePxToRem?: ?boolean,

packages/@stylexjs/babel-plugin/src/shared/utils/__tests__/compressed-class-name-test.js

@@ -0,0 +1,70 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import getCompressedClassName, {
+  valueShorthands,
+} from '../compressed-class-name';
+import { propertyShorthands } from '../../property-shorthands';
+
+const compress = (
+  property: string,
+  value: string | $ReadOnlyArray<string>,
+  hasModifiers: boolean = false,
+  classNamePrefix: string = 'x',
+) => getCompressedClassName(property, value, hasModifiers, classNamePrefix);
+
+describe('compressed class names', () => {
+  test('compresses common numeric declarations', () => {
+    expect(compress('margin', '0')).toBe('m0');
+    expect(compress('margin', '4px')).toBe('m4');
+    expect(compress('paddingTop', '16px')).toBe('pt16');
+    expect(compress('width', '100%')).toBe('w100p');
+    expect(compress('opacity', '.5')).toBe('op0d5');
+    expect(compress('margin', '-4px')).toBe('m-4');
+  });
+
+  test('compresses common keyword declarations', () => {
+    expect(compress('display', 'flex')).toBe('d-f');
+    expect(compress('position', 'absolute')).toBe('po-a');
+    expect(compress('flexDirection', 'column-reverse')).toBe('fd-cr');
+    expect(compress('backgroundColor', 'red')).toBe('bg-r');
+    expect(compress('color', '#fff')).toBe('c-fff');
+  });
+
+  test('does not compress names longer than six characters', () => {
+    expect(compress('paddingTop', '1234px')).toBe('pt1234');
+    expect(compress('paddingTop', '12345px')).toBeNull();
+    expect(compress('backgroundColor', '#ffff')).toBeNull();
+  });
+
+  test('falls back for complex or potentially conflicting declarations', () => {
+    expect(compress('animationTimeline', 'auto')).toBeNull();
+    expect(compress('margin', 'var(--spacing)')).toBeNull();
+    expect(compress('margin', ['0', '4px'])).toBeNull();
+    expect(compress('margin', '4px', true)).toBeNull();
+    expect(compress('margin', '4')).toBeNull();
+    expect(compress('lineHeight', '4px')).toBeNull();
+    expect(compress('margin', '0', false, 'm')).toBeNull();
+    expect(compress('margin', '0', false, '')).toBeNull();
+  });
+
+  test('hardcoded names are unique and never longer than six characters', () => {
+    for (const [property, values] of Object.entries(valueShorthands)) {
+      const propertyShorthand = propertyShorthands[property];
+      expect(propertyShorthand).toBeDefined();
+
+      const suffixes = Object.values(values);
+      expect(new Set(suffixes).size).toBe(suffixes.length);
+      for (const suffix of suffixes) {
+        expect(`${propertyShorthand}-${suffix}`).toMatch(/^[a-z-]+$/);
+        expect(`${propertyShorthand}-${suffix}`.length).toBeLessThanOrEqual(6);
+      }
+    }
+  });
+});

packages/@stylexjs/babel-plugin/src/shared/utils/__tests__/convert-to-className-test.js

@@ -41,6 +41,31 @@ describe('convert-to-className test', () => {
     expect(debugClassName.startsWith('x')).toBe(true);
     expect(debugClassName.startsWith('margin-x')).toBe(false);
   });
+  test('uses a compressed classname when enabled and available', () => {
+    const options = {
+      classNamePrefix: 'x',
+      dev: false,
+      debug: false,
+      enableCompressedClassnames: true,
+      styleResolution: 'property-specificity',
+      test: false,
+    } as const;
+    const result = convertStyleToClassName(['margin', 4], [], [], [], options);
+    expect(result[1]).toBe('m4');
+    expect(result[2].ltr).toBe('.m4{margin:4px}');
+  });
+  test('uses compressed classnames in debug mode', () => {
+    const options = {
+      classNamePrefix: 'x',
+      dev: false,
+      debug: true,
+      enableCompressedClassnames: true,
+      styleResolution: 'property-specificity',
+      test: false,
+    } as const;
+    const result = convertStyleToClassName(['margin', 4], [], [], [], options);
+    expect(result[1]).toBe('m4');
+  });
   test('converts margin number to px', () => {
     expect(convert(['margin', 10])).toEqual('margin:10px');
   });