|
| 1 | +# AGENTS.md |
| 2 | + |
| 3 | +This file provides context and strict guidelines for autonomous coding agents (like Cursor, Copilot, or OpenCode) operating within this repository (`rsbuild-plugin-tailwindcss`). |
| 4 | + |
| 5 | +*(Note: No other `.cursorrules` or Copilot instruction files exist in this repository. This file serves as the single source of truth for agent behavior.)* |
| 6 | + |
| 7 | +--- |
| 8 | + |
| 9 | +## 🛠 Tech Stack Overview |
| 10 | +- **Package Manager**: `pnpm` (strictly use this; do not use npm or yarn). |
| 11 | +- **Core Frameworks**: Rsbuild plugin integrating Tailwind CSS v4, PostCSS, and Rslib. |
| 12 | +- **Language**: TypeScript (ES2023 target, ESM format). |
| 13 | +- **Linter & Formatter**: Biome. |
| 14 | +- **Testing**: Playwright (`@playwright/test`). |
| 15 | + |
| 16 | +--- |
| 17 | + |
| 18 | +## 🚀 Build, Lint, and Test Commands |
| 19 | + |
| 20 | +### Setup |
| 21 | +Ensure you run `pnpm install` first to install dependencies before executing any tasks. |
| 22 | + |
| 23 | +### Build & Dev |
| 24 | +- **Build the plugin**: `pnpm build` (runs Rslib to build the project into the `dist/` folder). |
| 25 | +- **Watch/Dev mode**: `pnpm dev` (rebuilds the plugin automatically on changes). |
| 26 | + |
| 27 | +### Linting and Formatting |
| 28 | +- **Check code**: `pnpm lint` (runs `biome check .`). |
| 29 | +- **Fix and format code**: `pnpm lint:write` (runs `biome check . --write`). |
| 30 | +- *Note:* Always run `pnpm lint:write` before concluding a task to ensure code styling matches the repo's Biome configuration. |
| 31 | + |
| 32 | +### Testing |
| 33 | +- **Run all tests**: `pnpm test` (uses Playwright with `--workers 1`). |
| 34 | +- **Run a single test file**: |
| 35 | + ```bash |
| 36 | + pnpm test test/basic/index.test.ts |
| 37 | + ``` |
| 38 | +- **Run a specific test case within a file**: |
| 39 | + ```bash |
| 40 | + pnpm test test/basic/index.test.ts -g "preflight base styles are applied" |
| 41 | + ``` |
| 42 | +- *Note:* Tests involve spinning up a temporary Rsbuild server and checking computed styles via a headless browser. |
| 43 | + |
| 44 | +--- |
| 45 | + |
| 46 | +## 🧑💻 Code Style & Conventions |
| 47 | + |
| 48 | +### 1. Imports and Modules |
| 49 | +- **ES Modules (ESM)**: The codebase strictly uses ESM. Use `import`/`export` syntax. |
| 50 | +- **Local Imports**: Always append the `.js` extension for local relative imports (e.g., `import { compile } from './compiler.js';`). |
| 51 | +- **Node Built-ins**: Use the `node:` prefix for all Node.js core modules (e.g., `import fs from 'node:fs';`, `import path from 'node:path';`). |
| 52 | +- **Type Imports**: Use `import type { ... }` exclusively for importing TypeScript interfaces and types to avoid runtime overhead. |
| 53 | +- **Biome Formatting**: Biome is configured to automatically organize imports. Let `pnpm lint:write` handle import sorting rather than doing it manually. |
| 54 | + |
| 55 | +### 2. Formatting (Biome) |
| 56 | +- Use **spaces** for indentation. |
| 57 | +- Use **single quotes** for strings (in JavaScript/TypeScript). |
| 58 | +- Do not spend time manually aligning or perfectly formatting code; rely on `pnpm lint:write` to format the code automatically after making changes. |
| 59 | + |
| 60 | +### 3. TypeScript & Types |
| 61 | +- Strict mode is enabled (`"strict": true`). |
| 62 | +- **Interfaces vs Types**: Prefer `interface` over `type` for defining options, configurations, and object structures. |
| 63 | +- **JSDoc**: Document public APIs, exported interfaces, and complex options using standard JSDoc comments (`/** ... */`). See `src/index.ts` for examples. |
| 64 | +- **Type Safety**: Avoid `any`. Use `unknown` or specific generics if type information is complex or unknown at compile time. |
| 65 | + |
| 66 | +### 4. Naming Conventions |
| 67 | +- Variables, functions, and properties: `camelCase`. |
| 68 | +- Interfaces, Types, and Classes: `PascalCase`. |
| 69 | +- Internal/Virtual file names and global constants: `UPPER_SNAKE_CASE` (e.g., `VIRTUAL_UTILITIES_ID`). |
| 70 | +- Boolean variables or methods: Prefix with `is`, `has`, or `should`. |
| 71 | + |
| 72 | +### 5. Error Handling & Logic |
| 73 | +- Throw clear, descriptive errors when configurations are missing or invalid, ensuring the user understands what went wrong. |
| 74 | +- For asynchronous file system operations, utilize async/await with `try/catch` where the error might bubble up or where specific recovery/fallback behavior is required. |
| 75 | +- If a build step fails inside the plugin, let Rsbuild/Rspack handle the error gracefully; provide relevant context if possible. |
| 76 | + |
| 77 | +--- |
| 78 | + |
| 79 | +## 🧪 Testing Structure & Methodology |
| 80 | + |
| 81 | +- **Location**: Tests are located in the `test/` directory, broken down by feature or scenario folders (e.g., `test/theme/`, `test/basic/`). |
| 82 | +- **Framework**: `Playwright` is used as the primary test runner for integration and E2E testing. |
| 83 | +- **Standard Test Flow**: |
| 84 | + 1. Initialize Rsbuild with the target directory and the Tailwind plugin: |
| 85 | + ```typescript |
| 86 | + const rsbuild = await createRsbuild({ |
| 87 | + cwd: __dirname, |
| 88 | + rsbuildConfig: { plugins: [pluginTailwindCSS()] } |
| 89 | + }); |
| 90 | + ``` |
| 91 | + 2. Build the app: `await rsbuild.build();` |
| 92 | + 3. Preview it: `const { server, urls } = await rsbuild.preview();` |
| 93 | + 4. Navigate to the URL: `await page.goto(urls[0]);` |
| 94 | + 5. Assert against computed styles rather than raw CSS strings: |
| 95 | + ```typescript |
| 96 | + await expect(page.locator('#test')).toHaveCSS('display', 'flex'); |
| 97 | + ``` |
| 98 | + 6. Clean up: Always close the server in the test execution (e.g., `await server.close();`). |
| 99 | + |
| 100 | +--- |
| 101 | + |
| 102 | +## 🤖 General Agent Instructions |
| 103 | + |
| 104 | +1. **Do not break existing workflows**: Run tests (`pnpm test`) and linting (`pnpm lint`) locally to verify your changes before concluding your task or committing. |
| 105 | +2. **Minimize file modifications**: Only change files that are strictly required to fulfill the user's objective. Do not preemptively rewrite or refactor unrelated parts of the codebase. |
| 106 | +3. **Respect established patterns**: Look at existing files like `src/index.ts` and `src/compiler.ts` to mimic the codebase's tone, architecture, and complexity. |
| 107 | +4. **Use appropriate tools**: Utilize `read`, `glob`, and `grep` to build context before making code modifications. When creating or editing files, always ensure you provide absolute paths. |
| 108 | +5. **No implicit assumptions**: Verify dependencies and module existence before importing them. If adding a new feature, follow the test-driven approach evident in the `test/` directory. |
0 commit comments