reference-css-classes
Access documentation for managing CSS classes in Stimulus controllers to control styling and visual states dynamically.
Instructions
CSS classes API reference - learn how to dynamically manage CSS classes in Stimulus controllers for styling and visual state management
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Implementation Reference
- src/index.ts:21-43 (handler)The core handler function for the 'reference-css-classes' tool (shared across all documentation tools). It reads the content of the specific markdown file (reference/css_classes.md) using readMarkdownFile and returns it formatted as an MCP content block, with fallback error handling.async () => { try { const content = await readMarkdownFile(path.join(folder, file)); return { content: [ { type: "text", text: content } ] }; } catch (error) { const errorMessage = error instanceof Error ? error.message : String(error); return { content: [ { type: "text", text: `Error reading ${file}: ${errorMessage}` } ] }; } }
- src/index.ts:17-45 (registration)Registration code that dynamically creates and registers the MCP tool 'reference-css-classes' (and all other doc tools) using server.tool(), based on entries from docFiles config.docFiles.forEach(({ folder, file, name, description }) => { server.tool( name, description, async () => { try { const content = await readMarkdownFile(path.join(folder, file)); return { content: [ { type: "text", text: content } ] }; } catch (error) { const errorMessage = error instanceof Error ? error.message : String(error); return { content: [ { type: "text", text: `Error reading ${file}: ${errorMessage}` } ] }; } } ); });
- src/config.ts:75-79 (registration)Configuration object in docFiles array that defines the 'reference-css-classes' tool: its name, description, and source markdown file path.{ folder: 'reference', file: 'css_classes.md', name: 'reference-css-classes', description: 'CSS classes API reference - learn how to dynamically manage CSS classes in Stimulus controllers for styling and visual state management' },
- src/config.ts:4-8 (schema)TypeScript interface defining the structure of documentation tool configurations used for all doc tools including 'reference-css-classes'.export interface DocFile { folder: string; file: string; name: string; description: string;
- src/documentReader.ts:14-61 (helper)Helper function readMarkdownFile used by the tool handler to load the content of reference/css_classes.md, supporting cache, GitHub fetch, and local fallback.export async function readMarkdownFile(filename: string): Promise<string> { const filePath = path.join(docsFolder, filename); if (!filePath.startsWith(docsFolder)) { throw new Error("Invalid file path"); } // Get current commit info if we don't have it yet if (!mainBranchInfo) { try { const commitInfo = await fetchMainBranchInformation(); const cacheKey = `${commitInfo.sha.substring(0, 7)}-${commitInfo.timestamp}`; mainBranchInfo = { ...commitInfo, cacheKey }; } catch (shaError) { console.error('Failed to get GitHub commit info, falling back to direct fetch'); } } // Try to read from cache first if we have commit info if (mainBranchInfo) { const cachedFilePath = path.join(cacheFolder, mainBranchInfo.cacheKey, filename); try { const content = await fs.promises.readFile(cachedFilePath, "utf-8"); console.error(`Using cached content for ${mainBranchInfo.cacheKey}: ${filename}`); return content; } catch (cacheError) { // Cache miss, continue to fetch from GitHub } } // Fetch from GitHub try { return await fetchFromGitHub(filename, mainBranchInfo?.cacheKey); } catch (githubError) { console.error(`GitHub fetch failed: ${githubError}, attempting to read from local files...`); // Fallback: read from local files try { return await fs.promises.readFile(filePath, "utf-8"); } catch (localError) { const githubErrorMessage = githubError instanceof Error ? githubError.message : String(githubError); const localErrorMessage = localError instanceof Error ? localError.message : String(localError); throw new Error(`Failed to read file from GitHub (${githubErrorMessage}) and locally (${localErrorMessage})`); } } }