Postcss-custom-media not working with Next.js

[zhrivodkin]

Hello! It seems that postcss-custom-media not working with Next.js if it being configured accordingly to their guidelines without importFrom prop, which one has been deprecated somewhere after 8.0.0 plugin version when postcss-preset-env updated. Can you please give me an advise what to do? Leave working 8.0.0? Wait for updates?

Thank you.

[romainmenke]

Hi @zhrivodkin,
Thank you for reaching out.

Do you have a minimal reproduction or a more detailed description of "not working"?

As far as we know there is no interaction between postcss-custom-media and Next.js itself, so this is likely related to how CSS is structured and imported in a Next.js project.

[zhrivodkin]

Hi @romainmenke, thanks for answer, my minimal working setup (with css modules) is:

/* package.json */
...
"next": "^13.1.5",
"react": "^18.2.0",
"@babel/preset-env": "^7.16.11",
"babel-loader": "^8.2.3",
"css-loader": "^6.6.0",
"postcss-loader": "^7.0.2",
"postcss-custom-media": "8.0.0",
...

/* custom-media.css */
@custom-media --mobile (min-width: 428px);
@custom-media --tablet-s (min-width: 768px);
...

/* postcss.config.js */
const path = require('path');
module.exports = {
  plugins: [
    ...
    ['postcss-custom-media', {
      importFrom: path.resolve(__dirname, 'src/assets/styles/custom-media.css')
    }]
  ],
};
...

/* timetable.module.css */
.timetable {
  height: 51px;
  margin-top: 3px;

  @media (--tablet-s) {
    height: 60px;
    margin-top: 4px;
  }
}

Result:

@media (min-width: 768px)
.styles_timetable__sxkq2 {
  height: 60px;
  margin-top: 4px;
}

And when I update custom-media lib to version 9.1.1, remove importFrom option from postcss.config.js and import custom-media.css to my global styles, no conversion occures, I don't see any CSS code wrapped by @media in result code. Maybe I need to update some other libs or import my custom media variables directly in every file where I use them?

[romainmenke]

Hi @zhrivodkin Thank you for this,

Is it possible to put this together in something like stackblitz?
I don't know next, react or css modules, so it is hard for me to create something that will accurately reproduce your issue.

This is important because the plugin does work for other stacks and setups.
To be able to help with your setup we must have something we can test :)

[romainmenke]

@zhrivodkin We have created a new plugin that might resolve your issue : https://www.npmjs.com/package/@csstools/postcss-global-data

Can you check this out and let us know if everything works as expected?

[romainmenke]

@zhrivodkin All other issues that have been reported to us have been resolved with the addition of this new plugin.

It would be awesome if we could know if this is also fixed or not.

[romainmenke]

I am assuming this is fixed.
Closing because we haven't received any new info.

[zhrivodkin]

Yes, problem resolved, thank you very much!