Working with unocss

[darkyelox]

Is your feature request related to a problem? Please describe.
I have tried to make this work with unocss and solidjs, the solid components are shown but no styles applied, my attempt was to use postcss plugin with unocss and created a postcss.config.js file:

wrapper.tsx file

import '../style.css'; 

import { JSX } from 'solid-js';

export const Wrapper = ({ children }: { children: JSX.Element }) => {
  return <div className="wrapped">{children}</div>;
};

postcss.config.js file

module.exports = {
  plugins: {
    '@unocss/postcss': {},
  },
};

style.css file:

@unocss;

I have noticed that somehow the plugin gets slow and if I play with the style.css file it may break and I have to close VSCode, kill all node processes and then start VSCode again.

Describe the solution you'd like
A guide of how to use unocss in all frameworks supported by previewjs.

Describe alternatives you've considered
For now I created a preview component for each component (in fact this is the one I want to preview in Previewjs) and created a global Preview component that import the preview file of each component dynamically ( I use a CLI command for select the preview file to import) and run a Vite server locally.

Additional context
I use Visual Studio code plugin.

[fwouts]

Hi @darkyelox, thanks for reporting this issue!

Could you please confirm:

• the path of your wrapper file (relative to package.json) should be __previewjs__/Wrapper.tsx
• what version of Preview.js are you using? (there was a release yesterday that improves various things related to process management)

[darkyelox]

Hi @darkyelox, thanks for reporting this issue!

Could you please confirm:

• the path of your wrapper file (relative to package.json) should be __previewjs__/Wrapper.tsx
• what version of Preview.js are you using? (there was a release yesterday that improves various things related to process management)

Yes the wrapper is in that directory, the file is named like that and is recognized by the extension, I had the latest version until I read your comment and it had a newer version v1.26.1, tested again, seems faster, but the same results, unocss styles are not recognized, checking further my unocss.config.ts is not in the root folder (because is a monorepo project and config files are in a different folder) and there are all my unocss config, I did a little test creating a root unocss.config.ts but it seems that I got this error:

Maybe a working example with unocss and previewjs will be of help to me to investigate my particular case.

[fwouts]

Thanks for the additional info. Yes, you'd need the PostCSS and UnoCSS config files to be next to the package.json, which may not be ideal in a monorepo. The error you got looks promising to me!

Definitely a good idea to add an example with UnoCSS, I'll try and get that working.