Currently utilizing Next.js version 9.53.
Utilizing the built-in CSS module support provided by Next.js without the use of CSS pre-processors (less, sass, etc.) or CSS-in-JS (styled-components, etc.).
Presently, my approach involves writing CSS in a mobile-first manner with redundant media queries such as:
/* "desktop" */
@media screen and (min-width: 1024px) {
...
}
These duplicate copies of media queries exist in various modules. While I appreciate having alternative styles nearby default styling definitions, the reliance on specific pixel values in the media queries is not ideal for me.
In addition to defining high-level elements in a "global" CSS file and using CSS variables extensively for consistency throughout module CSS, I face limitations when it comes to sharing breakpoints across different media queries, as explained in this SO answer.
I am seeking a solution akin to CSS variables that allows for sharing size breakpoints among multiple media queries:
- My preference is to maintain alternative CSS queries close to their defaults within respective modules rather than consolidating them into one centralized location.
- An uncomplicated resolution would be preferable, avoiding significant changes to the build process like incorporating a CSS pre-processor solely for this purpose.