CLI command to build Tailwind CSS for code components

Overview

The CLI tool needs to be able to build Tailwind CSS taking into account the markup for all "online" components combined with any local component(s).

→ See: #3525571: [Meta] CLI tool for code components

Here is an overview of how JavaScript and CSS are compiled for code components (copied from docs/react-codebase/code-editor.md):

Proposed resolution

The command needs to replicate the Tailwind CSS part of the flow above using the following steps:

1. Download the JS source of all code components into a local temporary directory, e.g., ~/.xb.
2. Add the JS source of all selected components to the locally cached collection of all "online" components.
   • Read the location for your local directory for components from an environment variable or .env file established in #3525579: Implement client credentials flow in CLI, centralize managing config.
   • Allow users to select components interactively or passed as a CLI argument. Make sure there is an option to select all.

3. Rebuild the class name candidates index maintained in the global xb_asset_library:

   1. Use extractClassNameCandidates() from balintbrews/tailwindcss-in-browser.
   2. Use code from ui/src/features/code-editor/utils/classNameCandidates.ts.
   3. See the XB app's implementation in ui/src/features/code-editor/hooks/useSourceCode.ts.
   4. Ensure we can use code from ui by moving cli into a workspace.
   5. Write the new class name candidate index to dist/index.js at the root of the local components directory.
4. Using the updated class name candidate index, compile a list that contains all class name candidates for all components.
5. Use buildCss() from balintbrews/tailwindcss-in-browser
   • See the XB app's implementation in ui/src/features/code-editor/hooks/useSourceCode.ts.
6. Write the generated CSS to dist/index.css at the root of the local components directory.

7. Extend the upload command (#3525587: CLI command to upload code components) to run this compilation

   1. Upload the compiled CSS from dist/index.css to the global asset library's compiled CSS.
   2. Upload the class name candidate index from dist/index.js to the global asset library's class name candidate index.