u

Author: Boshen

src/docs/guide/usage/transformer.md

@@ -54,11 +54,11 @@ const result = transform("App.jsx", sourceCode, {
 
 #### 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 |
+| 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
 
@@ -84,8 +84,9 @@ const result = transform("Component.jsx", sourceCode, {
 #### Example
 
 **Input:**
+
 ```jsx
-import styled from 'styled-components';
+import styled from "styled-components";
 
 const Button = styled.div`
   color: blue;
@@ -94,69 +95,71 @@ const Button = styled.div`
 ```
 
 **Output (with default options):**
+
 ```jsx
-import styled from 'styled-components';
+import styled from "styled-components";
 
 const Button = styled.div.withConfig({
   displayName: "Button",
-  componentId: "sc-1234567-0"
+  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 |
+| 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 |
+| 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 |
+| 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) |
+| 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';
+import styled from "styled-components";
 
 // Namespace import
-import * as styled from 'styled-components';
+import * as styled from "styled-components";
 
 // Named imports
-import { css, createGlobalStyle, keyframes } from 'styled-components';
+import { createGlobalStyle, css, keyframes } from "styled-components";
 
 // Native and primitives
-import styled from 'styled-components/native';
-import styled from 'styled-components/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
@@ -166,9 +169,11 @@ import styled from 'styled-components/primitives';
 - 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