You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
./node_modules/intl-tel-input/build/css/intlTelInput.css
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global
Location: components/ui/Form/Fields/Tel/Tel.js
As expected, if I add it to my _app.js, it does work.
The issue is that the styles for the plugins will be loaded on each and every page even if TelInput is not present, which essentially breaks the re-usability of my component by making it it dependent on context (App).
Ultimately it's not a big deal to have this one plugin CSS loaded globally, but given the number of plugins out there that require some form of styles import, this could eventually bloat the global style.
Hi @kirkas. There is an RFC for functionality to allow component scoped CSS without using modules. It might be best to keep everything together so feel free to comment on that discussion.
next@^9.5.4-canary.10 now allows you to import Global CSS from node_modules anywhere in your application. This improves interoperability with third-party React libraries that require you import their CSS, but don't want it to increase bundle size for your entire application.
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.
vercel
locked as resolved and limited conversation to collaborators
Jan 29, 2022
Sign up for freeto subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Feature request
Ability to load 3rd party global styles either conditionally or directly from a component.
Problem description
Forcing the use of .module.css or global.css in app is great when it comes to organizing and practicing healthy css structure, but it starts to be limiting when it comes to 3rd party plugins. (source: https://nextjs.org/docs/basic-features/built-in-css-support#adding-a-global-stylesheet)
Usecase:
I'm trying to implement the great https://github.com/jackocnr/intl-tel-input to make my
<input type="tel"/>
look nicer. I came up with small re-usable componentThis instantiate the plugin correctly, but the styles are missing. If I import the styles from the components:
I get the (expected) error:
As expected, if I add it to my _app.js, it does work.
The issue is that the styles for the plugins will be loaded on each and every page even if TelInput is not present, which essentially breaks the re-usability of my component by making it it dependent on context (App).
Ultimately it's not a big deal to have this one plugin CSS loaded globally, but given the number of plugins out there that require some form of styles import, this could eventually bloat the global style.
Describe the solution you'd like
Potential solutions:
Ideal solution: Scoped flag for import
Which would render
Instead of
Scope a global import by the given class class:
Renders
Allow global import from node_modules within components, maybe with a flag like
import 'intl-tel-input/build/css/intlTelInput.css' !global
A getStaticStyles implementation which lets you load & compile additional styles for a given page
The text was updated successfully, but these errors were encountered: