chore: upgrade PostCSS dependencies #34354

balazsorban44 · 2022-02-15T02:21:51Z

Fixes #34336

Bug

Related issues linked using fixes #number
Integration tests added
Errors have helpful link attached, see contributing.md

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issues linked using fixes #number
Integration tests added
Documentation added
Telemetry added. In case of a feature if it's used or not.
Errors have helpful link attached, see contributing.md

Documentation / Examples

Make sure the linting passes by running yarn lint

ijjk · 2022-02-15T13:58:22Z

Failing test suites

Commit: 7c03dc5

yarn testheadless test/integration/amphtml/test/index.test.js

AMP Usage > AMP dev mode > should detect changes to component and refresh an AMP page
AMP Usage > AMP dev mode > should detect changes and refresh a hybrid AMP page

Expand output

● AMP Usage › AMP dev mode › should detect changes to component and refresh an AMP page

TIMED OUT: /hello/

hi

  498 |
  499 |   if (hardError) {
> 500 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  501 |   }
  502 |   return false
  503 | }

  at Object.check (lib/next-test-utils.js:500:11)
  at Object.<anonymous> (integration/amphtml/test/index.test.js:409:7)

● AMP Usage › AMP dev mode › should detect changes and refresh a hybrid AMP page

TIMED OUT: /I'm a hybrid AMP page!/

  498 |
  499 |   if (hardError) {
> 500 |     throw new Error('TIMED OUT: ' + regex + '\n\n' + content)
      |           ^
  501 |   }
  502 |   return false
  503 | }

  at Object.check (lib/next-test-utils.js:500:11)
  at Object.<anonymous> (integration/amphtml/test/index.test.js:507:9)

Read more about building and testing Next.js in contributing.md.

yarn testheadless test/integration/css-features/test/index.test.js

Browserslist: Old > should've emitted a single CSS file

Expand output

● Browserslist: Old › should've emitted a single CSS file

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Browserslist: Old should've emitted a single CSS file 1`

Snapshot: "a{-webkit-animation:none 0s ease 0s 1 normal none running;animation:none 0s ease 0s 1 normal none running;-webkit-backface-visibility:visible;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:none;border-collapse:separate;-webkit-border-image:none;border-image:none;-webkit-border-radius:0;border-radius:0;border-spacing:0;bottom:auto;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:content-box;box-sizing:content-box;caption-side:top;clear:none;clip:auto;color:#000;-webkit-columns:auto;-webkit-column-count:auto;-webkit-column-fill:balance;column-fill:balance;grid-column-gap:normal;-webkit-column-gap:normal;column-gap:normal;-webkit-column-rule:medium none currentColor;column-rule:medium none currentColor;-webkit-column-span:1;column-span:1;-webkit-column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;float:none;font-family:serif;font-size:medium;font-style:normal;-webkit-font-feature-settings:normal;font-feature-settings:normal;font-variant:normal;font-weight:400;font-stretch:normal;line-height:normal;height:auto;-ms-hyphens:none;hyphens:none;left:auto;letter-spacing:normal;list-style:disc none outside;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;-webkit-perspective:none;perspective:none;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;-webkit-transform:none;transform:none;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:none 0s ease 0s;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto;all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"
Received: "a{-webkit-animation:none 0s ease 0s 1 normal none running;animation:none 0s ease 0s 1 normal none running;-webkit-backface-visibility:visible;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:none;border-collapse:separate;-webkit-border-image:none;border-image:none;-webkit-border-radius:0;border-radius:0;border-spacing:0;bottom:auto;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:content-box;box-sizing:content-box;caption-side:top;clear:none;clip:auto;color:#000;-webkit-columns:auto;-webkit-column-count:auto;-webkit-column-fill:balance;column-fill:balance;-webkit-column-gap:normal;column-gap:normal;-webkit-column-rule:medium none currentColor;column-rule:medium none currentColor;-webkit-column-span:1;column-span:1;-webkit-column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;float:none;font-family:serif;font-size:medium;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;line-height:normal;height:auto;-ms-hyphens:none;hyphens:none;left:auto;letter-spacing:normal;list-style:disc none outside;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;-webkit-perspective:none;perspective:none;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;-webkit-transform:none;transform:none;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:none 0s ease 0s;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto;all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"

  33 |     const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
  34 |
> 35 |     expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
     |                                                           ^
  36 |       `"a{-webkit-animation:none 0s ease 0s 1 normal none running;animation:none 0s ease 0s 1 normal none running;-webkit-backface-visibility:visible;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:none;border-collapse:separate;-webkit-border-image:none;border-image:none;-webkit-border-radius:0;border-radius:0;border-spacing:0;bottom:auto;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:content-box;box-sizing:content-box;caption-side:top;clear:none;clip:auto;color:#000;-webkit-columns:auto;-webkit-column-count:auto;-webkit-column-fill:balance;column-fill:balance;grid-column-gap:normal;-webkit-column-gap:normal;column-gap:normal;-webkit-column-rule:medium none currentColor;column-rule:medium none currentColor;-webkit-column-span:1;column-span:1;-webkit-column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;float:none;font-family:serif;font-size:medium;font-style:normal;-webkit-font-feature-settings:normal;font-feature-settings:normal;font-variant:normal;font-weight:400;font-stretch:normal;line-height:normal;height:auto;-ms-hyphens:none;hyphens:none;left:auto;letter-spacing:normal;list-style:disc none outside;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;-webkit-perspective:none;perspective:none;-webkit-perspective-origin:50% 50%;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;-webkit-transform:none;transform:none;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform-style:flat;transform-style:flat;-webkit-transition:none 0s ease 0s;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto;all:initial}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.image{background-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}}"`
  37 |     )
  38 |   })

  at Object.<anonymous> (integration/css-features/test/index.test.js:35:59)

