How should we use it along with unocss

[david8z]

Was wondering how should we use it along with the library of unocss

At the moment to get it working I have:

1. Installed tailwindcss package (when using unocss you can use tailwindcss funcionality without having the package but this one is need for histories design system)
2. Added import uno.css on setup file

I am permanently seeing the following warning with this setup

[unocss-hmr] TypeError: __vite_ssr_import_meta__.hot.send is not a function
    at /Users/davidalarcon/Ilustrify/ilustrify-frontend/__uno.css:10:72
    at async ViteNodeRunner.directRequest (file:///Users/davidalarcon/Ilustrify/ilustrify-frontend/node_modules/vite-node/dist/client-e36231b1.js:159:5)
    at async ViteNodeRunner.cachedRequest (file:///Users/davidalarcon/Ilustrify/ilustrify-frontend/node_modules/vite-node/dist/client-e36231b1.js:73:12)
    at async request (file:///Users/davidalarcon/Ilustrify/ilustrify-frontend/node_modules/vite-node/dist/client-e36231b1.js:95:21)
    at async /Users/davidalarcon/Ilustrify/ilustrify-frontend/histoire.setup.ts:1:238
    at async ViteNodeRunner.directRequest (file:///Users/davidalarcon/Ilustrify/ilustrify-frontend/node_modules/vite-node/dist/client-e36231b1.js:159:5)
    at async ViteNodeRunner.cachedRequest (file:///Users/davidalarcon/Ilustrify/ilustrify-frontend/node_modules/vite-node/dist/client-e36231b1.js:73:12)
    at async request (file:///Users/davidalarcon/Ilustrify/ilustrify-frontend/node_modules/vite-node/dist/client-e36231b1.js:95:21)
    at async /Users/davidalarcon/Ilustrify/ilustrify-frontend/node_modules/histoire/dist/client/server/vue3/run.js:10:31
    at async ViteNodeRunner.directRequest (file:///Users/davidalarcon/Ilustrify/ilustrify-frontend/node_modules/vite-node/dist/client-e36231b1.js:159:5)

So was wondering how should I approach this?

[jolo-dev]

Also curious to know.

[jolo-dev]

Because histoire is asking for the import uno.css, I added it in one of my story and the devtool is going crazy (see below)
I think it heats up the machine. My CPU is also going crazy.
Pretty scary....

[danielduckworth]

I'm also trying to get this work. UnoCSS works just fine with Histoire until you drop a tailwind config into the mix.

I'm hoping to get the Design System feature working with UnoCSS.

@david8z did you make any progress on this?

Thanks,
Daniel.

[david8z]

I am afraid I moved away from histoire as I came through different issues.

[itpropro]

No updates here?

[piscis]

So what worked for me so far is to change the mode parameter from global to vue-scoped for Histoire vite builds. Its not perfect but its a workaround.

Example

// <root>/vite.config.ts
UnoCSS({
      mode: process.env.HISTOIRE ? 'vue-scoped' : 'global',
      configFile: path.resolve(__dirname, 'unocss.config.ts'),
    }),

// <root>/histoire.config.ts
export default defineConfig({
  plugins: [
    HstVue(),
  ],
  setupFile: path.resolve(__dirname, 'src/histoire.setup.ts'),
})

// <root>/src/histoire.setup.ts
import { defineSetupVue3 } from '@histoire/plugin-vue'
import { createPinia } from 'pinia'

import './assets/main.css'

export const setupVue3 = defineSetupVue3(({ app }) => {
  app.use(createPinia()) // Add Pinia store
})