feat(v2): allow extend PostCSS config #4185
Conversation
|
[V1] Deploy preview success Built with commit 10e843c |
|
Deploy preview for docusaurus-2 ready! Built with commit 10e843c |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-4185--docusaurus-2.netlify.app/classic/ |
|
Size Change: +12 B (0%) Total Size: 156 kB ℹ️ View Unchanged
|
| @@ -175,6 +176,33 @@ export function applyConfigureWebpack( | |||
| return config; | |||
| } | |||
|
|
|||
| export function applyConfigurePostCss( | |||
There was a problem hiding this comment.
was wondering if we need a new lifecycle for this case?
Maybe that should be part of configureWebpack? (as the post css loader is part of the webpack config?)
No strong opinions for now, just thinking out loud
There was a problem hiding this comment.
Of course, PostCSS plugins can be added via configureWebpack hook, but for this we need to duplicate a lot Docusaurus core code related to webpack, for example from this comment:
(Since this hook should return a valid webpack config, which will be merged with the default config).
Thus, configurePostCss is a handy and useful shortcut that you can use to quickly add the required PostCSS plugins. Or do you know a better way to achieve this?
There was a problem hiding this comment.
Thanks @lex111 , understand, and it will be useful for the upcoming tailwind theme too
What I see is that Gatsby does something similar with a plugin: https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-postcss/src/gatsby-node.js
And next does not really have a plugin system, but allow a local postcss.config.js and will support tailwind postcss enhancements in core soon: vercel/next.js#20030.
That does not look viable for our usecase so the most convenient is indeed a new lifecycle as themes can enhance the existing config.
Going to finish your implementation and merge, I suspect there is a little bug for which I want to have a test, and will also try to make the loader/option lookup more robust
| if (isPostCssLoader(loader)) { | ||
| loader.options.postcssOptions = configurePostCss( | ||
| loader.options.postcssOptions, | ||
| ); |
There was a problem hiding this comment.
FYI this configurePostCss should be called inside the loop.
Fixed a bug where having multiple applyConfigurePostCss would override each others (ie if a user would add his own configurePostCss, it would override the configurePostCss provided by the classic theme and RTL would fail)
Also find that looking for the presence of postcssOptions is better than the json stringify
There was a problem hiding this comment.
Excellent fix, thanks!
Motivation
Preliminary implementation of a hook for quickly expanding the PostCSS loader (mainly for adding new PostCSS plugins).
Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
Tests.
Related PRs
(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)