Skip to content
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

Update to PostCSS 8 #5166

Merged
merged 7 commits into from
Oct 6, 2020
Merged

Update to PostCSS 8 #5166

merged 7 commits into from
Oct 6, 2020

Conversation

mischnic
Copy link
Member

@mischnic mischnic commented Sep 20, 2020

↪️ Pull Request

Closes #5152

@height
Copy link

height bot commented Sep 20, 2020

Link Height tasks by mentioning a task ID in the pull request title or description, commit messages, or comments.

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

@parcel-benchmark
Copy link

parcel-benchmark commented Sep 20, 2020

Benchmark Results

Kitchen Sink ✅

Timings

Description Time Difference
Cold 8.93s -38.00ms
Cached 3.73s -44.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.d5807e82.webp 102.94kb +0.00b 255.00ms -45.00ms 🚀
dist/modern/parcel.d5807e82.webp 102.94kb +0.00b 291.00ms -50.00ms 🚀

Cached Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.d5807e82.webp 102.94kb +0.00b 394.00ms -24.00ms 🚀
dist/modern/parcel.d5807e82.webp 102.94kb +0.00b 299.00ms +63.00ms ⚠️
dist/modern/index.1964d1f6.js 1.10kb +0.00b 395.00ms +52.00ms ⚠️
dist/modern/index.html 701.00b +0.00b 395.00ms +56.00ms ⚠️
dist/modern/index.7bc22a8b.css 77.00b +0.00b 395.00ms +56.00ms ⚠️

React HackerNews ✅

Timings

Description Time Difference
Cold 30.11s +590.00ms
Cached 3.73s +49.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/NotFound.f8a0616d.js 387.00b +0.00b 1.21s +140.00ms ⚠️

Cached Bundles

Bundle Size Difference Time Difference
dist/index.js 478.81kb +0.00b 285.00ms +58.00ms ⚠️
dist/PermalinkedComment.9c5ad065.js 4.22kb +0.00b 285.00ms +59.00ms ⚠️
dist/UserProfile.c1927888.js 1.62kb +0.00b 285.00ms +59.00ms ⚠️
dist/NotFound.f8a0616d.js 387.00b +0.00b 158.00ms -103.00ms 🚀
dist/logo.24c8bf9e.png 274.00b +0.00b 223.00ms +95.00ms ⚠️

AtlasKit Editor ✅

Timings

Description Time Difference
Cold 3.40m -3.60s
Cached 8.30s +181.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/Modal.19ffed32.js 41.27kb +0.00b 8.14s +654.00ms ⚠️
dist/component.d7c29980.js 30.70kb +0.00b 7.39s -371.00ms 🚀
dist/component.54080a26.js 22.50kb +0.00b 8.13s +643.00ms ⚠️
dist/js.5733a017.js 16.40kb +0.00b 8.13s +644.00ms ⚠️
dist/component.77c0f682.js 6.05kb +0.00b 10.26s +2.01s ⚠️
dist/EmojiPickerComponent.627aca6b.js 3.58kb +0.00b 15.05s +2.36s ⚠️
dist/png-chunks-extract.a844fdb6.js 3.41kb +0.00b 8.13s +644.00ms ⚠️
dist/Modal.0304b9ed.js 3.08kb +0.00b 8.13s +643.00ms ⚠️
dist/feedback.d5590b34.js 1.64kb +0.00b 9.78s -4.90s 🚀
dist/16.9ccb5b28.js 1.38kb +0.00b 8.45s -2.92s 🚀
dist/16.19c93285.js 1.33kb +0.00b 10.34s +2.09s ⚠️
dist/16.c7751e34.js 1.33kb +0.00b 8.44s -2.88s 🚀
dist/16.a37df53b.js 1.13kb +0.00b 8.44s -2.88s 🚀
dist/16.eafe1a11.js 1.13kb +0.00b 10.26s +2.01s ⚠️
dist/heading2.a2a1be3f.js 1.11kb +0.00b 9.58s -521.00ms 🚀
dist/panel.a28c56ee.js 897.00b +0.00b 12.25s +2.29s ⚠️
dist/index.html 119.00b +0.00b 9.34s -1.08s 🚀

Cached Bundles

