apal21 / nextjs-progressbar

A simple Next.js progressbar component using NProgress.
https://www.npmjs.com/package/nextjs-progressbar
MIT License
776 stars 61 forks source link

export css file rather than injecting style tag #74

Closed hexiro closed 1 year ago

hexiro commented 2 years ago

Would it be possible to do what some other libraries do (namely, react-tippy) and export a css file rather than injecting a script tag? This way next can handle the styles, minify and bundle them with the other styles.

For backwards compatibility, you could have a prop called injectStyles and have it default to true. If you'd like

Lmk what you think :)

Reference (react-tippy): First, you need import css

import 'react-tippy/dist/tippy.css'

Edit: After revisiting, I see that the reason this is probably done is because color and height are injected into the css from the params passed by the user. I'm not against this, but I think that the style tag should atleast be minified.

https://github.com/apal21/nextjs-progressbar/blob/a122fd2303b26121f6c6a54fd1e45ad7f473ad1b/src/index.tsx#L109

alan-cooney commented 2 years ago

This would also make the W3C validator happy :)