-
-
Notifications
You must be signed in to change notification settings - Fork 8.7k
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
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -11,6 +11,7 @@ import merge from 'webpack-merge'; | |
import webpack, { | ||
Configuration, | ||
Loader, | ||
NewLoader, | ||
Plugin, | ||
RuleSetRule, | ||
Stats, | ||
|
@@ -23,7 +24,7 @@ import path from 'path'; | |
import crypto from 'crypto'; | ||
import chalk from 'chalk'; | ||
import {TransformOptions} from '@babel/core'; | ||
import {ConfigureWebpackFn} from '@docusaurus/types'; | ||
import {ConfigureWebpackFn, ConfigurePostCssFn} from '@docusaurus/types'; | ||
import CssNanoPreset from '@docusaurus/cssnano-preset'; | ||
import {version as cacheLoaderVersion} from 'cache-loader/package.json'; | ||
import {BABEL_CONFIG_FILE_NAME, STATIC_ASSETS_DIR_NAME} from '../constants'; | ||
|
@@ -175,6 +176,31 @@ export function applyConfigureWebpack( | |
return config; | ||
} | ||
|
||
export function applyConfigurePostCss( | ||
configurePostCss: NonNullable<ConfigurePostCssFn>, | ||
config: Configuration, | ||
): Configuration { | ||
type LocalPostCSSLoader = Loader & {options: {postcssOptions: any}}; | ||
|
||
function isPostCssLoader(loader: Loader): loader is LocalPostCSSLoader { | ||
// TODO not ideal heuristic but good enough for our usecase? | ||
return !!(loader as any)?.options?.postcssOptions; | ||
} | ||
|
||
// Does not handle all edge cases, but good enough for now | ||
config.module?.rules.map((rule) => { | ||
for (const loader of rule.use as NewLoader[]) { | ||
if (isPostCssLoader(loader)) { | ||
loader.options.postcssOptions = configurePostCss( | ||
loader.options.postcssOptions, | ||
); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Excellent fix, thanks! |
||
} | ||
} | ||
}); | ||
|
||
return config; | ||
} | ||
|
||
// See https://webpack.js.org/configuration/stats/#statswarningsfilter | ||
// @slorber: note sure why we have to re-implement this logic | ||
// just know that legacy had this only partially implemented, so completed it | ||
|
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