Read more about building and testing Next.js in contributing.md.

ijjk · 2022-02-15T14:11:49Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
buildDuration	15.8s	15.6s	-209ms
buildDurationCached	6.2s	6.2s	⚠️ +30ms
nodeModulesSize	481 MB	481 MB	⚠️ +476 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.193	3.183	-0.01
/ avg req/sec	782.99	785.52	+2.53
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.362	1.359	0
/error-in-render avg req/sec	1835.97	1840.07	+4.1

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.6 kB	28.6 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.3 kB	72.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	309 B	309 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	3.04 kB	3.04 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.74 kB	5.74 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.36 kB	2.36 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16 kB	16 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
_buildManifest.js gzip	461 B	461 B	✓
Overall change	461 B	461 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
index.html gzip	531 B	531 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Default Build with SWC (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
buildDuration	17.9s	17.9s	⚠️ +44ms
buildDurationCached	6.1s	6.1s	-16ms
nodeModulesSize	481 MB	481 MB	⚠️ +476 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.226	3.189	-0.04
/ avg req/sec	774.87	783.98	+9.11
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.395	1.363	-0.03
/error-in-render avg req/sec	1792.36	1834.42	+42.06

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	29.1 kB	29.1 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.9 kB	72.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	313 B	313 B	✓
css-HASH.js gzip	325 B	325 B	✓
dynamic-HASH.js gzip	3.02 kB	3.02 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.79 kB	5.79 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.44 kB	2.44 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	393 B	393 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.1 kB	16.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
_buildManifest.js gzip	457 B	457 B	✓
Overall change	457 B	457 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js chore/upgrade-postcss-dependencies	Change
index.html gzip	528 B	528 B	✓
link.html gzip	542 B	542 B	✓
withRouter.html gzip	524 B	524 B	✓
Overall change	1.59 kB	1.59 kB	✓

Commit: c0c2851

szympajka · 2022-03-18T12:51:32Z

Hey all! Thank you for your great work put into creating Next.js!

Looks like this PR is in progress. Do you know what is the estimated time for this hitting prod release? I do experience this issue related to autoprefixer - postcss/autoprefixer#1391

It was fixed in the next major version of postcss-preset-env - https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/CHANGELOG.md#700-november-16-2021, so this PR will fix my issue.

Until that time, I need to apply postcss-preset-env@7 myself :)

balazsorban44 added 2 commits February 15, 2022 03:20

chore: upgrade postcss dependencies

1fc4924

chore: run precompile step

0c08348

balazsorban44 requested review from timneutkens, ijjk, shuding and huozhi as code owners February 15, 2022 02:21

ijjk added the type: next label Feb 15, 2022

⚙ Update compiled files

d5171d5

This comment has been minimized.

Sign in to view

Merge branch 'canary' into chore/upgrade-postcss-dependencies

37763c6

balazsorban44 and others added 13 commits April 15, 2022 15:14

Merge branch 'canary' into chore/upgrade-postcss-dependencies

32a0253

⚙ Update compiled files

ac80307

Merge branch 'canary' into chore/upgrade-postcss-dependencies

16ccd32

chore: upgrade caniuse-lite

3b0f541

chore: upgrade caniuse-lite

414370a

Merge branch 'canary' into chore/upgrade-postcss-dependencies

9295265

⚙ Update compiled files

07eac61

Merge branch 'canary' into chore/upgrade-postcss-dependencies

1ef78e1

Merge branch 'canary' into chore/upgrade-postcss-dependencies

7c03dc5

chore(deps): upgrade dependencies

22485a2

test: update snapshot

f065156

⚙ Update compiled files

a1cd7a4

chore: trigger CI

c0c2851

timneutkens approved these changes Apr 22, 2022

View reviewed changes

timneutkens merged commit 0e02f20 into canary Apr 22, 2022

timneutkens deleted the chore/upgrade-postcss-dependencies branch April 22, 2022 11:14

github-actions bot locked as resolved and limited conversation to collaborators May 22, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: upgrade PostCSS dependencies #34354

chore: upgrade PostCSS dependencies #34354

balazsorban44 commented Feb 15, 2022

This comment has been minimized.

This comment has been minimized.

ijjk commented Feb 15, 2022 •

edited

ijjk commented Feb 15, 2022 •

edited

szympajka commented Mar 18, 2022 •

edited

chore: upgrade PostCSS dependencies #34354

chore: upgrade PostCSS dependencies #34354

Conversation

balazsorban44 commented Feb 15, 2022

Bug

Feature

Documentation / Examples

This comment has been minimized.

This comment has been minimized.

ijjk commented Feb 15, 2022 • edited

Failing test suites

ijjk commented Feb 15, 2022 • edited

Stats from current PR

szympajka commented Mar 18, 2022 • edited

ijjk commented Feb 15, 2022 •

edited

ijjk commented Feb 15, 2022 •

edited

szympajka commented Mar 18, 2022 •

edited