feat: import external style files tags api

.changeset/mean-garlics-nail.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Ensure external style files are imported for tags api component.

packages/runtime-tags/src/__tests__/fixtures/custom-tag-separate-assets/__snapshots__/dom.expected/template.js

@@ -1,5 +1,6 @@
 export const _template_ = "<div></div>";
 export const _walks_ = /* over(1) */"b";
 export const _setup_ = () => {};
+import "./template.style.css";
 import * as _$ from "@marko/runtime-tags/debug/dom";
 export default /* @__PURE__ */_$.createTemplate("__tests__/template.marko", _template_, _walks_, _setup_);

packages/runtime-tags/src/translator/util/get-style-file.ts

@@ -0,0 +1,56 @@
+import type { types as t } from "@marko/compiler";
+import path from "path";
+
+export default function getStyleFile(file: t.BabelFile) {
+  const { filename } = file.opts;
+  const fs = file.markoOpts.fileSystem;
+  const base = getBase(filename);
+  const styleMatch = new RegExp(
+    `^(${escapeRegExp(base)}\\.${"index" === base ? "|" : ""})style\\.\\w+$`,
+  );
+
+  for (const file of fs.readdirSync(path.dirname(filename)).sort()) {
+    if (styleMatch.test(file)) {
+      return `./${file}`;
+    }
+  }
+}
+
+/**
+ * Given a filename, gets the base name, strips off the file extension
+ * and removes any arc flags (https://github.com/eBay/arc).
+ *
+ * @example
+ * getBase("/dir/foo.marko") // => "foo"
+ * getBase("/dir/foo.bar.marko") // => "foo.bar"
+ * getBase("/dir/foo[bar].marko") // => "foo"
+ * getBase("/dir/foo[bar].baz.marko") // => "foo.baz"
+ */
+function getBase(filename: string) {
+  const start = filename.lastIndexOf(path.sep) + 1;
+  const leftDot = filename.indexOf(".", start);
+
+  if (leftDot === -1) {
+    return filename.slice(start);
+  }
+
+  const rightDot = filename.lastIndexOf(".");
+  const closeBracket = leftDot - 1;
+  if (filename[closeBracket] === "]") {
+    const openBracket = filename.lastIndexOf("[", closeBracket);
+    if (openBracket > start) {
+      // If we match a "]" before the extension and find a "[" before that,
+      // then we have an arc flag. Strip it off.
+      return (
+        filename.slice(start, openBracket) + filename.slice(leftDot, rightDot)
+      );
+    }
+  }
+
+  return filename.slice(start, rightDot);
+}
+
+const regexpCharsReg = /[\\^$.*+?()[\]{}|]/g;
+function escapeRegExp(str: string) {
+  return str.replace(regexpCharsReg, "\\$&");
+}

packages/runtime-tags/src/translator/visitors/program/dom.ts

@@ -1,6 +1,8 @@
 import { types as t } from "@marko/compiler";
+import { importDefault } from "@marko/compiler/babel-utils";
 
 import { bindingHasDownstreamExpressions } from "../../util/binding-has-downstream-expressions";
+import getStyleFile from "../../util/get-style-file";
 import { map } from "../../util/optional";
 import { callRuntime } from "../../util/runtime";
 import {
@@ -38,6 +40,11 @@ export default {
           ? initValue(paramsBinding)
           : undefined;
 
+      const styleFile = getStyleFile(program.hub.file);
+      if (styleFile) {
+        importDefault(program.hub.file, styleFile);
+      }
+
       forEachSectionReverse((childSection) => {
         if (childSection !== section) {
           const tagParamsSignal =