fix: minify textContent

[wojtekmaj]

Shaves off 38 bytes from every bundle. .trim() isn't enough to actually minify CSS, so you end up with lots of redundant whitespace even after minification.

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR reduces bundle size by replacing multi-line CSS template literals (with .trim()) used for injected <style> elements with minified one-line CSS strings.

Changes:

• Minifies injected CSS in preventScrollMobileSafari by switching to a compact string literal.
• Minifies injected CSS for usePress’s touch-action rule by switching to a compact template literal.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
packages/react-aria/src/overlays/usePreventScroll.ts	Replaces multi-line injected CSS with a minified one-line CSS string.
packages/react-aria/src/interactions/usePress.ts	Replaces multi-line injected CSS with a minified one-line CSS template literal.

[snowystinger]

Thanks, looks like lint is failing

[1] /home/circleci/react-spectrum/packages/react-aria/src/interactions/usePress.ts
[1]   876:22  error  Operator '=' must be spaced  space-infix-ops
[1]   876:94  error  Missing semicolon            semi
[1] 
[1] /home/circleci/react-spectrum/packages/react-aria/src/overlays/usePreventScroll.ts
[1]   149:20  error  Operator '=' must be spaced  space-infix-ops
[1]   149:61  error  Missing semicolon            semi
[1] 
[1] ✖ 4 problems (4 errors, 0 warnings)
[1]   4 errors and 0 warnings potentially fixable with the `--fix` option.

[snowystinger]

Isn't that trim at runtime? So that shouldn't have affected bundle size to begin with, regardless of how many leading and trailing spaces there were. Honestly, I'm not even sure why trim was called. It would be more of an issue with the bundler/minimizer not being able to remove anything in the string in the first place since it's not doing code analysis inside the string.
I'm ok with the manual optimisation, though if we can get the tools to handle this for us, that'd be preferable.

[wojtekmaj]

Trim did what trim does - trimmed whitespace from either ends. Vite's minifier was smart enough to run trim at build time, so these strings were semi-optimized. No function could, however, just minify CSS as strings: indentation, useless semicolons.

[snowystinger]

Instead, I think we could handle this with a macro. Then we don't need to sacrifice readability and we get any smarts from css minifiers. It might be overkill given that we only do this twice and they are pretty small. @devongovett would appreciate your thoughts

import type {MacroContext} from '@parcel/macros';
import {transform} from 'lightningcss';

export function cssString(this: MacroContext | void, css: string): string {
  if ((this == null || this === globalThis) && process.env.NODE_ENV !== 'test') {
    throw new Error('The cssString macro must be imported with {type: "macro"}.');
  }

  try {
    let {code} = transform({
      filename: 'cssString.css',
      code: Buffer.from(css),
      minify: true,
      sourceMap: false
    });
    return code.toString();
  } catch (err) {
    throw new Error(`cssString macro: failed to parse or minify CSS: ${err}`);
  }
}

then call it like so:

    style.textContent = cssString(`
@layer {
  [${PRESSABLE_ATTRIBUTE}] {
    touch-action: pan-x pan-y pinch-zoom;
  }
}
    `);