fix(config): move preset to inner postcssOptions
#19518
Conversation
|
|
| if (postcssOptions.preset || postcssLoaderOptions.preset) { | ||
| postcssOptions.plugins = { | ||
| ...postcssOptions.plugins || {}, | ||
| 'postcss-preset-env': merge({}, postcssOptions.preset || postcssLoaderOptions.preset) |
There was a problem hiding this comment.
it might be worth merging all of them to support legacy modules (e.g. tailwind module) that are still interacting with nuxt config based on the old patterns.
There was a problem hiding this comment.
Do you mean merging all plugins, @danielroe? The postcss.plugins with postcss.postcssOptions.plugins? I think that that is done on lines 199...202.
Currently, the type for postcss is set to postcss?: string[] | boolean | { postcssOptions: PostcssConfiguration | (() => PostcssConfiguration) }, so it actually disallows the old way of setting the options. Should this type be ignored or updated to include the values that will be deprecated but are still in use?
I tried refactoring a normalize function (https://gist.github.com/obulat/4fd4cf28ec816c20e5818a053b15f3c5) to move all the top-level properties (plugins, order, preset) inside the inner postcssOptions, prioritizing the values that are already within postcssOptions. Would this be useful?
There was a problem hiding this comment.
The normalize function sounds great! My primary concern is not to support users explicitly passing in an old format but rather to handle the case where modules set nuxt.options.build.postcss.plugins (or similar). This happens after we initially normalise the config.
There was a problem hiding this comment.
I didn't know about modules setting plugins :) Do they set it after getting the config using postcss.config()? Then this solution will not work. But if they update the build config, and then call postcss.config with it, then this normalize function should work:
The config gets the outer postcss object, and then converts it by moving any top-level plugins, preset and order values to the inner postcssOptions object. Thus, the config object that we use to load plugins is {postcssOptions: {plugins: {}|[], preset: {}, order: {}}, with no other top-level properties but postcssOptions.
I spent a lot of time trying to debug the plugins that postcss-preset-env loads. I incorrectly understood the documentation to say, "the higher you set the stage, the more plugins will be added", and in fact, it is the opposite. While reading the documentation, I also saw that the default stage is already set in postcss-preset-env at 2, so I removed the default stage option of {preset: { stage: 2 }} from the settings here (replaced with {preset: {} }. Please, let me know if it's better to add it back.
Codecov ReportPatch coverage:
Additional details and impacted files@@ Coverage Diff @@
## 2.x #19518 +/- ##
==========================================
- Coverage 66.18% 65.96% -0.23%
==========================================
Files 93 93
Lines 4096 4113 +17
Branches 1158 1165 +7
==========================================
+ Hits 2711 2713 +2
- Misses 1119 1133 +14
- Partials 266 267 +1
Flags with carried forward coverage won't be shown. Click here to find out more.
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. |
Co-authored-by: Daniel Roe <daniel@roe.dev>
danielroe
changed the title
preset from postcss to inner postcssOptionspreset to inner postcssOptions
|
Thank you for all your work on this β€οΈ |
Thank you for helping me! |
π Linked issue
#19482
β Type of change
π Description
Resolves #19482. Nuxt 2.16 has updated PostCSS to version 8, and introduced a change into the
nuxt.configbuild.postcsssettings. It did not, however, update the way the defaults are set, which made it impossible to setpreset.This PR moves the default
presetfrombuild.postcsstobuild.postcss.postcssOptions. It also adds a test for the default setting, and updates the snapshots.This PR was extracted from #19495 to make it easier to review.
π Checklist