[WIP][v2] PostCSS config experiment #4428
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /* @flow */ | ||
| const findPostcssPlugins = require(`postcss-load-plugins`) | ||
| const autoprefixer = require(`autoprefixer`) | ||
| const flexbugs = require(`postcss-flexbugs-fixes`) | ||
| const report = require(`gatsby-cli/lib/reporter`) | ||
|
|
||
| exports.onCreateWebpackConfig = async ({ | ||
| actions, | ||
| getConfig, | ||
| loaders, | ||
| rules, | ||
| stage, | ||
| store, | ||
| }) => { | ||
| const program = store.getState().program | ||
| const { directory, browserslist } = program | ||
|
|
||
| // console.log(`initial config for stage: `, stage) | ||
| // console.dir(getConfig(), { depth: null }) | ||
|
|
||
| const defaultPlugins = { | ||
| plugins: [ | ||
| flexbugs, | ||
| autoprefixer({ browsers: browserslist, flexbox: `no-2009` }), | ||
|
There was a problem hiding this comment. Thinking about the workflow for people overriding the core settings. What do people in postcss world normally do for browserlist stuff — does postcss automatically read in from package.json like we do? Or would we need some glue code to add that? Or do people duplicate the browserlist in their package.json setup? There was a problem hiding this comment. i'ave always added it explictly like this, postcss-config is a weird place, never sure what is "supported" There was a problem hiding this comment. It looks like we should check for a global browserslist config before using Gatsby's default config: https://github.com/postcss/autoprefixer#no-prefixes-in-production There was a problem hiding this comment. What's a global browserlist config? We should double-check we're loading the browserlist from all possible places. There was a problem hiding this comment. It looks like it should be a There was a problem hiding this comment. i think we should probably limit this to just Gatsby's api and not use a .browserlistrc? otherwise we'd have to support the browserlist thing for all cases where we use the browsers list. There was a problem hiding this comment. We could use this tool https://github.com/browserslist/browserslist I think it'd be good to support additional ways of specifying browserlist otherwise people will get confused. Right now we only look at the package.json but it'd be easy to swap in the above package there. |
||
| ], | ||
| } | ||
|
|
||
| let customPlugins | ||
| try { | ||
| customPlugins = await findPostcssPlugins({}, directory) | ||
| } catch (error) { | ||
| if (!error.message.startsWith(`No PostCSS Config found in`)) { | ||
| report.panicOnBuid(`Error loading postCSS config`, error) | ||
| } | ||
| } | ||
|
|
||
| const postcssPlugins = customPlugins || defaultPlugins | ||
| const postcssRule = rules.postcss({ plugins: postcssPlugins }) | ||
|
|
||
| actions.setWebpackConfig({ | ||
| module: { | ||
| rules: [postcssRule], | ||
| }, | ||
| }) | ||
|
|
||
| // console.log(`UPDATED config for stage: `, stage) | ||
| // console.dir(getConfig(), { depth: null }) | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| // noop |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| { | ||
| "name": "load-postcss-config", | ||
| "version": "1.0.0", | ||
| "description": "Internal plugin that handles loading PostCSS configs", | ||
| "main": "index.js", | ||
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| }, | ||
| "author": "Kyle Mathews <mathews.kyle@gmail.com>", | ||
| "license": "MIT" | ||
| } |
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.
Oh nice! @loganfsmyth just added something similar to Babel so tools don't have to (like we have) write their own code for loading .babelrc files babel/babel#7472