Switch CLI tool to local-first global.css builds with explicit sync control
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3560957. --> Reported by: [balintbrews](https://www.drupal.org/user/613760) Related to !381 >>> <h3>Overview</h3> <p>The <code>build</code> command (also executed by <code>upload</code>) doesn't use the local <code>[COMPONENTS]/global.css</code> file when building Tailwind CSS. Instead, it downloads the global CSS from Canvas in the background &mdash; without updating the local file &mdash; and uses that downloaded version for the build. While this workflow supports scenarios where the in-browser code editor is the source of truth, it lacks transparency and offers no way to modify this behavior.</p> <h3>Proposed resolution</h3> <ol> <li><strong><code>download</code> command</strong>: Allow controlling whether global CSS gets downloaded. <ol> <li>Interactive mode: <ol> <li>Display "global CSS" as the second option after "All components".</li> <li>Make it selected by default.</li> <li>When selected, download global CSS from Canvas.</li> </ol> </li> <li>Non-interactive mode: <ol> <li>Download "global CSS" from Canvas by default.</li> <li>Introduce a <code>--skip-css</code> flag to avoid downloading the global CSS.</li> <li>Introduce a <code>--css-only</code> flag to download only the global CSS.</li> </ol> </li> </ol> </li> <li><strong><code>build</code> command</strong>: Use the local <code>global.css</code> file when this command is run directly. (Make sure to handle when it doesn't exist.)</li> <li><strong><code>upload</code> command</strong>: Allow controlling whether the <code>global.css</code> file gets uploaded. Build using the global CSS from the right source. <ol> <li>Interactive mode: <ol> <li>Display "global CSS" as the second option after "All components".</li> <li>Make it selected by default.</li> <li>When selected: <ol> <li>Use local <code>global.css</code> file for building the CSS.</li> <li>Upload local <code>global.css</code> file to Canvas.</li> </ol> </li> <li>When not selected: <ol> <li>Download the global CSS from Canvas in the background &mdash; without updating the local file &mdash; and use that downloaded version for the building the CSS.</li> </ol> </li> </ol> </li> <li>Non-interactive mode: <ol> <li>By default: <ol> <li>Use local <code>global.css</code> file for building the CSS.</li> <li>Upload local <code>global.css</code> file to Canvas.</li> </ol> </li> <li>Introduce a <code>--skip-css</code> flag to avoid uploading the global CSS: <ol> <li>When used, download the global CSS from Canvas in the background &mdash; without updating the local file &mdash; and use that downloaded version for the building the CSS.</li> </ol> </li> <li>Introduce a <code>--css-only</code> flag to uploading only the global CSS. When this flag is used, building the components can be skipped.</li> </ol> </li> </ol> </li> </ol> <p>These changes support a workflow that assumes that whenever components are moved between environments, the CSS that was used to compile them moves with them by default, but it also allows changing this behavior, as well as moving the CSS only.</p> <h3>User interface changes</h3> <ul> <li>"Global CSS" is listed as an option and selected by default in interactive mode as part of the <code>download</code> and <code>upload</code> commands;</li> <li><code>--skip-css</code> and <code>--css-only</code> flags for the <code>download</code> and <code>upload</code> commands.</li> </ul>
issue