imported lib files are not scanned

[germsb]

Describe

In monorepo, I have two project, one component library, one app. Both use vite, windicss and vue.

The library export tree-shakable components

export {default as TestComp1} from './components/Test1.vue';
export {default as TestComp2} from './components/Test2.vue';

TestComp1 looks like this:

<template>
    <div class="bg-pink-500 text-white">hello</div>
</template>

<script setup lang="ts"></script>

Then I import library component in the app

<template>
    <div class="bg-purple-400">
        <TestComp1/>
    </div>
</template>

<script setup lang="ts">
import {TestComp1} from 'windicss-lib';
</script>

bg-pink-500 and text-white classes are not generated.

I have checked the plugin options but I did not find a solution. If i Include the node_modules for scan, I'm afraid of ending up with too much CSS, because it will scan all the components even the ones I don't use.

Edit:

indeed, if I add my lib to the scan.dir option, it is scanned as a whole, so at the end, I will have to purge the final bundle.

Versions

• vite-plugin-windicss: 0.8.2
• vite: 2.05
• framework(vue/react/svelte/etc): vue 3.0.7

Additonal Context

[hannoeru]

You can use scan.include: [ComponentFullPath] option to include it, or add component class to safelist option.

[germsb]

Yes i can, but to maintain its a real hassle. Imagine if my library has 300 components and I use a hundred... better to use purgecss at the end

[germsb]

After somes investigations, it turns out that only the hmr handleHotUpdate can generate the lib classes. When I build or start dev server, only main app classes are generated, but when I modify lib components, its ok.

  vite-plugin-windicss:scan:transform /home/germs/dev/vite-plugin-windicss/examples/vue-lib/src/Nan.vue +34s
  vite-plugin-windicss:detect:class Set(1) { 'mb-2' } +34s
  vite-plugin-windicss:detect:tag Set(0) {} +34s
  vite-plugin-windicss:hmr refreshed by /home/germs/dev/vite-plugin-windicss/examples/vue-lib/src/Nan.vue +34s
22:49:12 [vite] hmr update /@windicss/windi.css
hmr update /@fs/home/germs/dev/vite-plugin-windicss/examples/vue-lib/src/Nan.vue (x2)
  vite-plugin-windicss:compile compiled 1 classes +34s
  vite-plugin-windicss:compile [ 'mb-2' ] +0ms
  vite-plugin-windicss:transform:group /home/germs/dev/vite-plugin-windicss/examples/vue-lib/src/Nan.vue +34s

[germsb]

In main app, all files that are not excluded by user options and somes internals plugin regex are scanned even if they are not imported in the entry point tree. This results in overestimated css output. eg: create non imported component with classes used nowhere, build your app and check your css output.

[antfu]

That's a good point @germsb, maybe we can have a different strategy to do that on the build. Thanks for bring this up

[Brinken90]

@antfu any updates on this? I'm running into the same issue. If not, you wrote that a function for generating the safelist in this issue #132 , do you know if it would be possible to access the component list inside of a plugin?

[michealroberts]

I think monorepo support for windicss should be made a priority in the coming months. What help is needed to achieve this?

[halilyuce]

I'm having a similar problem and unfortunately I still haven't found a solution even though I've tried tons of things. any progress? @antfu