@drupal-canvas/cli 0.4.0 → 0.5.1

package/dist/index.js

@@ -4,7 +4,7 @@ import { Command } from 'commander';
 import * as p from '@clack/prompts';
 import * as fs from 'fs';
 import fs__default, { realpathSync as realpathSync$1, readlinkSync, readdirSync, readdir as readdir$1, lstatSync, promises } from 'fs';
-import path11, { win32, posix } from 'path';
+import path3, { win32, posix } from 'path';
 import dotenv from 'dotenv';
 import { transform, Features } from 'lightningcss';
 import axios from 'axios';
@@ -25,16 +25,16 @@ import { parse } from '@babel/parser';
 
 // package.json
 var package_default = {
-  version: "0.4.0"};
+  version: "0.5.1"};
 function loadEnvFiles() {
   const homeDir = process.env.HOME || process.env.USERPROFILE || "";
   if (homeDir) {
-    const homeEnvPath = path11.resolve(homeDir, ".canvasrc");
+    const homeEnvPath = path3.resolve(homeDir, ".canvasrc");
     if (fs__default.existsSync(homeEnvPath)) {
       dotenv.config({ path: homeEnvPath });
     }
   }
-  const localEnvPath = path11.resolve(process.cwd(), ".env");
+  const localEnvPath = path3.resolve(process.cwd(), ".env");
   if (fs__default.existsSync(localEnvPath)) {
     dotenv.config({ path: localEnvPath });
   }
@@ -10805,17 +10805,17 @@ function createApiService() {
     userAgent: config2.userAgent
   });
 }
