Allow overriding the responsive viewport sizes min-width value

[jkbreunig]

Is your feature request related to a problem? Please describe. I intend to implement a vertical layout for the small viewport size, and a horizontal layout for larger viewport sizes. Reshaped sets the min width for the medium viewport to 660px. I would like to override this value so that 630px is set as the min-width for the medium viewport size.

Describe the solution you'd like Ability to override the min-width values for the viewport sizes as part of the theme definition in reshaped.config.js

[blvdmitry]

Hey, thanks for opening the issue. Got to think about it for a bit. Custom media queries are not supported in browsers natively, so we're adding support for them with a postcss plugin which should now about where they're imported from during the build. So in case you're building a theme with a custom location - there should be a way to pass that location through the config or another way to automatically import it to all css files

[blvdmitry]

While I'm updating some documentation for this feature, I've shipped a beta version that you can try: 2.7.5-beta.0. It has an additional step to how this custom viewports are consumed due to having no native custom media queries support and since products customizing media queries are also changing them in our components code.

1. You can now add a viewport field in the theme definition. It supports m, l and xl keys with the { minPx: number } format.
2. Build the updated theme (it will include a few new variables related to another feature coming in 2.8.0). You build will now output a media.css file next to the theme.css.
3. In you postcss config, switch to using the new getConfig function, instead of using the config directly. That will allow you to pass the path to this generated file:

// postcss.config.js
const path = require('path');
const { getConfig } = require("reshaped/config/postcss");

module.exports = getConfig({ 
  themeMediaCSSPath: path.resolve(__dirname, 'src/themes/plain/media.css'),
});

Please, let me know if it works in your case, since postcss css is always very fragile when it comes to all the front-end frameworks and how they handle its configuration internally

[jkbreunig]

@blvdmitry this solution works for my project that is using Next.js 14. Thanks for quickly implementing this feature!

[blvdmitry]

I've just shipped 2.8.0, announcing it tomorrow morning. It shouldn't be very different from the beta but sharing it in case you prefer using stable version numbers