feat(webpack): support passing function as postcssOptions

[obulat]

🔗 Linked issue

resolves #7015
#19482
closes #8899

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This is an updated version of #8899 that applies the changes to the now-default PostCSS 8 config.

If postcss config is a function, we execute the custom function, but we also apply the default config of Nuxt. Therefore we can ensure that the config has a minimum default.

Postcssconfig can either be an object (already supported) or a function which gets passed in the loadercontext. But nuxt does not support passing in a function currently.

Why

Passing in a function allows more complex uses cases, e.g. by applying different postcss steps for different ressources. (see also https://github.com/webpack-contrib/postcss-loader#function)

Solution

This approach adds a new "postcssConfig" option to the "postcss" Nuxt config. Either this is the regular postcssConfig, or it is a function. see https://webpack.js.org/loaders/postcss-loader/#postcssoptions
(only works with postcss@8, because postcss-loader >= 4.0 is required, and postcss7 nuxt setup conflicts with this version of postcss-loader)

e.g.
nuxt.config.js.

module.exports = {
  build: {
    postcss: {
      postcssOptions: loaderContext => {
        // e.g. do something else with ".sss" files
        if (/\.sss$/.test(loaderContext.resourcePath)) {
          return {
            parser: 'sugarss',
            plugins: [['postcss-short', { prefix: 'x' }], 'postcss-preset-env']
          };
        }

        return {
          plugins: [['postcss-short', { prefix: 'x' }], 'postcss-preset-env']
        };
      }
    }
  }
};

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[obulat]

I am not sure that this change correctly applies the preset properties to the postcss-preset-env configuration.
I also don't know how to add tests. Is there an existing test that I could adjust for this change, @danielroe?

I would also need to open a separate PR for updating the documentation. The current section on PostCSS config sessions has not yet been updated to Nuxt 2.16 changes (https://nuxtjs.org/docs/configuration-glossary/configuration-build#postcss)

[obulat]

I am not sure that this change correctly applies the preset properties to the postcss-preset-env configuration.

I have extracted the changes to preset to a separate PR (#19518) because it makes the review faster, and I could test that it works.

I'm not sure how to test this PR, though.

[codecov-commenter]

Codecov Report

Patch coverage: 64.51% and project coverage change: -0.03 ⚠️

Comparison is base (83e6869) 66.18% compared to head (60735c7) 66.16%.

Additional details and impacted files

@@            Coverage Diff             @@
##              2.x   #19495      +/-   ##
==========================================
- Coverage   66.18%   66.16%   -0.03%     
==========================================
  Files          93       93              
  Lines        4096     4105       +9     
  Branches     1158     1163       +5     
==========================================
+ Hits         2711     2716       +5     
- Misses       1119     1123       +4     
  Partials      266      266              

Flag	Coverage Δ
unittests	66.16% <64.51%> (-0.03%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
packages/config/src/config/build.js	100.00% <ø> (ø)
packages/webpack/src/utils/postcss.js	77.06% <64.51%> (-1.94%)	⬇️

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[danielroe]

@obulat would you be happy to resolve conflicts in this PR? I can help with adding a test fixture.

[danielroe]

@obulat Thank you for updating. I've now added a potential way to test the postcss function config, which is now passed through unchanged through the normalisation function.

[danielroe]

Merging to include in 2.17. Feel free to come back to me if you think there's anything missing here.

[obulat]

Merging to include in 2.17. Feel free to come back to me if you think there's anything missing here.

Thank you for getting this PR finished, @danielroe!