feat(webpack)!: update postcss to v8

[clarkdo]

Types of changes

• New feature (a non-breaking change which adds functionality)

Description

Update postcss to v8:

• Move to postcss-loader options
• Update css-loader, postcss-import, postcss-url and postcss-loader
• Disable postcss-preset-env as it doesn't support postcss8
• Warn message if user is using build.postcss.preset
• Add autoprefixer as default plugins of postcss

NOTE: this is a breaking change for build.postcss config:

• postcss-preset-env and build.postcss.preset have been removed as it doesn't support postcss v8
• build.postcss has been moved to postss-loader options format:
• build.postcss.plugins to build.postcss.postcssOptions.plugins, the object format is still same
• build.postcss.order to build.postcss.postcssOptions.order

  {
+   postcssOptions: {
      plugins: {
        'postcss-import': {},
        'postcss-url': {},
        'postcss-preset-env': this.preset,
        'cssnano': { preset: 'default' } // disabled in dev mode
      },
      order: 'presetEnvAndCssnanoLast',
+   },
    preset: {
      stage: 2
    },
    // Other postcss-loader options https://github.com/webpack-contrib/postcss-loader#options
  }

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[pi0]

Notes:

• Probably worth including a rework of feat(postcss-loader): support passing in a function for postcss definition #8899 for function support
• We need to also update pending optimize-css-assets-webpack-plugin and cssnano
• We need to self-disable nuxt/postcss8 when 2.16+ detected

[codecov-commenter]

Codecov Report

❌ Patch coverage is 75.60976% with 10 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.55%. Comparing base (9677fbe) to head (6629751).
⚠️ Report is 315 commits behind head on 2.x.

Files with missing lines	Patch %	Lines
packages/config/src/options.js	28.57%	5 Missing ⚠️
packages/webpack/src/utils/postcss.js	83.87%	5 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##              2.x    #9671      +/-   ##
==========================================
+ Coverage   65.19%   66.55%   +1.35%     
==========================================
  Files          94       93       -1     
  Lines        4155     4075      -80     
  Branches     1172     1149      -23     
==========================================
+ Hits         2709     2712       +3     
+ Misses       1167     1103      -64     
+ Partials      279      260      -19     

Flag	Coverage Δ
unittests	66.55% <75.60%> (+1.35%)	⬆️

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Saggitarie]

@pi0
Hey, thanks for your work on this!
Exactly what I was looking for.

When is this going to get merged? This works with configuring sugarss by setting the loader under postcssOptions property right?

[Saggitarie]

This is what I'm trying to do.

#9723

Trying to make postcss-loader read sugarss syntax so that I can use .sss extension inside nuxt app.

[pi0]

@Saggitarie It will be released soon with nuxt-edge and 2.16 in the upcoming weeks. Meanwhile, you can use nuxt/postcss8 module.

[Saggitarie]

@Saggitarie It will be released soon with nuxt-edge and 2.16 in the upcoming weeks. Meanwhile, you can use nuxt/postcss8 module.

Is nuxt/postcss8 compatible with sugarss (.sss)?

[clarkdo]

Is nuxt/postcss8 compatible with sugarss (.sss)?

sugarss is a different parser and also new file extension, so you can set up the new webpack rule, what you need is:

• Install sugarss to devDependencies
• Add .sss rule and loaders

// nuxt.config
export default {
  build: {
    extend(config, { loaders }) {
      config.module.rules.push({
        test: /\.sss$/i,
        use: [
          { loader: 'vue-style-loader', options: loaders.vueStyle },
          { loader: 'css-loader', options: loaders.css },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: { parser: 'sugarss' },
            },
          },
        ],
      });
    },
  },
};

[Saggitarie]

Is nuxt/postcss8 compatible with sugarss (.sss)?

sugarss is a different parser and also new file extension, so you can set up the new webpack rule, what you need is:

* Install sugarss to devDependencies

* Add .sss rule and loaders

// nuxt.config
export default {
  build: {
    extend(config, { loaders }) {
      config.module.rules.push({
        test: /\.sss$/i,
        use: [
          { loader: 'vue-style-loader', options: loaders.vueStyle },
          { loader: 'css-loader', options: loaders.css },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: { parser: 'sugarss' },
            },
          },
        ],
      });
    },
  },
};

Hey thanks for the tips. Tried your way but I got

Syntax Error: SyntaxError friendly-errors 00:16:14
(39:2) Unknown word
37 |
38 | .api
39 | color: #FF0000

I'll dig for an issue on my side but it would be helpful if you have any idea on this.

[Saggitarie]

Is nuxt/postcss8 compatible with sugarss (.sss)?

sugarss is a different parser and also new file extension, so you can set up the new webpack rule, what you need is:

* Install sugarss to devDependencies

* Add .sss rule and loaders

// nuxt.config
export default {
  build: {
    extend(config, { loaders }) {
      config.module.rules.push({
        test: /\.sss$/i,
        use: [
          { loader: 'vue-style-loader', options: loaders.vueStyle },
          { loader: 'css-loader', options: loaders.css },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: { parser: 'sugarss' },
            },
          },
        ],
      });
    },
  },
};

Hey thanks for the tips. Tried your way but I got

Syntax Error: SyntaxError friendly-errors 00:16:14
(39:2) Unknown word
37 |
38 | .api
39 | color: #FF0000

I'll dig for an issue on my side but it would be helpful if you have any idea on this.

Also, I set the PostCSS plugins under build.postcss.plugins in an object form.

[clarkdo]

Your requirement for sugarss is a totally new webpack rule, so the setup is independent of the original build.postcss, all the configs are just pure webpack config.

BTW, the code I commeted above is for postcss 8, so you can use nuxt/postcss8 module as Pooya mentioned.

[Saggitarie]

Your requirement for sugarss is a totally new webpack rule, so the setup is independent of the original build.postcss, all the configs are just pure webpack config.

BTW, the code I commeted above is for postcss 8, so you can use nuxt/postcss8 module as Pooya mentioned.

Thanks for your response. Hmm, so will this new feature and nuxt/postcss8 still need the external file (postcss.config.js) to set the plugins to postcss-loader?

[hacknug]

• Disable postcss-preset-env as it doesn't support postcss8

Not necessary anymore since support for PostCSS v8 was introduced in the recently released v7 of the plugin: https://github.com/csstools/postcss-preset-env/releases/tag/7.0.0

[loick]

Hi there, any news about this update? 🙏

[dargmuesli]

The cssnano update for webpack included in this MR actually resolves a bug with tailwind classes not being generated (tailwindlabs/tailwindcss#7802), so I once again want to ask friendly what the status of this PR is :)

Edit: As this PR is not merged into dev yet, it is also not part of nuxt-edge it seems.

[Shooteger]

Whats the current state of this MR?

[dargmuesli]

Nuxt 3 will be released in 5 days. After that, there might be time for maintainers to take care of this.