From 88ce4dfe34e9a32b4b236a4c9fef4590ab20229b Mon Sep 17 00:00:00 2001 From: Mike Allanson Date: Wed, 7 Mar 2018 23:22:53 +0000 Subject: [PATCH 1/2] PostCSS config experiment --- packages/gatsby/package.json | 2 +- .../gatsby/src/bootstrap/load-plugins/load.js | 1 + .../load-postcss-config/gatsby-node.js | 35 ++ .../load-postcss-config/index.js | 1 + .../load-postcss-config/package.json | 11 + packages/gatsby/src/utils/webpack-utils.js | 10 +- yarn.lock | 335 +----------------- 7 files changed, 64 insertions(+), 331 deletions(-) create mode 100644 packages/gatsby/src/internal-plugins/load-postcss-config/gatsby-node.js create mode 100644 packages/gatsby/src/internal-plugins/load-postcss-config/index.js create mode 100644 packages/gatsby/src/internal-plugins/load-postcss-config/package.json diff --git a/packages/gatsby/package.json b/packages/gatsby/package.json index af2118112fc74..07f6be51eb71d 100644 --- a/packages/gatsby/package.json +++ b/packages/gatsby/package.json @@ -86,9 +86,9 @@ "parse-filepath": "^1.0.1", "path-exists": "^3.0.0", "postcss-browser-reporter": "^0.5.0", - "postcss-cssnext": "^3.0.2", "postcss-flexbugs-fixes": "^3.0.0", "postcss-import": "^11.0.0", + "postcss-load-plugins": "^2.3.0", "postcss-loader": "^2.0.6", "postcss-reporter": "^5.0.0", "raw-loader": "^0.5.1", diff --git a/packages/gatsby/src/bootstrap/load-plugins/load.js b/packages/gatsby/src/bootstrap/load-plugins/load.js index 6aa8b03c7281c..fd5208f010296 100644 --- a/packages/gatsby/src/bootstrap/load-plugins/load.js +++ b/packages/gatsby/src/bootstrap/load-plugins/load.js @@ -131,6 +131,7 @@ module.exports = async (config = {}) => { const internalPlugins = [ `../../internal-plugins/dev-404-page`, `../../internal-plugins/load-babel-config`, + `../../internal-plugins/load-postcss-config`, `../../internal-plugins/component-page-creator`, `../../internal-plugins/component-layout-creator`, `../../internal-plugins/internal-data-bridge`, diff --git a/packages/gatsby/src/internal-plugins/load-postcss-config/gatsby-node.js b/packages/gatsby/src/internal-plugins/load-postcss-config/gatsby-node.js new file mode 100644 index 0000000000000..3b49bb51082e6 --- /dev/null +++ b/packages/gatsby/src/internal-plugins/load-postcss-config/gatsby-node.js @@ -0,0 +1,35 @@ +/* @flow */ +const findPostcssPlugins = require(`postcss-load-plugins`) +const autoprefixer = require(`autoprefixer`) +const flexbugs = require(`postcss-flexbugs-fixes`) +const report = require(`gatsby-cli/lib/reporter`) + +// { stage, rules, loaders, actions, store, getConfig } +exports.onCreateWebpackConfig = async ({ actions, store }) => { + const program = store.getState().program + const { directory, browserslist } = program + + const defaultPlugins = { + plugins: [ + flexbugs, + autoprefixer({ browsers: browserslist, flexbox: `no-2009` }), + ], + } + + 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 + + // Now we have a set of postCSS plugins... + // How do we apply them to the webpack config? + // with setWebpackConfig? + + // actions.setWebpackConfig({}) +} diff --git a/packages/gatsby/src/internal-plugins/load-postcss-config/index.js b/packages/gatsby/src/internal-plugins/load-postcss-config/index.js new file mode 100644 index 0000000000000..172f1ae6a468c --- /dev/null +++ b/packages/gatsby/src/internal-plugins/load-postcss-config/index.js @@ -0,0 +1 @@ +// noop diff --git a/packages/gatsby/src/internal-plugins/load-postcss-config/package.json b/packages/gatsby/src/internal-plugins/load-postcss-config/package.json new file mode 100644 index 0000000000000..d9fbb0e9f3e98 --- /dev/null +++ b/packages/gatsby/src/internal-plugins/load-postcss-config/package.json @@ -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 ", + "license": "MIT" +} diff --git a/packages/gatsby/src/utils/webpack-utils.js b/packages/gatsby/src/utils/webpack-utils.js index 659bb4a59161d..93ea43c5e9832 100644 --- a/packages/gatsby/src/utils/webpack-utils.js +++ b/packages/gatsby/src/utils/webpack-utils.js @@ -1,9 +1,7 @@ // @flow const os = require(`os`) -const autoprefixer = require(`autoprefixer`) const ExtractTextPlugin = require(`extract-text-webpack-plugin`) -const flexbugs = require(`postcss-flexbugs-fixes`) const UglifyPlugin = require(`uglifyjs-webpack-plugin`) const builtinPlugins = require(`./webpack-plugins`) @@ -191,7 +189,7 @@ module.exports = async ({ }, postcss: (options = {}) => { - let { plugins, browsers = supportedBrowsers, ...postcssOpts } = options + let { plugins, ...postcssOpts } = options return { loader: require.resolve(`postcss-loader`), @@ -202,11 +200,7 @@ module.exports = async ({ plugins = (typeof plugins === `function` ? plugins(loader) : plugins) || [] - return [ - flexbugs, - autoprefixer({ browsers, flexbox: `no-2009` }), - ...plugins, - ] + return [...plugins] }, ...postcssOpts, }, diff --git a/yarn.lock b/yarn.lock index 6507b1e457376..a293cca1ac0f0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1230,7 +1230,7 @@ autoprefixer@^6.3.1: postcss "^5.2.16" postcss-value-parser "^3.2.3" -autoprefixer@^7.1.1, autoprefixer@^7.1.2: +autoprefixer@^7.1.2: version "7.2.6" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.6.tgz#256672f86f7c735da849c4f07d008abb056067dc" dependencies: @@ -2184,10 +2184,6 @@ bail@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.2.tgz#f7d6c1731630a9f9f0d4d35ed1f962e2074a1764" -balanced-match@0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.1.0.tgz#b504bd05869b39259dd0c5efc35d843176dccc4a" - balanced-match@^0.4.2: version "0.4.2" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838" @@ -2561,7 +2557,7 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6: caniuse-db "^1.0.30000639" electron-to-chromium "^1.2.7" -browserslist@^2.0.0, browserslist@^2.11.3: +browserslist@^2.11.3: version "2.11.3" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.3.tgz#fe36167aed1bbcde4827ebfe71347a2cc70b99b2" dependencies: @@ -2770,27 +2766,18 @@ caniuse-api@^1.5.2: lodash.memoize "^4.1.2" lodash.uniq "^4.5.0" -caniuse-api@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-2.0.0.tgz#b1ddb5a5966b16f48dc4998444d4bbc6c7d9d834" - dependencies: - browserslist "^2.0.0" - caniuse-lite "^1.0.0" - lodash.memoize "^4.1.2" - lodash.uniq "^4.5.0" - caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: version "1.0.30000804" resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000804.tgz#84feb42018fc64cf6aff6371e43115f292c00179" -caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30000808: - version "1.0.30000808" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000808.tgz#7d759b5518529ea08b6705a19e70dbf401628ffc" - caniuse-lite@^1.0.30000792: version "1.0.30000804" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000804.tgz#8729a143d65378e8936adbb161f550e9c49fc09d" +caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30000808: + version "1.0.30000808" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000808.tgz#7d759b5518529ea08b6705a19e70dbf401628ffc" + capture-stack-trace@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d" @@ -3188,7 +3175,7 @@ collection-visit@^1.0.0: map-visit "^1.0.0" object-visit "^1.0.0" -color-convert@^1.3.0, color-convert@^1.8.2, color-convert@^1.9.0, color-convert@^1.9.1: +color-convert@^1.3.0, color-convert@^1.9.0, color-convert@^1.9.1: version "1.9.1" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed" dependencies: @@ -3204,7 +3191,7 @@ color-string@^0.3.0: dependencies: color-name "^1.0.0" -color-string@^1.4.0, color-string@^1.5.2: +color-string@^1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.2.tgz#26e45814bc3c9a7cbd6751648a41434514a773a9" dependencies: @@ -3223,20 +3210,6 @@ color@^0.11.0: color-convert "^1.3.0" color-string "^0.3.0" -color@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/color/-/color-1.0.3.tgz#e48e832d85f14ef694fb468811c2d5cfe729b55d" - dependencies: - color-convert "^1.8.2" - color-string "^1.4.0" - -color@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/color/-/color-2.0.1.tgz#e4ed78a3c4603d0891eba5430b04b86314f4c839" - dependencies: - color-convert "^1.9.1" - color-string "^1.5.2" - color@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/color/-/color-3.0.0.tgz#d920b4328d534a3ac8295d68f7bd4ba6c427be9a" @@ -3807,15 +3780,6 @@ crypto-random-string@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-1.0.0.tgz#a230f64f568310e1498009940790ec99545bca7e" -css-color-function@~1.3.3: - version "1.3.3" - resolved "https://registry.yarnpkg.com/css-color-function/-/css-color-function-1.3.3.tgz#8ed24c2c0205073339fafa004bc8c141fccb282e" - dependencies: - balanced-match "0.1.0" - color "^0.11.0" - debug "^3.1.0" - rgb "~0.1.0" - css-color-names@0.0.4: version "0.0.4" resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" @@ -3881,10 +3845,6 @@ css-selector-tokenizer@^0.7.0: fastparse "^1.1.1" regexpu-core "^1.0.0" -css-unit-converter@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996" - css-what@2.1: version "2.1.0" resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd" @@ -7489,10 +7449,6 @@ isexe@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10" -isnumeric@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/isnumeric/-/isnumeric-0.2.0.tgz#a2347ba360de19e33d0ffd590fddf7755cbf2e64" - isobject@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89" @@ -8581,7 +8537,7 @@ lodash.template@^3.0.0: lodash.restparam "^3.0.0" lodash.templatesettings "^3.0.0" -lodash.template@^4.0.2, lodash.template@^4.2.4, lodash.template@^4.4.0: +lodash.template@^4.0.2, lodash.template@^4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0" dependencies: @@ -9816,10 +9772,6 @@ once@^1.3.0, once@^1.3.1, once@^1.3.3, once@^1.4.0: dependencies: wrappy "1" -onecolor@^3.0.4: - version "3.0.5" - resolved "https://registry.yarnpkg.com/onecolor/-/onecolor-3.0.5.tgz#36eff32201379efdf1180fb445e51a8e2425f9f6" - onetime@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/onetime/-/onetime-1.1.0.tgz#a1f7838f8314c516f05ecefcbc4ccfe04b4ed789" @@ -10305,14 +10257,6 @@ pixelmatch@^4.0.0: dependencies: pngjs "^3.0.0" -pixrem@^4.0.0: - version "4.0.1" - resolved "https://registry.yarnpkg.com/pixrem/-/pixrem-4.0.1.tgz#2da4a1de6ec4423c5fc3794e930b81d4490ec686" - dependencies: - browserslist "^2.0.0" - postcss "^6.0.0" - reduce-css-calc "^1.2.7" - pkg-dir@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4" @@ -10335,13 +10279,6 @@ pkginfo@0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.4.1.tgz#b5418ef0439de5425fc4995042dced14fb2a84ff" -pleeease-filters@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/pleeease-filters/-/pleeease-filters-4.0.0.tgz#6632b2fb05648d2758d865384fbced79e1ccaec7" - dependencies: - onecolor "^3.0.4" - postcss "^6.0.1" - plop@^1.8.1: version "1.9.1" resolved "https://registry.yarnpkg.com/plop/-/plop-1.9.1.tgz#fa795c072fde8c5e059ab0c23e0a1b426ab6fed6" @@ -10385,21 +10322,6 @@ posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" -postcss-apply@^0.8.0: - version "0.8.0" - resolved "https://registry.yarnpkg.com/postcss-apply/-/postcss-apply-0.8.0.tgz#14e544bbb5cb6f1c1e048857965d79ae066b1343" - dependencies: - babel-runtime "^6.23.0" - balanced-match "^0.4.2" - postcss "^6.0.0" - -postcss-attribute-case-insensitive@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-2.0.0.tgz#94dc422c8f90997f16bd33a3654bbbec084963b4" - dependencies: - postcss "^6.0.0" - postcss-selector-parser "^2.2.3" - postcss-browser-reporter@^0.5.0: version "0.5.0" resolved "https://registry.yarnpkg.com/postcss-browser-reporter/-/postcss-browser-reporter-0.5.0.tgz#ae069dd086d57388d196e1dac39cb8d7626feb48" @@ -10414,80 +10336,6 @@ postcss-calc@^5.2.0: postcss-message-helpers "^2.0.0" reduce-css-calc "^1.2.6" -postcss-calc@^6.0.0: - version "6.0.1" - resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-6.0.1.tgz#3d24171bbf6e7629d422a436ebfe6dd9511f4330" - dependencies: - css-unit-converter "^1.1.1" - postcss "^6.0.0" - postcss-selector-parser "^2.2.2" - reduce-css-calc "^2.0.0" - -postcss-color-function@^4.0.0: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-color-function/-/postcss-color-function-4.0.1.tgz#402b3f2cebc3f6947e618fb6be3654fbecef6444" - dependencies: - css-color-function "~1.3.3" - postcss "^6.0.1" - postcss-message-helpers "^2.0.0" - postcss-value-parser "^3.3.0" - -postcss-color-gray@^4.0.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-4.1.0.tgz#e5581ed57eaa826fb652ca11b1e2b7b136a9f9df" - dependencies: - color "^2.0.1" - postcss "^6.0.14" - postcss-message-helpers "^2.0.0" - reduce-function-call "^1.0.2" - -postcss-color-hex-alpha@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-3.0.0.tgz#1e53e6c8acb237955e8fd08b7ecdb1b8b8309f95" - dependencies: - color "^1.0.3" - postcss "^6.0.1" - postcss-message-helpers "^2.0.0" - -postcss-color-hsl@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/postcss-color-hsl/-/postcss-color-hsl-2.0.0.tgz#12703666fa310430e3f30a454dac1386317d5844" - dependencies: - postcss "^6.0.1" - postcss-value-parser "^3.3.0" - units-css "^0.4.0" - -postcss-color-hwb@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/postcss-color-hwb/-/postcss-color-hwb-3.0.0.tgz#3402b19ef4d8497540c1fb5072be9863ca95571e" - dependencies: - color "^1.0.3" - postcss "^6.0.1" - postcss-message-helpers "^2.0.0" - reduce-function-call "^1.0.2" - -postcss-color-rebeccapurple@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-3.0.0.tgz#eebaf03d363b4300b96792bd3081c19ed66513d3" - dependencies: - postcss "^6.0.1" - postcss-value-parser "^3.3.0" - -postcss-color-rgb@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/postcss-color-rgb/-/postcss-color-rgb-2.0.0.tgz#14539c8a7131494b482e0dd1cc265ff6514b5263" - dependencies: - postcss "^6.0.1" - postcss-value-parser "^3.3.0" - -postcss-color-rgba-fallback@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/postcss-color-rgba-fallback/-/postcss-color-rgba-fallback-3.0.0.tgz#37d5c9353a07a09270912a82606bb42a0d702c04" - dependencies: - postcss "^6.0.6" - postcss-value-parser "^3.3.0" - rgb-hex "^2.1.0" - postcss-colormin@^2.1.8: version "2.2.2" resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b" @@ -10503,62 +10351,6 @@ postcss-convert-values@^2.3.4: postcss "^5.0.11" postcss-value-parser "^3.1.2" -postcss-cssnext@^3.0.2: - version "3.1.0" - resolved "https://registry.yarnpkg.com/postcss-cssnext/-/postcss-cssnext-3.1.0.tgz#927dc29341a938254cde38ea60a923b9dfedead9" - dependencies: - autoprefixer "^7.1.1" - caniuse-api "^2.0.0" - chalk "^2.0.1" - pixrem "^4.0.0" - pleeease-filters "^4.0.0" - postcss "^6.0.5" - postcss-apply "^0.8.0" - postcss-attribute-case-insensitive "^2.0.0" - postcss-calc "^6.0.0" - postcss-color-function "^4.0.0" - postcss-color-gray "^4.0.0" - postcss-color-hex-alpha "^3.0.0" - postcss-color-hsl "^2.0.0" - postcss-color-hwb "^3.0.0" - postcss-color-rebeccapurple "^3.0.0" - postcss-color-rgb "^2.0.0" - postcss-color-rgba-fallback "^3.0.0" - postcss-custom-media "^6.0.0" - postcss-custom-properties "^6.1.0" - postcss-custom-selectors "^4.0.1" - postcss-font-family-system-ui "^3.0.0" - postcss-font-variant "^3.0.0" - postcss-image-set-polyfill "^0.3.5" - postcss-initial "^2.0.0" - postcss-media-minmax "^3.0.0" - postcss-nesting "^4.0.1" - postcss-pseudo-class-any-link "^4.0.0" - postcss-pseudoelements "^5.0.0" - postcss-replace-overflow-wrap "^2.0.0" - postcss-selector-matches "^3.0.1" - postcss-selector-not "^3.0.1" - -postcss-custom-media@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz#be532784110ecb295044fb5395a18006eb21a737" - dependencies: - postcss "^6.0.1" - -postcss-custom-properties@^6.1.0: - version "6.3.1" - resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-6.3.1.tgz#5c52abde313d7ec9368c4abf67d27a656cba8b39" - dependencies: - balanced-match "^1.0.0" - postcss "^6.0.18" - -postcss-custom-selectors@^4.0.1: - version "4.0.1" - resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-4.0.1.tgz#781382f94c52e727ef5ca4776ea2adf49a611382" - dependencies: - postcss "^6.0.1" - postcss-selector-matches "^3.0.0" - postcss-discard-comments@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d" @@ -10603,25 +10395,6 @@ postcss-flexbugs-fixes@^3.0.0: dependencies: postcss "^6.0.1" -postcss-font-family-system-ui@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/postcss-font-family-system-ui/-/postcss-font-family-system-ui-3.0.0.tgz#675fe7a9e029669f05f8dba2e44c2225ede80623" - dependencies: - postcss "^6.0" - -postcss-font-variant@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-3.0.0.tgz#08ccc88f6050ba82ed8ef2cc76c0c6a6b41f183e" - dependencies: - postcss "^6.0.1" - -postcss-image-set-polyfill@^0.3.5: - version "0.3.5" - resolved "https://registry.yarnpkg.com/postcss-image-set-polyfill/-/postcss-image-set-polyfill-0.3.5.tgz#0f193413700cf1f82bd39066ef016d65a4a18181" - dependencies: - postcss "^6.0.1" - postcss-media-query-parser "^0.2.3" - postcss-import@^11.0.0: version "11.1.0" resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-11.1.0.tgz#55c9362c9192994ec68865d224419df1db2981f0" @@ -10631,13 +10404,6 @@ postcss-import@^11.0.0: read-cache "^1.0.0" resolve "^1.1.7" -postcss-initial@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-2.0.0.tgz#72715f7336e0bb79351d99ee65c4a253a8441ba4" - dependencies: - lodash.template "^4.2.4" - postcss "^6.0.1" - postcss-load-config@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a" @@ -10670,16 +10436,6 @@ postcss-loader@^2.0.6: postcss-load-config "^1.2.0" schema-utils "^0.4.0" -postcss-media-minmax@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-3.0.0.tgz#675256037a43ef40bc4f0760bfd06d4dc69d48d2" - dependencies: - postcss "^6.0.1" - -postcss-media-query-parser@^0.2.3: - version "0.2.3" - resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244" - postcss-merge-idents@^2.1.5: version "2.1.7" resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270" @@ -10791,12 +10547,6 @@ postcss-modules@^0.6.2: postcss "^5.2.8" string-hash "^1.1.1" -postcss-nesting@^4.0.1: - version "4.2.1" - resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-4.2.1.tgz#0483bce338b3f0828ced90ff530b29b98b00300d" - dependencies: - postcss "^6.0.11" - postcss-normalize-charset@^1.1.0: version "1.1.1" resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1" @@ -10819,19 +10569,6 @@ postcss-ordered-values@^2.1.0: postcss "^5.0.4" postcss-value-parser "^3.0.1" -postcss-pseudo-class-any-link@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-4.0.0.tgz#9152a0613d3450720513e8892854bae42d0ee68e" - dependencies: - postcss "^6.0.1" - postcss-selector-parser "^2.2.3" - -postcss-pseudoelements@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/postcss-pseudoelements/-/postcss-pseudoelements-5.0.0.tgz#eef194e8d524645ca520a949e95e518e812402cb" - dependencies: - postcss "^6.0.0" - postcss-reduce-idents@^2.2.2: version "2.4.0" resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3" @@ -10853,12 +10590,6 @@ postcss-reduce-transforms@^1.0.3: postcss "^5.0.8" postcss-value-parser "^3.0.1" -postcss-replace-overflow-wrap@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-2.0.0.tgz#794db6faa54f8db100854392a93af45768b4e25b" - dependencies: - postcss "^6.0.1" - postcss-reporter@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/postcss-reporter/-/postcss-reporter-5.0.0.tgz#a14177fd1342829d291653f2786efd67110332c3" @@ -10868,21 +10599,7 @@ postcss-reporter@^5.0.0: log-symbols "^2.0.0" postcss "^6.0.8" -postcss-selector-matches@^3.0.0, postcss-selector-matches@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-3.0.1.tgz#e5634011e13950881861bbdd58c2d0111ffc96ab" - dependencies: - balanced-match "^0.4.2" - postcss "^6.0.1" - -postcss-selector-not@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-3.0.1.tgz#2e4db2f0965336c01e7cec7db6c60dff767335d9" - dependencies: - balanced-match "^0.4.2" - postcss "^6.0.1" - -postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2, postcss-selector-parser@^2.2.3: +postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2: version "2.2.3" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90" dependencies: @@ -10936,7 +10653,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0 source-map "^0.5.6" supports-color "^3.2.3" -postcss@^6.0, postcss@^6.0.0, postcss@^6.0.11, postcss@^6.0.17, postcss@^6.0.18, postcss@^6.0.5, postcss@^6.0.6, postcss@^6.0.8: +postcss@^6.0.0, postcss@^6.0.17, postcss@^6.0.8: version "6.0.18" resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.18.tgz#370f5f44d47f3a205f0eb2f6262bbf202df2a80e" dependencies: @@ -11791,7 +11508,7 @@ redent@^2.0.0: indent-string "^3.0.0" strip-indent "^2.0.0" -reduce-css-calc@^1.2.6, reduce-css-calc@^1.2.7: +reduce-css-calc@^1.2.6: version "1.3.0" resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716" dependencies: @@ -11799,14 +11516,7 @@ reduce-css-calc@^1.2.6, reduce-css-calc@^1.2.7: math-expression-evaluator "^1.2.14" reduce-function-call "^1.0.1" -reduce-css-calc@^2.0.0: - version "2.1.4" - resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.4.tgz#c20e9cda8445ad73d4ff4bea960c6f8353791708" - dependencies: - css-unit-converter "^1.1.1" - postcss-value-parser "^3.3.0" - -reduce-function-call@^1.0.1, reduce-function-call@^1.0.2: +reduce-function-call@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99" dependencies: @@ -12517,14 +12227,6 @@ retext@^4.0.0: retext-stringify "^1.0.0" unified "^5.0.0" -rgb-hex@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/rgb-hex/-/rgb-hex-2.1.0.tgz#c773c5fe2268a25578d92539a82a7a5ce53beda6" - -rgb@~0.1.0: - version "0.1.0" - resolved "https://registry.yarnpkg.com/rgb/-/rgb-0.1.0.tgz#be27b291e8feffeac1bd99729721bfa40fc037b5" - ric@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/ric/-/ric-1.3.0.tgz#8e95042609ce8213548a83164d08e94fae94909f" @@ -14629,13 +14331,6 @@ unist-util-visit@^1.0.0, unist-util-visit@^1.0.1, unist-util-visit@^1.1.0, unist dependencies: unist-util-is "^2.1.1" -units-css@^0.4.0: - version "0.4.0" - resolved "https://registry.yarnpkg.com/units-css/-/units-css-0.4.0.tgz#d6228653a51983d7c16ff28f8b9dc3b1ffed3a07" - dependencies: - isnumeric "^0.2.0" - viewport-dimensions "^0.2.0" - universalify@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7" @@ -14907,10 +14602,6 @@ vfile@^2.0.0: unist-util-stringify-position "^1.0.0" vfile-message "^1.0.0" -viewport-dimensions@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/viewport-dimensions/-/viewport-dimensions-0.2.0.tgz#de740747db5387fd1725f5175e91bac76afdf36c" - vinyl-assign@^1.0.1: version "1.2.1" resolved "https://registry.yarnpkg.com/vinyl-assign/-/vinyl-assign-1.2.1.tgz#4d198891b5515911d771a8cd9c5480a46a074a45" From 1345f171b66b95bae420a675f1bc0fe22e3d6be2 Mon Sep 17 00:00:00 2001 From: Mike Allanson Date: Thu, 5 Apr 2018 17:56:51 +0200 Subject: [PATCH 2/2] wip apply postcss config to webpack config --- .../load-postcss-config/gatsby-node.js | 25 ++++++++++++++----- packages/gatsby/src/utils/webpack-plugins.js | 1 - 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/packages/gatsby/src/internal-plugins/load-postcss-config/gatsby-node.js b/packages/gatsby/src/internal-plugins/load-postcss-config/gatsby-node.js index 3b49bb51082e6..4ed244d33b016 100644 --- a/packages/gatsby/src/internal-plugins/load-postcss-config/gatsby-node.js +++ b/packages/gatsby/src/internal-plugins/load-postcss-config/gatsby-node.js @@ -4,11 +4,20 @@ const autoprefixer = require(`autoprefixer`) const flexbugs = require(`postcss-flexbugs-fixes`) const report = require(`gatsby-cli/lib/reporter`) -// { stage, rules, loaders, actions, store, getConfig } -exports.onCreateWebpackConfig = async ({ actions, store }) => { +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, @@ -26,10 +35,14 @@ exports.onCreateWebpackConfig = async ({ actions, store }) => { } const postcssPlugins = customPlugins || defaultPlugins + const postcssRule = rules.postcss({ plugins: postcssPlugins }) - // Now we have a set of postCSS plugins... - // How do we apply them to the webpack config? - // with setWebpackConfig? + actions.setWebpackConfig({ + module: { + rules: [postcssRule], + }, + }) - // actions.setWebpackConfig({}) + // console.log(`UPDATED config for stage: `, stage) + // console.dir(getConfig(), { depth: null }) } diff --git a/packages/gatsby/src/utils/webpack-plugins.js b/packages/gatsby/src/utils/webpack-plugins.js index 5b4d560d4782e..39fad7ae28ceb 100644 --- a/packages/gatsby/src/utils/webpack-plugins.js +++ b/packages/gatsby/src/utils/webpack-plugins.js @@ -42,7 +42,6 @@ const plugins = { namedChunks: plugin(`NamedChunksPlugin`), hashedModuleIds: plugin(`HashedModuleIdsPlugin`), moduleFilenameH: plugin(`ModuleFilenameHelpers`), - aggressiveMerging: plugin(`AggressiveMergingPlugin`, true), aggressiveSplitting: plugin(`AggressiveSplittingPlugin`, true), splitChunks: plugin(`SplitChunks`, true),