postcss-preset-env not being run on css modules during build

Bug report

Describe the bug

When I develop locally the css vars in my css modules (eg: background: var(--white);) get converted by postcss-preset-env to the actual values stored in a vars.css file which look like this:

:root {
  --white: #F4F4F4;
  /* ...etc */
}

This also gets applied to a global stylesheet.

However, when I run next build, it seems like postcss-preset-env doesn’t recognise these variables and generates css that includes background: var(--white); with no fallback. The CSS in my global stylesheet does get converted.

I have a PostCSS config that looks like this:

module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'postcss-import': {},
    'postcss-mixins': {},
    'postcss-calc': {},
    'postcss-nested': {},
    'postcss-color-mod-function': {
      importFrom: [
        './assets/styles/vars.css',
      ],
    },
    'postcss-preset-env': {
      stage: 1,
    },
  },
}

and I’m not using next-css.

Expected behavior

postcss-preset-env should convert the CSS variables in my CSS modules when running next build.

System information

• OS: MacOS
• Version of Next.js: 9.2.1

[bravokiloecho]

I fixed it by modifying the config of postcss-present-env to include an importFrom setting that loaded the definition of the CSS vars:

'postcss-preset-env': {
      stage: 1,
      preserve: false,
      importFrom: [
        './assets/styles/vars.css',
      ],
},

[balazsorban44]

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.