AI instruction sharing

[BMCwebdev]

So like everyone else I've been using AI tools more and more this past year while working. One help has been getting the first rough draft of a unit test started using AI. To that end I have saved in either memory, or instruction file, some instructions on how to write unit test for components using StyleX. I'll share a bit below. I am wondering if anyone in the community had more to share or if there was a desire to gather these someplace.

## StyleX Class Pattern 

StyleX class naming follows a predictable pattern: `ComponentName__styleObjectName.styleKey`

The pattern consists of:

- `ComponentName`: Matches the file name (e.g., `MultiSelect.tsx` → `MultiSelect`)
- `styleObjectName`: Matches the variable name in code (e.g., `const styles = ...` → `styles`)
- `styleKey`: Matches the key in the stylex.create object
- `__` and `.` are separator characters added by StyleX itself

## StyleX Examples

```typescript
// In MultiSelect.tsx
const styles = stylex.create({
  inputWrapper: { ... }
});
// → MultiSelect__styles.inputWrapper

const buttonStyles = stylex.create({
  container: { ... }
});
// → MultiSelect__buttonStyles.container

const myCustomCSS = stylex.create({
  specialBox: { ... }
});
// → MultiSelect__myCustomCSS.specialBox
```

[necolas]

I don't know why you'd prompt an LLM with StyleX debug classnames, but they've been removed in the latest release anyway

[BMCwebdev]

Ahh nuts :-)
Though I myself never set up the use of the debug classnames, I believe they were probably coming from my use of the vite-plugin-stylex in my vitest.config. I mention why I was using them (only for testing) down below the next comment.

[zaydek]

@BMCwebdev I'm curious what you are testing. It's also not obvious to me what your end goal is but I'd be curious to learn more. Are you simply trying to ensure that class name generation, etc. is consistent between builds or something?

[BMCwebdev]

I'm using the debug classnames because they are a consistent pattern that I can rely on for unit testing only. They are not in production.

Instead of testing for specific styles or snapshots, I'm content to know that when a certain behavior or logic is triggered that the appropriate classname is applied to the element.

For example. Say I have a button component.

<button
  {...stylex.props(
    buttonStyles.base,
    isDisabled && buttonStyles.disabled,
  )}
>

I would want to make sure in the unit test, after triggering a reason for the button to be disabled, that the classname of Button__buttonStyles.disabled is present.