Vite: Viewing complete styles payload or styles file

[paulm17]

Summary

With NextJS it's possible to view the full styles by right clicking and opening in a new window.

Unfortunately with Vite, it's not possible to do this. (or I have not found a way).

I have a very large and extensive style payload. How can I view this in a browser window or another way? Perhaps an option to log to a file?

Examples

No response

Motivation

I have quite an extensive and very large set of styles from a UI component library and in future a large app.

I need a way of debugging the stylesheet generated by pigment-css using Vite.

Search keywords: vite

[brijeshb42]

Not sure I understand. You right click where and view what ?
You can enable sourceMap to true in your Pigment CSS config to enable source maps that'll show up in the browser devtools alongside the generated class name. Clicking on it will take you to where the style was actually defined in the JS/TS file.

[paulm17]

This is with NextJS. As you'll see. I can click the link to the stylesheet and open a new window. With the full stylesheet there.

video

I can't seem to do the same with vite.

Clicking on it will take you to where the style was actually defined in the JS/TS file.

This isn't comparable. I want to see the full stylesheet as I want to eliminate errors that I have introduced. For example borderBottomTop is valid. borderbottomTop is not and will still be in the stylesheet so when I copy and paste into vscode. I can quickly scan the file for any issues.