fix: broken tailwind tokens

duplicate vue runtime loaded into the page

packages/histoire/src/node/builtin-plugins/tailwind-tokens.ts

@@ -1,13 +1,7 @@
-import { createRequire } from 'module'
 import { BasePluginApi, Plugin } from '../plugin.js'
+import { getInjectedImport } from '../util/deps.js'
 import { findUp } from '../util/find-up.js'
 
-const require = createRequire(import.meta.url)
-
-function resolveImport (request) {
-  return JSON.stringify(require.resolve(request))
-}
-
 export interface TailwindTokensOptions {
   configFile?: string
 }
@@ -90,15 +84,15 @@ export function tailwindTokens (options: TailwindTokensOptions = {}): Plugin {
 
 const storyTemplate = (tailwindConfig: any) => `import 'histoire-style'
 import './style.css'
-import { createApp, h, markRaw, ref } from ${resolveImport('@histoire/vendors/vue')}
+import { createApp, h, markRaw, ref } from ${getInjectedImport('@histoire/vendors/vue')}
 import {
   HstColorShades,
   HstTokenList,
   HstTokenGrid,
   HstText,
   HstTextarea,
   HstNumber,
-} from ${resolveImport('@histoire/controls')}
+} from ${getInjectedImport('@histoire/controls')}
 
 const config = markRaw(${JSON.stringify(tailwindConfig, null, 2)})
 const search = ref('')

packages/histoire/src/node/util/deps.ts

@@ -0,0 +1,12 @@
+import { dirname, join } from 'pathe'
+import { fileURLToPath } from 'url'
+import { createRequire } from 'module'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const require = createRequire(import.meta.url)
+
+const isInHistoireMonorepo = __dirname.includes(join('packages', 'histoire', 'dist'))
+
+export function getInjectedImport (request: string) {
+  return JSON.stringify(isInHistoireMonorepo ? require.resolve(request) : request)
+}

packages/histoire/src/node/vite.ts

@@ -17,6 +17,7 @@ import { makeTree } from './tree.js'
 import { parseColor } from './colors.js'
 import { createMarkdownPlugins } from './markdown.js'
 import { getSearchDataJS, generateDocSearchData, generateTitleSearchData } from './search.js'
+import { getInjectedImport } from './util/deps.js'
 
 const require = createRequire(import.meta.url)
 
@@ -308,7 +309,7 @@ if (import.meta.hot) {
 
       if (id === RESOLVED_MARKDOWN_FILES) {
         const filesJs = ctx.markdownFiles.map(f => `${JSON.stringify(f.relativePath)}: () => import(${JSON.stringify(`./${f.relativePath}`)})`).join(',')
-        return `import { reactive } from ${JSON.stringify(require.resolve('@histoire/vendors/vue'))}
+        return `import { reactive } from ${getInjectedImport('@histoire/vendors/vue')}
         export const markdownFiles = reactive({${filesJs}})
         if (import.meta.hot) {
           window.__hst_md_hmr = (newModule) => {