-var CANVAS_CACHE_DIR = path11.join(os.homedir(), ".canvas");
+var CANVAS_CACHE_DIR = path3.join(os.homedir(), ".canvas");
 async function downloadJsSourceFromCanvas(componentsToDownload) {
   for (const key in componentsToDownload) {
     const component = componentsToDownload[key];
     try {
-      const componentDir = path11.join(CANVAS_CACHE_DIR, component.machineName);
+      const componentDir = path3.join(CANVAS_CACHE_DIR, component.machineName);
       await fs2.rm(componentDir, { recursive: true, force: true });
       await fs2.mkdir(componentDir, { recursive: true });
       if (component.sourceCodeJs) {
         await fs2.writeFile(
-          path11.join(componentDir, `index.jsx`),
+          path3.join(componentDir, `index.jsx`),
           component.sourceCodeJs,
           "utf-8"
         );
@@ -10833,14 +10833,14 @@ async function copyLocalJsSource(componentsToCopy) {
   try {
     await fs2.mkdir(CANVAS_CACHE_DIR, { recursive: true });
     for (const componentPath of componentsToCopy) {
-      const baseName = path11.basename(componentPath);
+      const baseName = path3.basename(componentPath);
       const sourcePath = componentPath;
-      const targetPath = path11.join(CANVAS_CACHE_DIR, baseName);
+      const targetPath = path3.join(CANVAS_CACHE_DIR, baseName);
       const stats = await fs2.stat(sourcePath);
       if (stats.isDirectory()) {
         await fs2.mkdir(targetPath, { recursive: true });
-        const sourceFile = path11.join(sourcePath, "index.jsx");
-        const targetFile = path11.join(targetPath, "index.jsx");
+        const sourceFile = path3.join(sourcePath, "index.jsx");
+        const targetFile = path3.join(targetPath, "index.jsx");
         await fs2.copyFile(sourceFile, targetFile);
       }
     }
@@ -10858,7 +10858,7 @@ async function cleanUpCacheDirectory() {
       withFileTypes: true
     });
     for (const entry of cacheEntries) {
-      const entryPath = path11.join(CANVAS_CACHE_DIR, entry.name);
+      const entryPath = path3.join(CANVAS_CACHE_DIR, entry.name);
       if (entry.isDirectory()) {
         await fs2.rm(entryPath, { recursive: true, force: true });
       } else {
@@ -10873,8 +10873,32 @@ async function cleanUpCacheDirectory() {
     );
   }
 }
+async function fileExists(filePath) {
+  try {
+    await fs2.access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function directoryExists(dirPath) {
+  return await fs2.stat(dirPath).then(() => true).catch(() => false);
+}
 
 // src/utils/build-tailwind.ts
+async function downloadGlobalCssInBackground() {
+  const apiService = await createApiService();
+  const globalAssetLibrary = await apiService.getGlobalAssetLibrary();
+  return globalAssetLibrary.css.original;
+}
+async function getGlobalCss(useLocal = true) {
+  const config2 = getConfig();
+  const localGlobalCssPath = path3.join(config2.componentDir, "global.css");
+  if (useLocal && await fileExists(localGlobalCssPath)) {
+    return await promises.readFile(localGlobalCssPath, "utf-8");
+  }
+  return await downloadGlobalCssInBackground();
+}
 async function getAllClassNameCandidatesFromCacheDir(componentsToDownload, localComponentsToCopy) {
   if (Object.keys(componentsToDownload).length > 0) {
     await downloadJsSourceFromCanvas(componentsToDownload);
@@ -10883,7 +10907,7 @@ async function getAllClassNameCandidatesFromCacheDir(componentsToDownload, local
   const cacheEntries = await promises.readdir(CANVAS_CACHE_DIR, {
     withFileTypes: true
   });
-  const cacheDirs = cacheEntries.filter((entry) => entry.isDirectory()).map((dir) => path11.join(CANVAS_CACHE_DIR, dir.name));
+  const cacheDirs = cacheEntries.filter((entry) => entry.isDirectory()).map((dir) => path3.join(CANVAS_CACHE_DIR, dir.name));
   let allClassNameCandidates = [];
   for (const cacheDir of cacheDirs) {
     const componentClassNameCandidates = await getClassNameCandidatesForComponent(cacheDir);
@@ -10901,16 +10925,16 @@ async function buildTailwindCss(classNameCandidates, globalSourceCodeCss, distDi
     globalSourceCodeCss
   );
   const transformedTwCss = await transformCss(compiledTwCss);
-  await promises.writeFile(path11.join(distDir, "index.css"), transformedTwCss);
+  await promises.writeFile(path3.join(distDir, "index.css"), transformedTwCss);
 }
 async function getClassNameCandidatesForComponent(dir) {
-  const componentName = path11.basename(dir);
+  const componentName = path3.basename(dir);
   const config2 = getConfig();
   const componentsDir = config2.componentDir;
-  const distDir = path11.join(componentsDir, "dist");
-  const jsSource = await promises.readFile(path11.join(dir, "index.jsx"), "utf-8");
+  const distDir = path3.join(componentsDir, "dist");
+  const jsSource = await promises.readFile(path3.join(dir, "index.jsx"), "utf-8");
   const currentGlobalSourceCodeJs = await promises.readFile(
-    path11.join(distDir, "index.js"),
+    path3.join(distDir, "index.js"),
     "utf-8"
   );
   const classNameCandidates = OE(jsSource);
@@ -10919,20 +10943,20 @@ async function getClassNameCandidatesForComponent(dir) {
     componentName,
     classNameCandidates
   );
-  await promises.writeFile(path11.join(distDir, "index.js"), globalJSClassNameIndex);
+  await promises.writeFile(path3.join(distDir, "index.js"), globalJSClassNameIndex);
   return nextClassNameCandidates;
 }
-async function buildTailwindForComponents(selectedComponents) {
+async function buildTailwindForComponents(selectedComponents, useLocalGlobalCss = true) {
   try {
     const config2 = getConfig();
     const apiService = await createApiService();
     const onlineComponents = await apiService.listComponents();
+    const globalSourceCodeCss = await getGlobalCss(useLocalGlobalCss);
     const globalAssetLibrary = await apiService.getGlobalAssetLibrary();
     const globalSourceCodeJs = globalAssetLibrary.js.original;
-    const globalSourceCodeCss = globalAssetLibrary.css.original;
-    const distDir = path11.join(config2.componentDir, "dist");
+    const distDir = path3.join(config2.componentDir, "dist");
     await promises.mkdir(distDir, { recursive: true });
-    const targetFile = path11.join(distDir, "index.js");
+    const targetFile = path3.join(distDir, "index.js");
     await promises.writeFile(targetFile, globalSourceCodeJs, "utf-8");
     const allClassNameCandidates = await getAllClassNameCandidatesFromCacheDir(
       onlineComponents,
@@ -10984,17 +11008,6 @@ function compileJS(source) {
   const { code } = transformSync(source, SWC_OPTIONS);
   return code;
 }
-async function fileExists(filePath) {
-  try {
-    await fs2.access(filePath);
-    return true;
-  } catch {
-    return false;
-  }
-}
-async function directoryExists(dirPath) {
-  return await fs2.stat(dirPath).then(() => true).catch(() => false);
-}
 async function validateComponent(componentDir, fix = false) {
   const eslint = new ESLint({
     overrideConfigFile: true,
@@ -11012,7 +11025,7 @@ async function validateComponent(componentDir, fix = false) {
       (msg) => `Line ${msg.line}, Column ${msg.column}: ` + msg.message + (msg.ruleId ? ` (${msg.ruleId})` : "")
     );
     details.push({
-      heading: path11.relative(process.cwd(), result.filePath),
+      heading: path3.relative(process.cwd(), result.filePath),
       content: messages.join("\n\n")
     });
   });
@@ -11024,8 +11037,8 @@ async function validateComponent(componentDir, fix = false) {
 }
 
 // src/utils/build.ts
-async function buildComponent(componentDir) {
-  const componentName = path11.basename(componentDir);
+async function buildComponent(componentDir, useLocalGlobalCss = true) {
+  const componentName = path3.basename(componentDir);
   const result = {
     itemName: componentName,
     success: true,
@@ -11037,7 +11050,7 @@ async function buildComponent(componentDir) {
     result.details = validationResult.details;
     return result;
   }
-  const distDir = path11.join(componentDir, "dist");
+  const distDir = path3.join(componentDir, "dist");
   try {
     await promises.mkdir(distDir, { recursive: true });
   } catch (error) {
@@ -11050,11 +11063,11 @@ async function buildComponent(componentDir) {
   }
   try {
     const jsSource = await promises.readFile(
-      path11.join(componentDir, "index.jsx"),
+      path3.join(componentDir, "index.jsx"),
       "utf-8"
     );
     const jsCompiled = compileJS(jsSource);
-    await promises.writeFile(path11.join(distDir, "index.js"), jsCompiled);
+    await promises.writeFile(path3.join(distDir, "index.js"), jsCompiled);
   } catch (error) {
     result.success = false;
     result.details?.push({
@@ -11062,11 +11075,9 @@ async function buildComponent(componentDir) {
       content: String(error)
     });
   }
-  const apiService = await createApiService();
-  const globalAssetLibrary = await apiService.getGlobalAssetLibrary();
-  const globalSourceCodeCss = globalAssetLibrary.css.original;
+  const globalSourceCodeCss = await getGlobalCss(useLocalGlobalCss);
   try {
-    const cssPath = path11.join(componentDir, "index.css");
+    const cssPath = path3.join(componentDir, "index.css");
     const cssFileExists = await fileExists(cssPath);
     if (cssFileExists) {
       const cssSource = await promises.readFile(cssPath, "utf-8");
@@ -11075,7 +11086,7 @@ async function buildComponent(componentDir) {
         globalSourceCodeCss
       );
       const cssTranspiled = await transformCss(cssCompiled);
-      await promises.writeFile(path11.join(distDir, "index.css"), cssTranspiled);
+      await promises.writeFile(path3.join(distDir, "index.css"), cssTranspiled);
     }
   } catch (error) {
     result.success = false;
@@ -17728,11 +17739,11 @@ async function findComponentDirectories(baseDir) {
     const namedYmls = await glob(`${baseDir}/**/*.component.yml`);
     const allComponentPaths = [...standardYmls, ...namedYmls];
     const uniqueDirs = new Set(
-      allComponentPaths.map((filePath) => path11.dirname(filePath))
+      allComponentPaths.map((filePath) => path3.dirname(filePath))
     );
     let componentDirs = Array.from(uniqueDirs).sort();
     let sdcs = await glob(`${baseDir}/**/*.twig`);
-    sdcs = sdcs.map((sdc) => path11.dirname(sdc));
+    sdcs = sdcs.map((sdc) => path3.dirname(sdc));
     componentDirs = componentDirs.filter(
       (componentDir) => !sdcs.includes(componentDir)
     );
@@ -17744,9 +17755,29 @@ async function findComponentDirectories(baseDir) {
 }
 
 // src/utils/component-selector.ts
+var GLOBAL_CSS_SELECTOR = "__GLOBAL_CSS__";
+function determineGlobalCssSelection(options) {
+  if (options.cssOnly) {
+    return true;
+  }
+  if (options.skipCss) {
+    return false;
+  }
+  if (!options.includeGlobalCss) {
+    return void 0;
+  }
+  return options.globalCssDefault !== false;
+}
 async function selectLocalComponents(options) {
   const config2 = getConfig();
   const componentDir = options.componentDir || config2.componentDir;
+  const globalCssSelection = determineGlobalCssSelection(options);
+  if (options.cssOnly) {
+    return {
+      directories: [],
+      includeGlobalCss: true
+    };
+  }
   const allLocalDirs = await findComponentDirectories(componentDir);
   if (allLocalDirs.length === 0) {
     throw new Error(`No local components were found in ${componentDir}`);
@@ -17755,7 +17786,8 @@ async function selectLocalComponents(options) {
     return selectSpecificLocalComponents(
       options.components,
       allLocalDirs,
-      options
+      options,
+      globalCssSelection
     );
   }
   if (options.all) {
@@ -17769,16 +17801,23 @@ async function selectLocalComponents(options) {
       }
     }
     p.log.info(`Selected all components`);
-    return { directories: allLocalDirs };
+    return {
+      directories: allLocalDirs,
+      includeGlobalCss: globalCssSelection
+    };
   }
-  return selectLocalComponentsInteractive(allLocalDirs, options);
+  return selectLocalComponentsInteractive(
+    allLocalDirs,
+    options,
+    globalCssSelection
+  );
 }
-async function selectSpecificLocalComponents(componentsInput, allLocalDirs, options) {
+async function selectSpecificLocalComponents(componentsInput, allLocalDirs, options, globalCssSelection) {
   const requestedNames = componentsInput.split(",").map((name) => name.trim()).filter((name) => name.length > 0);
   const notFound = [];
   const foundDirs = [];
   for (const requestedName of requestedNames) {
-    const dir = allLocalDirs.find((d2) => path11.basename(d2) === requestedName);
+    const dir = allLocalDirs.find((d2) => path3.basename(d2) === requestedName);
     if (dir) {
       foundDirs.push(dir);
     } else {
@@ -17798,27 +17837,48 @@ async function selectSpecificLocalComponents(componentsInput, allLocalDirs, opti
       throw new Error("Operation cancelled by user");
     }
   }
-  return { directories: foundDirs };
+  return {
+    directories: foundDirs,
+    includeGlobalCss: globalCssSelection
+  };
 }
-async function selectLocalComponentsInteractive(allLocalDirs, options) {
-  const selectedDirs = await p.multiselect({
-    message: options.selectMessage || "Select components",
-    options: [
-      {
-        value: ALL_COMPONENTS_SELECTOR,
-        label: "All components"
-      },
-      ...allLocalDirs.map((dir) => ({
-        value: dir,
-        label: path11.basename(dir)
-      }))
-    ],
+async function selectLocalComponentsInteractive(allLocalDirs, options, globalCssSelection) {
+  const multiSelectOptions = [
+    {
+      value: ALL_COMPONENTS_SELECTOR,
+      label: "All components"
+    }
+  ];
+  if (options.includeGlobalCss) {
+    multiSelectOptions.push({
+      value: GLOBAL_CSS_SELECTOR,
+      label: "Global CSS"
+    });
+  }
+  multiSelectOptions.push(
+    ...allLocalDirs.map((dir) => ({
+      value: dir,
+      label: path3.basename(dir)
+    }))
+  );
+  const selectedItems = await p.multiselect({
+    message: options.selectMessage || "Select items",
+    options: multiSelectOptions,
+    initialValues: options.includeGlobalCss && options.globalCssDefault !== false ? [GLOBAL_CSS_SELECTOR] : [],
     required: true
   });
-  if (p.isCancel(selectedDirs)) {
+  if (p.isCancel(selectedItems)) {
     throw new Error("Operation cancelled by user");
   }
-  const finalDirs = selectedDirs.includes(ALL_COMPONENTS_SELECTOR) ? allLocalDirs : selectedDirs;
+  const includesAllComponents = selectedItems.includes(
+    ALL_COMPONENTS_SELECTOR
+  );
+  const includesGlobalCss = selectedItems.includes(
+    GLOBAL_CSS_SELECTOR
+  );
+  const finalDirs = includesAllComponents ? allLocalDirs : selectedItems.filter(
+    (item) => item !== ALL_COMPONENTS_SELECTOR && item !== GLOBAL_CSS_SELECTOR
+  );
   if (!options.skipConfirmation) {
     const confirmed = await confirmSelection(
       finalDirs.length,
@@ -17828,10 +17888,21 @@ async function selectLocalComponentsInteractive(allLocalDirs, options) {
       throw new Error("Operation cancelled by user");
     }
   }
-  return { directories: finalDirs };
+  const finalGlobalCss = options.includeGlobalCss ? includesGlobalCss : globalCssSelection;
+  return {
+    directories: finalDirs,
+    includeGlobalCss: finalGlobalCss
+  };
 }
 async function selectRemoteComponents(allComponents, options) {
   const componentCount = Object.keys(allComponents).length;
+  const globalCssSelection = determineGlobalCssSelection(options);
+  if (options.cssOnly) {
+    return {
+      components: {},
+      includeGlobalCss: true
+    };
+  }
   if (componentCount === 0) {
     throw new Error("No components found");
   }
@@ -17845,18 +17916,26 @@ async function selectRemoteComponents(allComponents, options) {
         throw new Error("Operation cancelled by user");
       }
     }
-    return { components: allComponents };
+    return {
+      components: allComponents,
+      includeGlobalCss: globalCssSelection
+    };
   }
   if (options.components) {
     return selectSpecificRemoteComponents(
       options.components,
       allComponents,
-      options
+      options,
+      globalCssSelection
     );
   }
-  return selectRemoteComponentsInteractive(allComponents, options);
+  return selectRemoteComponentsInteractive(
+    allComponents,
+    options,
+    globalCssSelection
+  );
 }
-async function selectSpecificRemoteComponents(componentsInput, allComponents, options) {
+async function selectSpecificRemoteComponents(componentsInput, allComponents, options, globalCssSelection) {
   const requestedNames = componentsInput.split(",").map((name) => name.trim()).filter((name) => name.length > 0);
   const notFound = [];
   const selected = {};
@@ -17881,31 +17960,48 @@ async function selectSpecificRemoteComponents(componentsInput, allComponents, op
       throw new Error("Operation cancelled by user");
     }
   }
-  return { components: selected };
+  return {
+    components: selected,
+    includeGlobalCss: globalCssSelection
+  };
 }
-async function selectRemoteComponentsInteractive(allComponents, options) {
-  const selectedMachineNames = await p.multiselect({
-    message: options.selectMessage || "Select components to download",
-    options: [
-      {
-        value: ALL_COMPONENTS_SELECTOR,
-        label: "All components"
-      },
-      ...Object.keys(allComponents).map((key) => ({
-        value: allComponents[key].machineName,
-        label: `${allComponents[key].name} (${allComponents[key].machineName})`
-      }))
-    ],
+async function selectRemoteComponentsInteractive(allComponents, options, globalCssSelection) {
+  const multiSelectOptions = [
+    {
+      value: ALL_COMPONENTS_SELECTOR,
+      label: "All components"
+    }
+  ];
+  if (options.includeGlobalCss) {
+    multiSelectOptions.push({
+      value: GLOBAL_CSS_SELECTOR,
+      label: "Global CSS"
+    });
+  }
+  multiSelectOptions.push(
+    ...Object.keys(allComponents).map((key) => ({
+      value: allComponents[key].machineName,
+      label: `${allComponents[key].name} (${allComponents[key].machineName})`
+    }))
+  );
+  const selectedItems = await p.multiselect({
+    message: options.selectMessage || "Select items to download",
+    options: multiSelectOptions,
+    initialValues: options.includeGlobalCss && options.globalCssDefault !== false ? [GLOBAL_CSS_SELECTOR] : [],
     required: true
   });
-  if (p.isCancel(selectedMachineNames)) {
+  if (p.isCancel(selectedItems)) {
     throw new Error("Operation cancelled by user");
   }
-  const selected = selectedMachineNames.includes(
+  const includesAllComponents = selectedItems.includes(
     ALL_COMPONENTS_SELECTOR
-  ) ? allComponents : Object.fromEntries(
+  );
+  const includesGlobalCss = selectedItems.includes(
+    GLOBAL_CSS_SELECTOR
+  );
+  const selected = includesAllComponents ? allComponents : Object.fromEntries(
     Object.entries(allComponents).filter(
-      ([, component]) => selectedMachineNames.includes(component.machineName)
+      ([, component]) => selectedItems.includes(component.machineName)
     )
   );
   if (!options.skipConfirmation) {
@@ -17917,7 +18013,11 @@ async function selectRemoteComponentsInteractive(allComponents, options) {
       throw new Error("Operation cancelled by user");
     }
   }
-  return { components: selected };
+  const finalGlobalCss = options.includeGlobalCss ? includesGlobalCss : globalCssSelection;
+  return {
+    components: selected,
+    includeGlobalCss: finalGlobalCss
+  };
 }
 async function confirmSelection(count, customMessage) {
   const componentLabel = count === 1 ? "component" : "components";
@@ -18061,10 +18161,15 @@ function downloadCommand(program2) {
   ).option("--all", "Download all components").option("-y, --yes", "Skip all confirmation prompts").option(
     "--skip-overwrite",
     "Skip downloading components that already exist locally"
-  ).option("--verbose", "Enable verbose output").action(async (options) => {
+  ).option("--skip-css", "Skip downloading global CSS").option("--css-only", "Download only global CSS (skip components)").option("--verbose", "Enable verbose output").action(async (options) => {
     p.intro(chalk2.bold("Drupal Canvas CLI: download"));
     try {
       validateComponentOptions(options);
+      if (options.skipCss && options.cssOnly) {
+        throw new Error(
+          "Cannot use both --skip-css and --css-only flags together"
+        );
+      }
       updateConfigFromOptions(options);
       await ensureConfig([
         "siteUrl",
@@ -18075,35 +18180,52 @@ function downloadCommand(program2) {
       ]);
       const config2 = getConfig();
       const apiService = await createApiService();
+      let components = {};
+      let globalCss;
       const s = p.spinner();
-      s.start("Fetching components");
-      const components = await apiService.listComponents();
-      const {
-        css: { original: globalCss }
-      } = await apiService.getGlobalAssetLibrary();
-      if (Object.keys(components).length === 0) {
-        s.stop("No components found");
-        p.outro("Download cancelled - no components were found");
-        return;
+      if (options.cssOnly) {
+        s.start("Fetching global CSS");
+        const {
+          css: { original }
+        } = await apiService.getGlobalAssetLibrary();
+        globalCss = original;
+        s.stop("Global CSS fetched");
+      } else {
+        s.start("Fetching components and global CSS");
+        const [fetchedComponents, globalAssetLibrary] = await Promise.all([
+          apiService.listComponents(),
+          apiService.getGlobalAssetLibrary()
+        ]);
+        components = fetchedComponents;
+        globalCss = globalAssetLibrary.css.original;
+        if (Object.keys(components).length === 0) {
+          s.stop("No components found");
+          p.outro("Download cancelled - no components were found");
+          return;
+        }
+        s.stop(`Found ${Object.keys(components).length} components`);
       }
-      s.stop(`Found ${Object.keys(components).length} components`);
       const allFlag = options.all || options.yes && !options.components || false;
-      const { components: componentsToDownload } = await selectRemoteComponents(components, {
+      const { components: componentsToDownload, includeGlobalCss } = await selectRemoteComponents(components, {
         all: allFlag,
         components: options.components,
         skipConfirmation: options.yes,
-        selectMessage: "Select components to download",
+        skipCss: options.skipCss,
+        cssOnly: options.cssOnly,
+        includeGlobalCss: !options.skipCss,
+        globalCssDefault: true,
+        selectMessage: "Select items to download",
         confirmMessage: `Download to ${config2.componentDir}?`
       });
-      const componentPluralized = pluralizeComponent(
-        Object.keys(componentsToDownload).length
-      );
+      const componentCount = Object.keys(componentsToDownload).length;
+      const componentPluralized = pluralizeComponent(componentCount);
       const results = [];
-      s.start(`Downloading ${componentPluralized}`);
+      const downloadMessage = options.cssOnly ? "Downloading global CSS" : componentCount > 0 ? `Downloading ${componentPluralized}` : "Processing request";
+      s.start(downloadMessage);
       for (const key in componentsToDownload) {
         const component = componentsToDownload[key];
         try {
-          const componentDir = path11.join(
+          const componentDir = path3.join(
             config2.componentDir,
             component.machineName
           );
@@ -18148,20 +18270,20 @@ function downloadCommand(program2) {
             slots: component.slots || {}
           };
           await fs2.writeFile(
-            path11.join(componentDir, `component.yml`),
+            path3.join(componentDir, `component.yml`),
             yaml__default.dump(metadata),
             "utf-8"
           );
           if (component.sourceCodeJs) {
             await fs2.writeFile(
-              path11.join(componentDir, `index.jsx`),
+              path3.join(componentDir, `index.jsx`),
               component.sourceCodeJs,
               "utf-8"
             );
           }
           if (component.sourceCodeCss) {
             await fs2.writeFile(
-              path11.join(componentDir, `index.css`),
+              path3.join(componentDir, `index.css`),
               component.sourceCodeCss,
               "utf-8"
             );
@@ -18182,16 +18304,15 @@ function downloadCommand(program2) {
           });
         }
       }
-      s.stop(
-        chalk2.green(
-          `Processed ${Object.keys(componentsToDownload).length} ${componentPluralized}`
-        )
-      );
-      reportResults(results, "Downloaded components", "Component");
-      if (globalCss) {
+      const successMessage = options.cssOnly && componentCount === 0 ? "Global CSS download completed" : `Processed ${componentCount} ${componentPluralized}`;
+      s.stop(chalk2.green(successMessage));
+      if (componentCount > 0) {
+        reportResults(results, "Downloaded components", "Component");
+      }
+      if (includeGlobalCss && typeof globalCss === "string") {
         let globalCssResult;
         try {
-          const globalCssPath = path11.join(config2.componentDir, "global.css");
+          const globalCssPath = path3.join(config2.componentDir, "global.css");
           await fs2.writeFile(globalCssPath, globalCss, "utf-8");
           globalCssResult = {
             itemName: "global.css",
@@ -18211,7 +18332,8 @@ function downloadCommand(program2) {
         }
         reportResults([globalCssResult], "Downloaded assets", "Asset");
       }
-      p.outro(`\u2B07\uFE0F Download command completed`);
+      const outroMessage = options.cssOnly && componentCount === 0 ? "\u2B07\uFE0F Global CSS downloaded successfully" : includeGlobalCss && componentCount > 0 ? "\u2B07\uFE0F Components and global CSS downloaded successfully" : componentCount > 0 ? "\u2B07\uFE0F Components downloaded successfully" : "\u2B07\uFE0F Download command completed";
+      p.outro(outroMessage);
     } catch (error) {
       if (error instanceof Error) {
         p.note(chalk2.red(`Error: ${error.message}`));
@@ -18254,13 +18376,13 @@ function scaffoldCommand(program2) {
         }
         componentName = name;
       }
-      const componentDir = path11.join(baseDir, componentName);
+      const componentDir = path3.join(baseDir, componentName);
       const s = p.spinner();
       s.start(`Creating component "${componentName}"`);
       try {
         await fs2.mkdir(componentDir, { recursive: true });
-        const templateDir = path11.join(
-          path11.dirname(new URL(import.meta.url).pathname),
+        const templateDir = path3.join(
+          path3.dirname(new URL(import.meta.url).pathname),
           "templates/hello-world"
         );
         const files = await fs2.readdir(templateDir);
@@ -18276,8 +18398,8 @@ function scaffoldCommand(program2) {
           }
         }
         for (const file of files) {
-          const srcPath = path11.join(templateDir, file);
-          const destPath = path11.join(componentDir, file);
+          const srcPath = path3.join(templateDir, file);
+          const destPath = path3.join(componentDir, file);
           let content = await fs2.readFile(srcPath, "utf-8");
           const { pascalCaseName, className, displayName, machineName } = generateComponentNameFormats(componentName);
           content = content.replace(/HelloWorld/g, pascalCaseName).replace(/hello-world-component/g, className).replace(/Hello World/g, displayName).replace(/hello_world/g, machineName);
@@ -18286,9 +18408,9 @@ function scaffoldCommand(program2) {
         s.stop(chalk2.green(`Created component "${componentName}"`));
         p.note(`Component "${componentName}" has been created:
 - Directory: ${componentDir}
-- Component metadata: ${path11.join(componentDir, `component.yml`)}
-- Source file: ${path11.join(componentDir, `index.jsx`)}
-- CSS file: ${path11.join(componentDir, `index.css`)}`);
+- Component metadata: ${path3.join(componentDir, `component.yml`)}
+- Source file: ${path3.join(componentDir, `index.jsx`)}
+- CSS file: ${path3.join(componentDir, `index.css`)}`);
         p.outro("\u{1F3D7}\uFE0F Scaffold command completed");
       } catch (error) {
         s.stop(chalk2.red(`Failed to create component "${componentName}"`));
@@ -18366,20 +18488,20 @@ var getDataDependenciesFromAst = (ast) => ast.program.body.filter((d2) => d2.typ
 async function processComponentFiles(componentDir) {
   const metadataPath = await findMetadataPath(componentDir);
   const metadata = await readComponentMetadata(metadataPath);
-  const distDir = path11.join(componentDir, "dist");
+  const distDir = path3.join(componentDir, "dist");
   const sourceCodeJs = await promises.readFile(
-    path11.join(componentDir, "index.jsx"),
+    path3.join(componentDir, "index.jsx"),
     "utf-8"
   );
-  const compiledJs = await promises.readFile(path11.join(distDir, "index.js"), "utf-8");
+  const compiledJs = await promises.readFile(path3.join(distDir, "index.js"), "utf-8");
   let sourceCodeCss = "";
   let compiledCss = "";
   try {
     sourceCodeCss = await promises.readFile(
-      path11.join(componentDir, "index.css"),
+      path3.join(componentDir, "index.css"),
       "utf-8"
     );
-    compiledCss = await promises.readFile(path11.join(distDir, "index.css"), "utf-8");
+    compiledCss = await promises.readFile(path3.join(distDir, "index.css"), "utf-8");
   } catch {
   }
   return {
@@ -18391,7 +18513,7 @@ async function processComponentFiles(componentDir) {
   };
 }
 async function findMetadataPath(componentDir) {
-  const metadataPath = path11.join(componentDir, "component.yml");
+  const metadataPath = path3.join(componentDir, "component.yml");
   try {
     await promises.access(metadataPath);
     return metadataPath;
@@ -18412,10 +18534,10 @@ async function readComponentMetadata(filePath) {
     }
     const metadata = rawMetadata;
     if (!metadata.name) {
-      metadata.name = path11.basename(path11.dirname(filePath));
+      metadata.name = path3.basename(path3.dirname(filePath));
     }
     if (!metadata.machineName) {
-      metadata.machineName = path11.basename(path11.dirname(filePath));
+      metadata.machineName = path3.basename(path3.dirname(filePath));
     }
     if (!metadata.slots || typeof metadata.slots !== "object") {
       metadata.slots = {};
@@ -18585,12 +18707,17 @@ function uploadCommand(program2) {
   program2.command("upload").description("build and upload local components and global CSS assets").option("--client-id <id>", "Client ID").option("--client-secret <secret>", "Client Secret").option("--site-url <url>", "Site URL").option("--scope <scope>", "Scope").option("-d, --dir <directory>", "Component directory").option(
     "-c, --components <names>",
     "Specific component(s) to upload (comma-separated)"
-  ).option("--all", "Upload all components").option("-y, --yes", "Skip confirmation prompts").option("--verbose", "Verbose output").option("--no-tailwind", "Skip Tailwind CSS building").action(async (options) => {
+  ).option("--all", "Upload all components").option("-y, --yes", "Skip confirmation prompts").option("--verbose", "Verbose output").option("--no-tailwind", "Skip Tailwind CSS building").option("--skip-css", "Skip global CSS upload").option("--css-only", "Upload only global CSS (skip components)").action(async (options) => {
     const allFlag = options.all || options.yes && !options.components || false;
     const skipTailwind = !options.tailwind;
     try {
       p.intro(chalk2.bold("Drupal Canvas CLI: upload"));
       validateComponentOptions(options);
+      if (options.skipCss && options.cssOnly) {
+        throw new Error(
+          "Cannot use both --skip-css and --css-only flags together"
+        );
+      }
       updateConfigFromOptions(options);
       await ensureConfig([
         "siteUrl",
@@ -18600,22 +18727,28 @@ function uploadCommand(program2) {
         "componentDir"
       ]);
       const config2 = getConfig();
-      const { directories: componentsToUpload } = await selectLocalComponents(
-        {
-          all: allFlag,
-          components: options.components,
-          skipConfirmation: options.yes,
-          selectMessage: "Select components to upload"
-        }
-      );
+      const { directories: componentsToUpload, includeGlobalCss } = await selectLocalComponents({
+        all: allFlag,
+        components: options.components,
+        skipConfirmation: options.yes,
+        skipCss: options.skipCss,
+        cssOnly: options.cssOnly,
+        includeGlobalCss: !options.skipCss,
+        globalCssDefault: true,
+        selectMessage: "Select items to upload"
+      });
       const apiService = await createApiService();
-      const componentResults = await getBuildAndUploadResults(
-        componentsToUpload,
-        apiService
-      );
-      reportResults(componentResults, "Uploaded components", "Component");
-      if (componentResults.some((result) => !result.success)) {
-        process.exit(1);
+      let componentResults = [];
+      if (!options.cssOnly && componentsToUpload.length > 0) {
+        componentResults = await getBuildAndUploadResults(
+          componentsToUpload,
+          apiService,
+          includeGlobalCss ?? false
+        );
+        reportResults(componentResults, "Uploaded components", "Component");
+        if (componentResults.some((result) => !result.success)) {
+          process.exit(1);
+        }
       }
       if (skipTailwind) {
         p.log.info("Skipping Tailwind CSS build");
@@ -18623,7 +18756,9 @@ function uploadCommand(program2) {
         const s2 = p.spinner();
         s2.start("Building Tailwind CSS");
         const tailwindResult = await buildTailwindForComponents(
-          componentsToUpload
+          componentsToUpload,
+          includeGlobalCss
+          // Use local CSS if includeGlobalCss is true
         );
         const componentLabelPluralized = pluralizeComponent(
           componentsToUpload.length
@@ -18639,14 +18774,20 @@ function uploadCommand(program2) {
             chalk2.red(`Tailwind build failed, global assets upload aborted.`)
           );
         } else {
-          const globalCssResult = await uploadGlobalAssetLibrary(
-            apiService,
-            config2.componentDir
-          );
-          reportResults([globalCssResult], "Uploaded assets", "Asset");
+          if (includeGlobalCss) {
+            const globalCssResult = await uploadGlobalAssetLibrary(
+              apiService,
+              config2.componentDir
+            );
+            reportResults([globalCssResult], "Uploaded assets", "Asset");
+          } else {
+            p.log.info("Skipping global CSS upload");
+          }
         }
       }
-      p.outro("\u2B06\uFE0F Upload command completed");
+      const componentCount = componentsToUpload.length;
+      const outroMessage = options.cssOnly && componentCount === 0 ? "\u2B06\uFE0F Global CSS uploaded successfully" : includeGlobalCss && componentCount > 0 ? "\u2B06\uFE0F Components and global CSS uploaded successfully" : componentCount > 0 ? "\u2B06\uFE0F Components uploaded successfully" : "\u2B06\uFE0F Upload command completed";
+      p.outro(outroMessage);
     } catch (error) {
       if (error instanceof Error) {
         p.note(chalk2.red(`Error: ${error.message}`));
@@ -18662,11 +18803,11 @@ async function prepareComponentsForUpload(successfulBuilds, componentsToUpload)
   const failed = [];
   for (const buildResult of successfulBuilds) {
     const dir = buildResult.itemName ? componentsToUpload.find(
-      (d2) => path11.basename(d2) === buildResult.itemName
+      (d2) => path3.basename(d2) === buildResult.itemName
     ) : void 0;
     if (!dir) continue;
     try {
-      const componentName = path11.basename(dir);
+      const componentName = path3.basename(dir);
       const { sourceCodeJs, compiledJs, sourceCodeCss, compiledCss, metadata } = await processComponentFiles(dir);
       if (!metadata) {
         throw new Error("Invalid metadata file");
@@ -18719,11 +18860,14 @@ async function prepareComponentsForUpload(successfulBuilds, componentsToUpload)
   }
   return { prepared, failed };
 }
-async function getBuildAndUploadResults(componentsToUpload, apiService) {
+async function getBuildAndUploadResults(componentsToUpload, apiService, includeGlobalCss) {
   const results = [];
   const spinner6 = p.spinner();
   spinner6.start("Building components");
-  const buildResults = await buildSelectedComponents(componentsToUpload);
+  const buildResults = await buildSelectedComponents(
+    componentsToUpload,
+    includeGlobalCss
+  );
   const successfulBuilds = buildResults.filter((build) => build.success);
   const failedBuilds = buildResults.filter((build) => !build.success);
   if (successfulBuilds.length === 0) {
@@ -18798,29 +18942,28 @@ async function getBuildAndUploadResults(componentsToUpload, apiService) {
   );
   return results;
 }
-async function buildSelectedComponents(componentDirs) {
+async function buildSelectedComponents(componentDirs, useLocalGlobalCss = true) {
   const buildResults = [];
   for (const dir of componentDirs) {
-    buildResults.push(await buildComponent(dir));
+    buildResults.push(await buildComponent(dir, useLocalGlobalCss));
   }
   return buildResults;
 }
 async function uploadGlobalAssetLibrary(apiService, componentDir) {
   try {
-    const distDir = path11.join(componentDir, "dist");
-    const globalCompiledCssPath = path11.join(distDir, "index.css");
+    const distDir = path3.join(componentDir, "dist");
+    const globalCompiledCssPath = path3.join(distDir, "index.css");
     const globalCompiledCssExists = await fileExists(globalCompiledCssPath);
     if (globalCompiledCssExists) {
       const globalCompiledCss = await fs2.readFile(
-        path11.join(distDir, "index.css"),
+        path3.join(distDir, "index.css"),
         "utf-8"
       );
       const classNameCandidateIndexFile = await fs2.readFile(
-        path11.join(distDir, "index.js"),
+        path3.join(distDir, "index.js"),
         "utf-8"
       );
-      const current = await apiService.getGlobalAssetLibrary();
-      const originalCss = current.css.original;
+      const originalCss = await getGlobalCss();
       await apiService.updateGlobalAssetLibrary({
         css: {
           original: originalCss,