Bundle Size Difference Time Difference
dist/pdfRenderer.15a6a023.js 1.11mb +6.00b ⚠️ 515.00ms +39.00ms ⚠️
dist/editorView.e06544fb.js 587.12kb +0.00b 549.00ms +38.00ms ⚠️
dist/popup.6c453e3c.js 169.96kb +0.00b 536.00ms +36.00ms ⚠️
dist/Toolbar.83ac0b6e.js 92.34kb +0.00b 549.00ms +38.00ms ⚠️
dist/EmojiPickerComponent.ae601247.js 75.29kb +0.00b 472.00ms +73.00ms ⚠️
dist/media-viewer.7079364e.js 72.03kb +0.00b 511.00ms +71.00ms ⚠️
dist/card.645a5c17.js 55.01kb +0.00b 511.00ms +71.00ms ⚠️
dist/card.0313bac8.js 52.78kb +0.00b 545.00ms +40.00ms ⚠️
dist/Modal.19ffed32.js 41.27kb +0.00b 311.00ms +19.00ms ⚠️
dist/component.54080a26.js 22.50kb +0.00b 343.00ms +45.00ms ⚠️
dist/DatePicker.0df05dac.js 21.21kb +0.00b 472.00ms +73.00ms ⚠️
dist/EmojiPickerComponent.7dc0ebd0.js 18.23kb +0.00b 472.00ms +73.00ms ⚠️
dist/dropzone.291ad844.js 17.34kb +0.00b 545.00ms +40.00ms ⚠️
dist/smartMediaEditor.125a19a7.js 16.93kb +0.00b 549.00ms +38.00ms ⚠️
dist/js.5733a017.js 16.40kb +0.00b 311.00ms +19.00ms ⚠️
dist/ui.fee77548.js 13.97kb +0.00b 511.00ms +71.00ms ⚠️
dist/workerHasher.1e706e77.js 11.75kb +0.00b 502.00ms +92.00ms ⚠️
dist/EmojiTypeAheadComponent.1990d771.js 8.67kb +0.00b 501.00ms +91.00ms ⚠️
dist/component.77c0f682.js 6.05kb +0.00b 343.00ms +45.00ms ⚠️
dist/card.383bd9bd.js 5.61kb +0.00b 511.00ms +71.00ms ⚠️
dist/media-viewer.59c17dad.js 3.92kb +0.00b 515.00ms +39.00ms ⚠️
dist/EmojiPickerComponent.627aca6b.js 3.58kb +0.00b 473.00ms +74.00ms ⚠️
dist/png-chunks-extract.a844fdb6.js 3.41kb +0.00b 311.00ms +19.00ms ⚠️
dist/dropzone.3c67f0a6.js 3.23kb +0.00b 536.00ms +36.00ms ⚠️
dist/Modal.0304b9ed.js 3.08kb +0.00b 311.00ms +19.00ms ⚠️
dist/clipboard.da112b6e.js 2.75kb +0.00b 537.00ms +37.00ms ⚠️
dist/16.290b4a43.js 2.38kb +0.00b 311.00ms +19.00ms ⚠️
dist/EmojiUploadComponent.d54a1fc6.js 2.18kb +0.00b 501.00ms +91.00ms ⚠️
dist/card.eea6ad8c.js 2.03kb +0.00b 516.00ms +40.00ms ⚠️
dist/date.231500d2.js 1.73kb +0.00b 387.00ms +45.00ms ⚠️
dist/16.d16f14ed.js 1.73kb +0.00b 376.00ms +48.00ms ⚠️
dist/images.80c92f5e.js 1.67kb +0.00b 387.00ms +45.00ms ⚠️
dist/16.1b6ca79f.js 1.66kb +0.00b 343.00ms +45.00ms ⚠️
dist/feedback.d5590b34.js 1.64kb +0.00b 457.00ms +75.00ms ⚠️
dist/browser.75813db0.js 1.61kb +0.00b 537.00ms +37.00ms ⚠️
dist/workerHasher.6d5b22d7.js 1.54kb +0.00b 501.00ms +91.00ms ⚠️
dist/workerHasher.fa198233.js 1.54kb +0.00b 545.00ms +40.00ms ⚠️
dist/list-number.c35f9589.js 1.46kb +0.00b 422.00ms +55.00ms ⚠️
dist/status.8ab4226b.js 1.46kb +0.00b 452.00ms +75.00ms ⚠️
dist/16.9ccb5b28.js 1.38kb +0.00b 367.00ms +48.00ms ⚠️
dist/code.3dd71280.js 1.38kb +0.00b 382.00ms +45.00ms ⚠️
dist/16.19c93285.js 1.33kb +0.00b 343.00ms +45.00ms ⚠️
dist/16.c7751e34.js 1.33kb +0.00b 367.00ms +49.00ms ⚠️
dist/16.51049e2c.js 1.32kb +0.00b 638.00ms +39.00ms ⚠️
dist/16.18344f47.js 1.31kb +0.00b 381.00ms +44.00ms ⚠️
dist/link.2f4427e6.js 1.30kb +0.00b 422.00ms +55.00ms ⚠️
dist/heading6.fdbbdf4d.js 1.30kb +0.00b 457.00ms +75.00ms ⚠️
dist/heading3.2113b7a1.js 1.29kb +0.00b 452.00ms +75.00ms ⚠️
dist/16.2c4c1846.js 1.27kb +0.00b 381.00ms +44.00ms ⚠️
dist/emoji.93ae61d3.js 1.23kb +0.00b 387.00ms +45.00ms ⚠️
dist/16.d17ab186.js 1.23kb +0.00b 376.00ms +48.00ms ⚠️
dist/16.436f097f.js 1.21kb +0.00b 638.00ms +39.00ms ⚠️
dist/16.b4da0acb.js 1.19kb +0.00b 376.00ms +48.00ms ⚠️
dist/16.02c68c4f.js 1.18kb +0.00b 381.00ms +44.00ms ⚠️
dist/heading5.e195aab1.js 1.17kb +0.00b 456.00ms +74.00ms ⚠️
dist/expand.450f3aea.js 1.16kb +0.00b 457.00ms +75.00ms ⚠️
dist/media-card-analytics-error-boundary.2323af57.js 1.15kb +0.00b 516.00ms +40.00ms ⚠️
dist/16.b46ef690.js 1.14kb +0.00b 638.00ms +39.00ms ⚠️
dist/16.4e3b0235.js 1.14kb +0.00b 376.00ms +48.00ms ⚠️
dist/16.9ba230ea.js 1.13kb +0.00b 367.00ms +49.00ms ⚠️
dist/16.a37df53b.js 1.13kb +0.00b 367.00ms +49.00ms ⚠️
dist/16.9adb4ec7.js 1.13kb +0.00b 367.00ms +48.00ms ⚠️
dist/16.eafe1a11.js 1.13kb +0.00b 343.00ms +45.00ms ⚠️
dist/heading2.a2a1be3f.js 1.11kb +0.00b 452.00ms +75.00ms ⚠️
dist/16.3920766f.js 1.10kb +0.00b 638.00ms +39.00ms ⚠️
dist/mention.4d64e059.js 1.07kb +0.00b 422.00ms +55.00ms ⚠️
dist/heading4.ec980e93.js 1.06kb +0.00b 456.00ms +74.00ms ⚠️
dist/16.afcb09b6.js 1.05kb +0.00b 376.00ms +48.00ms ⚠️
dist/layout.52ba15f7.js 1.05kb +0.00b 422.00ms +55.00ms ⚠️
dist/divider.16defde6.js 1.03kb +0.00b 387.00ms +45.00ms ⚠️
dist/quote.aa25b83c.js 1.02kb +0.00b 437.00ms +65.00ms ⚠️
dist/action.9aa72b39.js 1.00kb +0.00b 382.00ms +45.00ms ⚠️
dist/decision.20244046.js 1010.00b +0.00b 387.00ms +45.00ms ⚠️
dist/panel-warning.97a0e3b3.js 1008.00b +0.00b 435.00ms +63.00ms ⚠️
dist/list.c9147a62.js 978.00b +0.00b 422.00ms +55.00ms ⚠️
dist/heading1.7d899ba5.js 976.00b +0.00b 452.00ms +75.00ms ⚠️
dist/panel-error.8d11e8b7.js 906.00b +0.00b 638.00ms +39.00ms ⚠️
dist/panel.a28c56ee.js 897.00b +0.00b 435.00ms +63.00ms ⚠️
dist/table.5a4874ee.js 889.00b +0.00b 452.00ms +75.00ms ⚠️
dist/panel-success.9b923e58.js 845.00b +0.00b 435.00ms +63.00ms ⚠️
dist/panel-note.97a4d541.js 841.00b +0.00b 435.00ms +63.00ms ⚠️
dist/media-picker-analytics-error-boundary.f8ddfee3.js 839.00b +0.00b 537.00ms +37.00ms ⚠️
dist/media-card-analytics-error-boundary.663369b9.js 835.00b +0.00b 511.00ms +71.00ms ⚠️
dist/media-card-analytics-error-boundary.73ba4074.js 835.00b +0.00b 545.00ms +40.00ms ⚠️
dist/media-viewer-analytics-error-boundary.0afa7031.js 755.00b +0.00b 516.00ms +40.00ms ⚠️
dist/EmojiPickerComponent.2e54b9c6.js 535.00b +0.00b 473.00ms +74.00ms ⚠️
dist/simpleHasher.16c8bf41.js 528.00b +0.00b 502.00ms +92.00ms ⚠️
dist/simpleHasher.a29b2a8e.js 528.00b +0.00b 545.00ms +40.00ms ⚠️

