include references to assets if --files is passed

Author: chrisberthe

src/commands/theme/generate/component.ts

@@ -95,8 +95,13 @@ export default class GenerateComponent extends BaseCommand {
       js: context.assets.js
     } : undefined
 
+    const externalAssets = context.assets.inline ? undefined : {
+      css: context.assets.css,
+      js: context.assets.js
+    }
+
     files.push({
-      content: generateLiquidContent(context.component.fullName, hasJs, inlineAssets),
+      content: generateLiquidContent(context.component.fullName, hasJs, inlineAssets, externalAssets),
       description: `${context.component.fullName}.liquid`,
       path: path.join(directories.componentDir, `${context.component.fullName}.liquid`),
     })

src/utilities/content-generation.ts

@@ -1,6 +1,6 @@
 const COPYRIGHT_NOTICE = 'Copyright © 2025 Archetype Themes LP. All rights reserved.'
 
-export function generateLiquidContent(fullName: string, hasJs: boolean = false, inlineAssets?: { css: boolean; js: boolean }): string {
+export function generateLiquidContent(fullName: string, hasJs: boolean = false, inlineAssets?: { css: boolean; js: boolean }, externalAssets?: { css: boolean; js: boolean }): string {
   const elementName = fullName.replace('.', '-')
   const wrapper = hasJs ? elementName : `div class="${elementName}"`
   const closingTag = hasJs ? elementName : 'div'
@@ -13,7 +13,16 @@ export function generateLiquidContent(fullName: string, hasJs: boolean = false,
   @example
   {% render '${fullName}' %}
 {%- enddoc -%}
+`
+
+  // Add external CSS reference right after enddoc
+  if (externalAssets?.css) {
+    content += `
+{{ '${fullName}.css' | asset_url | stylesheet_tag }}
+`
+  }
 
+  content += `
 <${wrapper}>
   <!-- Component content goes here -->
 </${closingTag}>
@@ -50,6 +59,15 @@ export function generateLiquidContent(fullName: string, hasJs: boolean = false,
 `
   }
 
+  // Add external JS reference if requested
+  if (externalAssets?.js) {
+    content += `
+<script type="module">
+  import '${fullName}'
+</script>
+`
+  }
+
   return content
 }