From 3ea3b6ee690f0ee984438b2ad682574b37e885ea Mon Sep 17 00:00:00 2001 From: Ludovico Fischer Date: Fri, 25 Sep 2020 21:32:00 +0200 Subject: [PATCH] Update to PostCSS 8. Fixes: #17242 - Change type imports from `postcss` package to match new `postcss` export structure - Change `cssnano-simple` plugin type to `OldPlugin` since the `Plugin` type now represents PostCSS 8 plugin - Call postcss directly instead of plugin `process` method; `process` usage seems discouraged as PostCSS removed it from the plugin type definition --- .../config/blocks/css/loaders/global.ts | 4 +-- .../config/blocks/css/loaders/modules.ts | 4 +-- .../webpack/plugins/css-minimizer-plugin.ts | 19 +++++++------ packages/next/package.json | 2 +- packages/next/types/misc.d.ts | 4 +-- yarn.lock | 28 +++++++++++++++++++ 6 files changed, 46 insertions(+), 15 deletions(-) diff --git a/packages/next/build/webpack/config/blocks/css/loaders/global.ts b/packages/next/build/webpack/config/blocks/css/loaders/global.ts index fd708dc981bdb..281154a925b7f 100644 --- a/packages/next/build/webpack/config/blocks/css/loaders/global.ts +++ b/packages/next/build/webpack/config/blocks/css/loaders/global.ts @@ -1,11 +1,11 @@ -import postcss from 'postcss' +import { AcceptedPlugin } from 'postcss' import webpack from 'webpack' import { ConfigurationContext } from '../../../utils' import { getClientStyleLoader } from './client' export function getGlobalCssLoader( ctx: ConfigurationContext, - postCssPlugins: readonly postcss.AcceptedPlugin[], + postCssPlugins: readonly AcceptedPlugin[], preProcessors: readonly webpack.RuleSetUseItem[] = [] ): webpack.RuleSetUseItem[] { const loaders: webpack.RuleSetUseItem[] = [] diff --git a/packages/next/build/webpack/config/blocks/css/loaders/modules.ts b/packages/next/build/webpack/config/blocks/css/loaders/modules.ts index f6dda1a83c382..ba7b81f49e393 100644 --- a/packages/next/build/webpack/config/blocks/css/loaders/modules.ts +++ b/packages/next/build/webpack/config/blocks/css/loaders/modules.ts @@ -1,4 +1,4 @@ -import postcss from 'postcss' +import { AcceptedPlugin } from 'postcss' import webpack from 'webpack' import { ConfigurationContext } from '../../../utils' import { getClientStyleLoader } from './client' @@ -6,7 +6,7 @@ import { getCssModuleLocalIdent } from './getCssModuleLocalIdent' export function getCssModuleLoader( ctx: ConfigurationContext, - postCssPlugins: readonly postcss.AcceptedPlugin[], + postCssPlugins: readonly AcceptedPlugin[], preProcessors: readonly webpack.RuleSetUseItem[] = [] ): webpack.RuleSetUseItem[] { const loaders: webpack.RuleSetUseItem[] = [] diff --git a/packages/next/build/webpack/plugins/css-minimizer-plugin.ts b/packages/next/build/webpack/plugins/css-minimizer-plugin.ts index 34ad34fbfe63d..65359da0ae3e5 100644 --- a/packages/next/build/webpack/plugins/css-minimizer-plugin.ts +++ b/packages/next/build/webpack/plugins/css-minimizer-plugin.ts @@ -1,4 +1,5 @@ -import { process as minify } from 'cssnano-simple' +import cssnanoSimple from 'cssnano-simple' +import postcss from 'postcss' import webpack from 'webpack' import sources from 'webpack-sources' @@ -41,13 +42,15 @@ export class CssMinimizerPlugin { input = asset.source() } - return minify(input, postcssOptions).then((res) => { - if (res.map) { - return new SourceMapSource(res.css, file, res.map.toJSON()) - } else { - return new RawSource(res.css) - } - }) + return postcss([cssnanoSimple]) + .process(input, postcssOptions) + .then((res) => { + if (res.map) { + return new SourceMapSource(res.css, file, res.map.toJSON()) + } else { + return new RawSource(res.css) + } + }) } apply(compiler: webpack.Compiler) { diff --git a/packages/next/package.json b/packages/next/package.json index 0d1b9352b2ac8..67fd9df4c89d4 100644 --- a/packages/next/package.json +++ b/packages/next/package.json @@ -100,7 +100,7 @@ "node-html-parser": "^1.2.19", "path-browserify": "1.0.1", "pnp-webpack-plugin": "1.6.4", - "postcss": "7.0.32", + "postcss": "8.1.1", "process": "0.11.10", "prop-types": "15.7.2", "react-is": "16.13.1", diff --git a/packages/next/types/misc.d.ts b/packages/next/types/misc.d.ts index 3e702afca7fae..bb5d9f77090bf 100644 --- a/packages/next/types/misc.d.ts +++ b/packages/next/types/misc.d.ts @@ -3,8 +3,8 @@ declare module '@babel/plugin-transform-modules-commonjs' declare module '@babel/plugin-syntax-jsx' declare module 'browserslist' declare module 'cssnano-simple' { - import { Plugin } from 'postcss' - const cssnanoSimple: Plugin<{}> + import { OldPlugin } from 'postcss' + const cssnanoSimple: OldPlugin<{}> export = cssnanoSimple } declare module 'styled-jsx/server' diff --git a/yarn.lock b/yarn.lock index 30c492a6a51f7..e90e17fca3f4e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5353,6 +5353,11 @@ color@^3.0.0: color-convert "^1.9.1" color-string "^1.5.2" +colorette@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b" + integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw== + colormin@^1.0.5: version "1.1.2" resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133" @@ -10355,6 +10360,14 @@ limit-spawn@0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/limit-spawn/-/limit-spawn-0.0.3.tgz#cc09c24467a0f0a1ed10a5196dba597cad3f65dc" +line-column@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/line-column/-/line-column-1.0.2.tgz#d25af2936b6f4849172b312e4792d1d987bc34a2" + integrity sha1-0lryk2tvSEkXKzEuR5LR2Ye8NKI= + dependencies: + isarray "^1.0.0" + isobject "^2.0.0" + lines-and-columns@^1.1.6: version "1.1.6" resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00" @@ -11364,6 +11377,11 @@ nanoid@2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-2.0.3.tgz#dde999e173bc9d7bd2ee2746b89909ade98e075e" +nanoid@^3.1.12: + version "3.1.12" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.12.tgz#6f7736c62e8d39421601e4a0c77623a97ea69654" + integrity sha512-1qstj9z5+x491jfiC4Nelk+f8XBad7LN20PmyWINJEMRSf3wcAjAWysw1qaA8z6NSKe2sjq1hRSDpBH5paCb6A== + nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" @@ -13466,6 +13484,16 @@ postcss@7.0.32, postcss@^7.0.32: source-map "^0.6.1" supports-color "^6.1.0" +postcss@8.1.1: + version "8.1.1" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.1.1.tgz#c3a287dd10e4f6c84cb3791052b96a5d859c9389" + integrity sha512-9DGLSsjooH3kSNjTZUOt2eIj2ZTW0VI2PZ/3My+8TC7KIbH2OKwUlISfDsf63EP4aiRUt3XkEWMWvyJHvJelEg== + dependencies: + colorette "^1.2.1" + line-column "^1.0.2" + nanoid "^3.1.12" + source-map "^0.6.1" + postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.8, postcss@^5.2.16: version "5.2.18" resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"