Three.js x4 🚨

Timings

Description Time Difference
Cold FAILED -0.00ms
Cached FAILED -0.00ms

Cold Bundles

No bundles found, this is probably a failed build...

Cached Bundles

No bundles found, this is probably a failed build...

Click here to view a detailed benchmark overview.

@mischnic mischnic marked this pull request as ready for review September 28, 2020 15:21
@ai
Copy link

ai commented Sep 29, 2020

@mischnic New PostCSS recommends moving postcss to peerDependencies:

  1. Users will be able to update PostCSS without Parcel release
  2. New PostCSS 8 plugins will move postcss from plugin’s dependencies to peerDependencies, so anyway users will need postcss in their package.json

Will this recommendation work for Parcel 2?

@mischnic
Copy link
Member Author

We require plugins from the users project, so that should work.

Or do you mean the Parcel itself should have postcss as a peerdependency? E.g. so that this call uses the user's postcss version?

let {messages, root} = await postcss(plugins).process(

That would be rather difficult...

@ai
Copy link

ai commented Sep 29, 2020

@mischnic Parcel should use postcss from the user’s dependencies. Right now we need to wait for the Parcel update to be able to use new PostCSS (and seems like Parcel 1 never will have PostCSS 8).

I think optional peer dependency in Parcel will solve this problem.

@ai
Copy link

ai commented Sep 29, 2020

Parcel auto-install feature is awesome 😍

I use Parcel for all my projects (including PostCSS website).

@mischnic
Copy link
Member Author

🎉 😄

@ai
Copy link

ai commented Oct 6, 2020

What is the current blocker? I want to use PostCSS 8 on the PostCSS website.

@mischnic
Copy link
Member Author

mischnic commented Oct 6, 2020

@DeMoorJasper Should we add postcss@8 as a dependency to the integration test monorepo package?

@DeMoorJasper
Copy link
Member

@mischnic I don't think it's necessary as it's already gonna get installed anyway by all the references it already has in various package.json's in the monorepo.

Feel free to add it though

@mischnic mischnic merged commit 8e72ac5 into v2 Oct 6, 2020
@mischnic mischnic deleted the postcss8 branch October 6, 2020 20:21
@ai
Copy link

ai commented Oct 8, 2020

Any way to use this fix before next Parcel 2 beta release?

I want to update postcss.org and add a guide to PostCSS 8 Migration guide.

@mischnic
Copy link
Member Author

mischnic commented Oct 8, 2020

yarn add parcel@nightly

@privatenumber
Copy link

This makes Parcel 2 completely unusable if the PostCSS plugins your codebase relies on doesn't support PostCSS 8 yet.

I think adding PostCSS 8 support is great, but on the user-end it's a pretty minor improvement that blocks Parcel users from upgrading to v2.

In my case, it's preset-env which requires many plugin dependencies to be upgraded before it can do a PostCSS 8 release. IMO this is a pretty common PostCSS plugin to use with PostCSS so I imagine many users may encounter this blocker.

Is it possible to support both PostCSS 7 and 8 somehow?

@mischnic
Copy link
Member Author

See #5152 (comment)

So plugins for PostCSS 7 also work with version 8?

Yeap. But PostCSS will show a warning and about using deprecated API.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

PostCSS 8
6 participants