-
-
Notifications
You must be signed in to change notification settings - Fork 8.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.)