Detect and automatically fix missing Tailwind CSS import at-rule in CLI pull
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3585241. --> Reported by: [balintbrews](https://www.drupal.org/user/613760) Related to !928 >>> <h3>Overview</h3> <p>An early implementation of Code Components broke when the <code>@import 'tailwindcss'</code> at-rule was added in the global CSS. That was fixed in <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3510433" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3510433</a></span>.</p> <p>While <code>@import 'tailwindcss'</code> is still optional when the compilation is done by the in-browser code editor, it is required when using Canvas Workbench or any other codebase where the Tailwind CSS build is running locally, i.e. in Storybook or a standalone frontend app.</p> <p>Using the Canvas CLI's <code>pull</code> command can break the CSS build of those environments.</p> <h3>Proposed resolution</h3> <p>During a Canvas CLI pull, detect if the <code>@import 'tailwindcss'</code> is missing from the global CSS, and automatically add to the top of the file.</p> <p><strong>Caveat:</strong> This mechanism assumes Tailwind CSS usage in the local codebase. The same is true for the CLI tool in general, but it's worth calling it out here.</p>
issue