Add documentation for React Refresh and Styled Components transformer plugins (#429)

Author: Copilot

src/docs/guide/usage/transformer.md

@@ -5,6 +5,7 @@
 - Transforming TypeScript to ESNext.
 - Transforming React JSX to ESNext, with built-in React Refresh.
 - [TypeScript Isolated Declarations Emit](https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/#isolated-declarations) without using the TypeScript compiler.
+- Built-in support for popular plugins like styled-components.
 
 ## Installation
 
@@ -23,6 +24,159 @@ Rust usage example can be found [here](https://github.com/oxc-project/oxc/blob/m
 
 - [`unplugin-isolated-decl`](https://github.com/unplugin/unplugin-isolated-decl)
 
+## Built-in Plugins
+
+Oxc transformer includes built-in support for popular transformation plugins to improve developer experience and build performance.
+
+### React Refresh
+
+React Refresh (also known as React Fast Refresh) provides hot reloading capabilities for React components during development. This plugin automatically instruments React components to preserve state during development.
+
+#### Usage
+
+React Refresh is automatically enabled when transforming JSX code in development mode. To configure it explicitly:
+
+```javascript
+import { transform } from "oxc-transform";
+
+const result = transform("App.jsx", sourceCode, {
+  jsx: {
+    plugin: "react",
+    development: true, // Enables React Refresh
+    refresh: {
+      refreshReg: "$RefreshReg$",
+      refreshSig: "$RefreshSig$",
+      emitFullSignatures: true,
+    },
+  },
+});
+```
+
+#### Configuration Options
+
+| Option               | Type      | Default          | Description                                                 |
+| -------------------- | --------- | ---------------- | ----------------------------------------------------------- |
+| `refreshReg`         | `string`  | `"$RefreshReg$"` | The name of the function to register components for refresh |
+| `refreshSig`         | `string`  | `"$RefreshSig$"` | The name of the function to create signatures for refresh   |
+| `emitFullSignatures` | `boolean` | `false`          | Whether to emit full signatures for better debugging        |
+
+### Styled Components
+
+The styled-components plugin adds comprehensive support for styled-components with server-side rendering, style minification, and enhanced debugging capabilities.
+
+#### Basic Usage
+
+```javascript
+import { transform } from "oxc-transform";
+
+const result = transform("Component.jsx", sourceCode, {
+  plugins: {
+    styledComponents: {
+      displayName: true,
+      ssr: true,
+      fileName: true,
+      minify: true,
+    },
+  },
+});
+```
+
+#### Example
+
+**Input:**
+
+```jsx
+import styled from "styled-components";
+
+const Button = styled.div`
+  color: blue;
+  padding: 10px;
+`;
+```
+
+**Output (with default options):**
+
+```jsx
+import styled from "styled-components";
+
+const Button = styled.div.withConfig({
+  displayName: "Button",
+  componentId: "sc-1234567-0",
+})(["color:blue;padding:10px;"]);
+```
+
+#### Configuration Options
+
+##### Core Options
+
+| Option        | Type      | Default | Description                                                                         |
+| ------------- | --------- | ------- | ----------------------------------------------------------------------------------- |
+| `displayName` | `boolean` | `true`  | Enhances the attached CSS class name with component names for easier debugging      |
+| `ssr`         | `boolean` | `true`  | Adds unique component IDs to avoid checksum mismatches during server-side rendering |
+| `fileName`    | `boolean` | `true`  | Controls whether the displayName is prefixed with the filename                      |
+
+##### Template Literal Options
+
+| Option                      | Type      | Default | Description                                                                    |
+| --------------------------- | --------- | ------- | ------------------------------------------------------------------------------ |
+| `transpileTemplateLiterals` | `boolean` | `true`  | Converts template literals to a smaller representation for reduced bundle size |
+| `minify`                    | `boolean` | `true`  | Minifies CSS content by removing whitespace and comments                       |
+
+##### Advanced Options
+
+| Option                 | Type       | Default     | Description                                                   |
+| ---------------------- | ---------- | ----------- | ------------------------------------------------------------- |
+| `pure`                 | `boolean`  | `false`     | Adds `/*#__PURE__*/` comments for better tree-shaking         |
+| `namespace`            | `string`   | `undefined` | Adds a namespace prefix to component IDs                      |
+| `meaninglessFileNames` | `string[]` | `["index"]` | List of filenames considered meaningless for component naming |
+
+##### Not Yet Implemented
+
+| Option                | Type       | Default | Description                           |
+| --------------------- | ---------- | ------- | ------------------------------------- |
+| `cssProp`             | `boolean`  | `true`  | JSX css prop transformation (planned) |
+| `topLevelImportPaths` | `string[]` | `[]`    | Custom import path handling (planned) |
+
+#### Supported Import Patterns
+
+The plugin works with various styled-components import patterns:
+
+```javascript
+// Default import
+import styled from "styled-components";
+
+// Namespace import
+import * as styled from "styled-components";
+
+// Named imports
+import { createGlobalStyle, css, keyframes } from "styled-components";
+
+// Native and primitives
+import styled from "styled-components/native";
+import styled from "styled-components/primitives";
+```
+
+#### Features
+
+**✅ Fully Supported:**
+
+- Display names for debugging
+- Filename prefixing in display names
+- Server-side rendering support
+- Template literal transpilation
+- CSS minification
+- Namespace prefixes
+- Pure annotations for call expressions
+
+**⚠️ Partially Supported:**
+
+- Pure annotations (call expressions only, not tagged templates due to bundler limitations)
+
+**❌ Not Yet Implemented:**
+
+- JSX css prop transformation
+- Custom import path handling
+
 <!-- Links -->
 
 [url-oxc-crate]: https://docs.rs/oxc