fix(playground): update @marko/run to 0.11.8 so <style> tags compile

[rturnq]

A <style> tag in the playground failed both the browser and the server build with g.default is not a constructor, so the result pane showed only BUILD FAILED for any template containing one.

Cause

marko/dist/translator/index.js › getStyleImportPath():

const magicString = sourceMaps ? new magic_string.default(file.code, { filename }) : void 0;

The translator is CommonJS built with Node-mode interop, __toESM(require("magic-string"), 1), which unconditionally re-exposes module.exports as .default. That is correct in Node, where magic-string's CommonJS build does module.exports = MagicString.

@marko/run before 0.11.8 pinned resolve.conditions to ["browser", "import", "require", "production", "default"] for production client builds. magic-string's exports map lists import first, so with both conditions active the require() resolved to its ESM build. The namespace then took a second interop wrap:

require("magic-string")            { Bundle, SourceMap, default: MagicString }
__toESM(mod, 1).default            object   ← the namespace, not the class
__toESM(mod, 1).default.default    function ← the class, one level too deep

new magic_string.default(...) therefore threw. Both builds failed because getStyleImportPath runs from the <style> tag's analyze hook rather than a target-specific translate, and the playground compiles with sourceMaps: true, so the call is reached for html and dom alike. Dev was unaffected, since those conditions were build-only.

Fix

0.11.8 moves the condition list to a configEnvironment hook and leaves import and require out of it, letting Vite append whichever one matches the importer. The require() now lands on the CommonJS build the interop expects. Resolved lists are ["module","browser","production","default"] for client and ["module","node","production","default"] for ssr.

No workaround is needed in vite.config.ts.

Verification

• Built the site and loaded /playground.html with a <style> template in headless Chromium: renders with no console errors, css=35B html=47B, matching what pnpm dev produced all along.
• magic-string's ESM namespace is gone from the playground chunk; the constructor call now receives the class.
• brand.html and a docs page load clean.
• 25/25 tests and marko-type-check pass.

Emitted assets total 42,134,764 bytes across 255 files, against 41,949,134 bytes across 258 files on the previous condition list. The condition change re-resolves other dual-published dependencies too, so that ~181 KB difference is expected rather than specific to magic-string.

Follow-up

This removes the trigger, not the underlying fragility. marko's translator is still CommonJS built with Node-mode interop, so it breaks anywhere a bundler resolves that require() to an ESM file, for instance a webpack or rspack conditionNames listing both. Worth raising against marko separately.

---

Generated by Claude Code

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5c43fa9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b06271ee-518e-41da-8e18-c09d359b1db8

📥 Commits

Reviewing files that changed from the base of the PR and between fc550e8 and 5c43fa9.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml and included by **

📒 Files selected for processing (1)

• package.json

---

Walkthrough

The pull request updates the @marko/run development dependency from ^0.11.6 to ^0.11.8 in package.json.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the @marko/run update and its purpose of fixing <style> tag compilation.
Description check	✅ Passed	The description directly explains the <style> compilation failure, root cause, fix, and verification results.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/style-tag-playground-error-gr8n6d

---

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

PR Preview Deployed (removed)

Your changes are live at markojs.com/previews/pr-272.

commit 5c43fa9