Question 255580 in CSS Question posted in
Some basic documentation can be found here.

Error: [postcss-custom-media] "importFrom" is no longer supported

I have a project that use postcss-custom-media library and recently I upgrade all libraries since they were very old. While doing upgrade ablove library got upgrade to 10.0.1 from 7.0.8. Now the build throws following error for couple of places.

./components/add-response/add-response.module.css
Error: [postcss-custom-media] "importFrom" is no longer supported
    at creator (/home/ravinda/Codes/npp_srilanka/community-forum-frontend/node_modules/postcss-custom-media/dist/index.cjs:1:7381)
    at /home/ravinda/Codes/npp_srilanka/community-forum-frontend/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:67:63
    at plugin (/home/ravinda/Codes/npp_srilanka/community-forum-frontend/node_modules/next/dist/build/webpack/config/blocks/css/plugins.js:35:44)
    at Processor.normalize (/home/ravinda/Codes/npp_srilanka/community-forum-frontend/node_modules/next/node_modules/postcss/lib/processor.js:36:13)
    at new Processor (/home/ravinda/Codes/npp_srilanka/community-forum-frontend/node_modules/next/node_modules/postcss/lib/processor.js:11:25)
    at postcss (/home/ravinda/Codes/npp_srilanka/community-forum-frontend/node_modules/next/node_modules/postcss/lib/postcss.js:26:10)
    at /home/ravinda/Codes/npp_srilanka/community-forum-frontend/node_modules/next/dist/build/webpack/config/blocks/css/index.js:127:37
    at async /home/ravinda/Codes/npp_srilanka/community-forum-frontend/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js:51:40
    at async Span.traceAsyncFn (/home/ravinda/Codes/npp_srilanka/community-forum-frontend/node_modules/next/dist/trace/trace.js:105:20)

Following is the postcss.config.js

module.exports = {
  plugins: {
    'postcss-nested': {},
    'postcss-custom-media': {
      importFrom: [
        {
          customMedia: { '--m': '(min-width: 640px)' }
        },
        ,
        {
          customMedia: { '--t': '(min-width: 980px)' }
        }
      ]
    }
  }
}

My UI/UX understanding is very poor but it seems like a alias becase --t and --, has been used in other files.

  @media (--t) {
    padding-left: 24px;
    padding-right: 0;
    grid-template-columns: 1fr 250px;
  }

I couldn’t find now to resolve this error but saw that postcss-custom-media is deprecated and should use postcss-preset-env rather. But I couldn’t fiture out how to same with that.

Any tips on how to get the resolved with minimum changes is much appriciate.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Following got rid of the build errors. Yets to see if stying works same becase app is not working properly due to other depcrecated things.

    module.exports = {
  plugins: {
    'postcss-nested': {},
    'postcss-custom-media': {
      customMedia: {
        '--m' : '(min-width: 640px)',
        '--t': '(min-width: 980px)',
      }
    }
  }
}

  2. 0

    use postcss-preset-env

    module.exports = {
  plugins: {
    'postcss-nested': {},
    'postcss-preset-env': {
      stage: 1, // Enables custom properties and media queries
      features: {
        'custom-media-queries': {
          preserve: false,
          importFrom: [
            {
              customMedia: {
                '--m': '(min-width: 640px)',
                '--t': '(min-width: 980px)'
              }
            }
          ]
        }
      }
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search