feat(nuxt): support CSS + retrieve PostCSS config, fix #100

histoire-dev · Jun 2, 2022 · 10e4927 · 10e4927
1 parent d5e6140
commit 10e4927
Show file tree

Hide file tree

Showing 9 changed files with 495 additions and 3 deletions.
diff --git a/examples/nuxt3/components/BaseButton.vue b/examples/nuxt3/components/BaseButton.vue
@@ -20,7 +20,7 @@ defineProps({
 <template>
   <button
     :disabled="disabled"
-    class="btn"
+    class="btn text-red-500"
     :class="{
       [`btn-color-${color}`]: color,
       [`btn-size-${size}`]: size,
@@ -31,7 +31,7 @@ defineProps({
   </button>
 </template>
 
-<style scoped>
+<style lang="pcss" scoped>
 .btn {
   border-radius: 4px;
   padding: 4px 8px;

diff --git a/examples/nuxt3/nuxt.config.ts b/examples/nuxt3/nuxt.config.ts
@@ -2,5 +2,7 @@ import { defineNuxtConfig } from 'nuxt'
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-
+  modules: [
+    '@nuxtjs/tailwindcss',
+  ],
 })
diff --git a/examples/nuxt3/package.json b/examples/nuxt3/package.json
@@ -9,6 +9,7 @@
   },
   "devDependencies": {
     "@histoire/plugin-nuxt": "workspace:*",
+    "@nuxtjs/tailwindcss": "^5.1.2",
     "histoire": "workspace:*",
     "nuxt": "^3.0.0-rc.3"
   }

diff --git a/packages/histoire-plugin-nuxt/src/index.ts b/packages/histoire-plugin-nuxt/src/index.ts
@@ -36,9 +36,13 @@ export function HstNuxt (): Plugin {
             alias: nuxtConfig.viteConfig.resolve.alias,
           },
           plugins,
+          css: nuxtConfig.viteConfig.css,
           // @ts-expect-error Vue-specific config
           vue: nuxtConfig.viteConfig.vue,
         },
+        setupCode: [
+          `${nuxt.options.css.map(file => `import '${file}'`).join('\n')}`,
+        ],
       }
     },
 

diff --git a/packages/histoire/src/client/app/components/sandbox/SandboxVue3.vue b/packages/histoire/src/client/app/components/sandbox/SandboxVue3.vue
@@ -5,6 +5,8 @@ import { getTagName } from '../../codegen/vue3'
 import { applyStateToVariant } from '../../util/state'
 // @ts-expect-error virtual module id
 import * as setup from '$histoire-setup'
+// @ts-expect-error virtual module id
+import * as generatedSetup from '$histoire-generated-global-setup'
 
 const props = defineProps({
   variant: {
@@ -114,6 +116,14 @@ async function mountVariant () {
     },
   })
 
+  if (typeof generatedSetup?.setupVue3 === 'function') {
+    await generatedSetup.setupVue3({
+      app,
+      story: props.story,
+      variant: props.variant,
+    })
+  }
+
   if (typeof setup?.setupVue3 === 'function') {
     await setup.setupVue3({
       app,

diff --git a/packages/histoire/src/client/server/vue3/run.ts b/packages/histoire/src/client/server/vue3/run.ts
@@ -5,6 +5,8 @@ import Story from './Story.vue'
 import Variant from './Variant.vue'
 // @ts-expect-error virtual module id
 import * as setup from '$histoire-setup'
+// @ts-expect-error virtual module id
+import * as generatedSetup from '$histoire-generated-global-setup'
 
 export async function run ({ file, storyData, el }: ServerRunPayload) {
   const { default: Comp } = await import(file.moduleId)
@@ -23,6 +25,10 @@ export async function run ({ file, storyData, el }: ServerRunPayload) {
     },
   })
 
+  if (typeof generatedSetup?.setupVue3 === 'function') {
+    await generatedSetup.setupVue3({ app })
+  }
+
   if (typeof setup?.setupVue3 === 'function') {
     await setup.setupVue3({ app })
   }

diff --git a/packages/histoire/src/node/config.ts b/packages/histoire/src/node/config.ts
@@ -125,6 +125,10 @@ export interface HistoireConfig {
    * Example: `'/src/histoire-setup.ts'`
    */
   setupFile?: string
+  /**
+   * Setup code created by plugins
+   */
+  setupCode?: string[]
   /**
    * Predefined responsive sizes for story playgrounds.
    */
@@ -303,6 +307,11 @@ export const mergeConfig = createDefu((obj: any, key, value) => {
     return true
   }
 
+  if (obj[key] && key === 'setupCode') {
+    obj[key] = [...obj[key], ...value]
+    return true
+  }
+
   // By default, arrays should be replaced
   if (obj[key] && Array.isArray(obj[key])) {
     obj[key] = value

diff --git a/packages/histoire/src/node/vite.ts b/packages/histoire/src/node/vite.ts
@@ -31,6 +31,8 @@ export const SEARCH_TITLE_DATA_ID = '$histoire-search-title-data'
 export const RESOLVED_SEARCH_TITLE_DATA_ID = `/${SEARCH_TITLE_DATA_ID}-resolved`
 export const SEARCH_DOCS_DATA_ID = '$histoire-search-docs-data'
 export const RESOLVED_SEARCH_DOCS_DATA_ID = `/${SEARCH_DOCS_DATA_ID}-resolved`
+export const GENERATED_GLOBAL_SETUP = '$histoire-generated-global-setup'
+export const RESOLVED_GENERATED_GLOBAL_SETUP = `/${GENERATED_GLOBAL_SETUP}-resolved`
 
 export async function resolveViteConfig (ctx: Context): Promise<ResolvedConfig> {
   const command = ctx.mode === 'dev' ? 'serve' : 'build'
@@ -122,6 +124,9 @@ export async function getViteConfigWithPlugins (server: boolean, ctx: Context):
       if (id.startsWith(SEARCH_DOCS_DATA_ID)) {
         return RESOLVED_SEARCH_DOCS_DATA_ID
       }
+      if (id.startsWith(GENERATED_GLOBAL_SETUP)) {
+        return RESOLVED_GENERATED_GLOBAL_SETUP
+      }
     },
 
     async load (id) {
@@ -188,6 +193,9 @@ if (import.meta.hot) {
       if (id === RESOLVED_SEARCH_DOCS_DATA_ID) {
         return getSearchDataJS(await generateDocSearchData(ctx))
       }
+      if (id === RESOLVED_GENERATED_GLOBAL_SETUP) {
+        return ctx.config.setupCode?.join('\n;')
+      }
     },
 
     handleHotUpdate (updateContext) {