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

CSS SourceMaps #4440

Merged
merged 11 commits into from Apr 15, 2020
Merged

CSS SourceMaps #4440

merged 11 commits into from Apr 15, 2020

Conversation

wbinnssmith
Copy link
Contributor

@wbinnssmith wbinnssmith commented Apr 6, 2020

Currently we don't produce any sourcemaps for css. This PR uses PostCSS to produce sourcemaps from the CSSTransformer, CSSPackager, and CSSNanoOptimizer.

Currently a work in progress.

Test Plan:

  • yarn test
  • the kitchen sink example

@height
Copy link

height bot commented Apr 6, 2020

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

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

@wbinnssmith wbinnssmith added this to In progress in Parcel 2 via automation Apr 6, 2020
@wbinnssmith wbinnssmith force-pushed the wbinnssmith/css-sourcemaps branch 4 times, most recently from ad88371 to 3eee749 Compare April 6, 2020 05:11
Copy link
Member

@DeMoorJasper DeMoorJasper left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some initial feedback on some things that caught my attention, gonna take a deeper look if tests still fail after fixing these.

packages/optimizers/cssnano/src/CSSNanoOptimizer.js Outdated Show resolved Hide resolved
Parcel 2 automation moved this from In progress to Needs review Apr 6, 2020
@mischnic
Copy link
Member

mischnic commented Apr 6, 2020

(The extensive tests I once added in #2489 still exist in packages/core/integration-tests/test/sourcemaps.js)

@wbinnssmith wbinnssmith marked this pull request as ready for review April 7, 2020 04:28
@wbinnssmith wbinnssmith changed the title WIP: CSS SourceMaps CSS SourceMaps Apr 7, 2020
@wbinnssmith
Copy link
Contributor Author

(The extensive tests I once added in #2489 still exist in packages/core/integration-tests/test/sourcemaps.js)

Those use the old @parcel/source-map package. Is there a straightforward way of porting these tests to the new one, or maybe using Mozilla's source-map?

@parcel-benchmark
Copy link

parcel-benchmark commented Apr 7, 2020

Benchmark Results

Kitchen Sink ✅

Timings

Description Time Difference
Cold 6.76s -288.00ms
Cached 2.54s +80.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.d5807e82.webp 102.94kb +0.00b 276.00ms -35.00ms 🚀
dist/modern/parcel.d5807e82.webp 102.94kb +0.00b 276.00ms -36.00ms 🚀
dist/legacy/styles.27b3555b.css 29.00b +49.00b ⚠️ 1.74s -33.00ms
dist/modern/styles.27b3555b.css 29.00b +49.00b ⚠️ 1.50s +9.00ms

Cached Bundles

Bundle Size Difference Time Difference
dist/legacy/styles.27b3555b.css 29.00b +49.00b ⚠️ 446.00ms -12.00ms
dist/modern/styles.27b3555b.css 29.00b +49.00b ⚠️ 445.00ms -12.00ms

React HackerNews ✅

Timings

Description Time Difference
Cold 9.82s -626.00ms 🚀
Cached 2.38s -130.00ms 🚀

Cold Bundles

Bundle Size Difference Time Difference
dist/main/index.js 66.80kb +0.00b 2.13s -263.00ms 🚀
dist/module/index.js 37.45kb +0.00b 2.13s -263.00ms 🚀

Cached Bundles

Bundle Size Difference Time Difference
dist/main/index.js 66.80kb +0.00b 329.00ms +78.00ms ⚠️
dist/module/index.js 37.45kb +0.00b 327.00ms +78.00ms ⚠️

AtlasKit Editor ✅

Timings

Description Time Difference
Cold 3.15m +4.39s
Cached 5.19s +532.00ms ⚠️

Cold Bundles

Bundle Size Difference Time Difference
dist/ak-editor.fbf83432.js 2.40mb +3.00b ⚠️ 1.84m +3.24s
dist/EmojiPickerComponent.487f0492.js 98.73kb +0.00b 21.34s +1.91s ⚠️
dist/Modal.f79bc3a9.js 42.03kb +0.00b 5.43s +838.00ms ⚠️
dist/component.2d909511.js 40.07kb +0.00b 10.74s +1.24s ⚠️
dist/png-chunks-extract.883f0434.js 25.63kb +0.00b 11.22s +1.74s ⚠️
dist/DatePicker.00ddd357.js 21.63kb +0.00b 19.72s +2.27s ⚠️
dist/js.786dad09.js 16.49kb +0.00b 5.42s +856.00ms ⚠️
dist/workerHasher.8c8d4944.js 11.69kb +0.00b 24.20s +1.24s ⚠️
dist/16.d3236fb9.js 10.22kb +0.00b 5.41s +840.00ms ⚠️
dist/16.c42426b9.js 10.09kb +0.00b 5.41s +839.00ms ⚠️
dist/16.bc89f6ee.js 10.02kb +0.00b 5.41s +839.00ms ⚠️
dist/16.98f3baa0.js 9.98kb +0.00b 10.69s +1.25s ⚠️
dist/date.1c037d1c.js 9.04kb +0.00b 11.37s -900.00ms 🚀
dist/images.92799093.js 8.98kb +0.00b 12.40s +1.73s ⚠️
dist/feedback.bffa274a.js 8.95kb +0.00b 19.69s +2.24s ⚠️
dist/fallback.aab3a799.js 8.90kb +0.00b 14.93s -1.53m 🚀
dist/list-number.1316e9f7.js 8.77kb +0.00b 12.52s +1.15s ⚠️
dist/status.97878d50.js 8.77kb +0.00b 1.13m +3.57s ⚠️
dist/code.6b50d9e2.js 8.69kb +0.00b 11.28s +1.15s ⚠️
dist/link.c9af7470.js 8.61kb +0.00b 13.81s +2.45s ⚠️
dist/heading6.6daffbba.js 8.61kb +0.00b 19.69s +2.24s ⚠️
dist/heading3.bcae1464.js 8.60kb +0.00b 14.93s +1.26s ⚠️
dist/emoji.8c2bc3de.js 8.54kb +0.00b 13.60s +1.27s ⚠️
dist/heading5.6844d092.js 8.48kb +0.00b 1.84m +1.60m ⚠️
dist/expand.1a4c120f.js 8.46kb +0.00b 19.69s +2.24s ⚠️
dist/heading2.a19338b9.js 8.42kb +0.00b 14.93s +1.26s ⚠️
dist/mention.a261500a.js 8.38kb +0.00b 12.61s +708.00ms ⚠️
dist/heading4.02eb6187.js 8.37kb +0.00b 14.93s +1.26s ⚠️
dist/layout.524db8d2.js 8.36kb +0.00b 12.42s +1.06s ⚠️
dist/divider.acfaa3b9.js 8.33kb +0.00b 13.52s +1.19s ⚠️
dist/quote.55197fd6.js 8.33kb +0.00b 1.13m +3.57s ⚠️
dist/action.536bde1c.js 8.31kb +0.00b 11.28s +1.15s ⚠️
dist/decision.5cdc67b3.js 8.29kb +0.00b 13.52s +1.25s ⚠️
dist/panel-warning.cb245541.js 8.29kb +0.00b 13.70s +1.16s ⚠️
dist/list.624b775a.js 8.26kb +0.00b 12.52s +1.15s ⚠️
dist/heading1.ef0290b4.js 8.26kb +0.00b 14.93s +1.26s ⚠️
dist/panel-error.8bc896be.js 8.19kb +0.00b 13.70s +1.17s ⚠️
dist/panel-success.7636d22e.js 8.13kb +0.00b 13.70s +1.15s ⚠️
dist/panel-note.2eea2289.js 8.13kb +0.00b 13.70s +1.17s ⚠️
dist/16.c4ee6c00.js 5.17kb +0.00b 8.28s +713.00ms ⚠️
dist/16.7f86346a.js 4.89kb +0.00b 9.15s +761.00ms ⚠️
dist/16.5f13de00.js 4.84kb +0.00b 8.28s +713.00ms ⚠️
dist/16.c81c0695.js 4.82kb +0.00b 11.18s +1.04s ⚠️
dist/16.61fcf150.js 4.78kb +0.00b 10.09s +868.00ms ⚠️
dist/16.7b85ceeb.js 4.73kb +0.00b 9.97s +749.00ms ⚠️
dist/16.ba932c2e.js 4.70kb +0.00b 9.97s +748.00ms ⚠️
dist/16.232fb9da.js 4.69kb +0.00b 11.19s +1.06s ⚠️
dist/16.60895c0e.js 4.65kb +0.00b 9.17s +769.00ms ⚠️
dist/16.771934f3.js 4.65kb +0.00b 8.28s +713.00ms ⚠️
dist/16.8a21dead.js 4.64kb +0.00b 9.15s +761.00ms ⚠️
dist/16.ba7ed30e.js 4.64kb +0.00b 9.17s +770.00ms ⚠️
dist/16.ea6e7d4b.js 4.63kb +0.00b 8.28s +713.00ms ⚠️
dist/16.ba0c7d86.js 4.56kb +0.00b 10.09s +868.00ms ⚠️
dist/ak-editor.b0c28b13.css 3.38kb +52.00b ⚠️ 1.86m +3.19s
dist/ResourcedEmojiComponent.4495d16e.js 2.32kb +0.00b 10.69s +1.25s ⚠️
dist/workerHasher.853c799b.js 1.67kb +0.00b 24.20s +1.32s ⚠️
dist/media-picker-analytics-error-boundary.17cad0d5.js 1.63kb +0.00b 48.99s +9.87s ⚠️
dist/simpleHasher.3db92b55.js 642.00b +0.00b 26.41s +3.53s ⚠️
dist/index.html 212.00b +0.00b 5.33s +4.37s ⚠️

Cached Bundles

Bundle Size Difference Time Difference
dist/ak-editor.fbf83432.js 2.40mb +0.00b 668.00ms +102.00ms ⚠️
dist/pdfRenderer.7bec20fe.js 1.13mb +0.00b 655.00ms +97.00ms ⚠️
dist/editorView.4303a38b.js 586.94kb +0.00b 654.00ms +97.00ms ⚠️
dist/popup.e6f98104.js 199.18kb +0.00b 655.00ms +97.00ms ⚠️
dist/esm.0e8f307b.js 138.44kb +0.00b 656.00ms +98.00ms ⚠️
dist/Toolbar.a6408d78.js 100.36kb +0.00b 654.00ms +97.00ms ⚠️
dist/EmojiPickerComponent.487f0492.js 98.73kb +0.00b 656.00ms +98.00ms ⚠️
dist/media-viewer.d8e0f167.js 71.17kb +0.00b 655.00ms +97.00ms ⚠️
dist/card.af011b7e.js 67.06kb +0.00b 655.00ms +97.00ms ⚠️
dist/ui.7ac5730d.js 54.96kb +0.00b 655.00ms +97.00ms ⚠️
dist/smartMediaEditor.f01a6689.js 54.93kb +0.00b 654.00ms +97.00ms ⚠️
dist/component.6c698016.js 48.66kb +0.00b 658.00ms +93.00ms ⚠️
dist/Modal.f79bc3a9.js 42.03kb +0.00b 667.00ms +102.00ms ⚠️
dist/component.2d909511.js 40.07kb +0.00b 667.00ms +101.00ms ⚠️
dist/png-chunks-extract.883f0434.js 25.63kb +0.00b 658.00ms +93.00ms ⚠️
dist/EmojiPickerComponent.bd6f5b65.js 22.42kb +0.00b 656.00ms +98.00ms ⚠️
dist/DatePicker.00ddd357.js 21.63kb +0.00b 656.00ms +98.00ms ⚠️
dist/dropzone.1ec7a1e1.js 17.75kb +0.00b 655.00ms +97.00ms ⚠️
dist/clipboard.03c807f0.js 17.21kb +0.00b 654.00ms +97.00ms ⚠️
dist/js.786dad09.js 16.49kb +0.00b 667.00ms +102.00ms ⚠️
dist/browser.cb3b82f6.js 16.08kb +0.00b 654.00ms +97.00ms ⚠️
dist/workerHasher.8c8d4944.js 11.69kb +0.00b 656.00ms +98.00ms ⚠️
dist/16.d3236fb9.js 10.22kb +0.00b 667.00ms +101.00ms ⚠️
dist/16.c42426b9.js 10.09kb +0.00b 667.00ms +101.00ms ⚠️
dist/16.bc89f6ee.js 10.02kb +0.00b 667.00ms +101.00ms ⚠️
dist/16.98f3baa0.js 9.98kb +0.00b 667.00ms +101.00ms ⚠️
dist/EmojiTypeAheadComponent.a96819ac.js 9.31kb +0.00b 655.00ms +97.00ms ⚠️
dist/date.1c037d1c.js 9.04kb +0.00b 657.00ms +93.00ms ⚠️
dist/images.92799093.js 8.98kb +0.00b 657.00ms +92.00ms ⚠️
dist/feedback.bffa274a.js 8.95kb +0.00b 656.00ms +98.00ms ⚠️
dist/fallback.aab3a799.js 8.90kb +0.00b 656.00ms +97.00ms ⚠️
dist/list-number.1316e9f7.js 8.77kb +0.00b 657.00ms +92.00ms ⚠️
dist/status.97878d50.js 8.77kb +0.00b 656.00ms +97.00ms ⚠️
dist/code.6b50d9e2.js 8.69kb +0.00b 657.00ms +93.00ms ⚠️
dist/link.c9af7470.js 8.61kb +0.00b 657.00ms +92.00ms ⚠️
dist/heading6.6daffbba.js 8.61kb +0.00b 656.00ms +98.00ms ⚠️
dist/heading3.bcae1464.js 8.60kb +0.00b 656.00ms +98.00ms ⚠️
dist/emoji.8c2bc3de.js 8.54kb +0.00b 657.00ms +93.00ms ⚠️
dist/heading5.6844d092.js 8.48kb +0.00b 656.00ms +98.00ms ⚠️
dist/expand.1a4c120f.js 8.46kb +0.00b 656.00ms +98.00ms ⚠️
dist/heading2.a19338b9.js 8.42kb +0.00b 656.00ms +98.00ms ⚠️
dist/mention.a261500a.js 8.38kb +0.00b 657.00ms +98.00ms ⚠️
dist/heading4.02eb6187.js 8.37kb +0.00b 656.00ms +98.00ms ⚠️
dist/layout.524db8d2.js 8.36kb +0.00b 657.00ms +92.00ms ⚠️
dist/divider.acfaa3b9.js 8.33kb +0.00b 657.00ms +93.00ms ⚠️
dist/quote.55197fd6.js 8.33kb +0.00b 657.00ms +98.00ms ⚠️
dist/action.536bde1c.js 8.31kb +0.00b 657.00ms +93.00ms ⚠️
dist/decision.5cdc67b3.js 8.29kb +0.00b 657.00ms +93.00ms ⚠️
dist/panel-warning.cb245541.js 8.29kb +0.00b 657.00ms +98.00ms ⚠️
dist/list.624b775a.js 8.26kb +0.00b 657.00ms +98.00ms ⚠️
dist/heading1.ef0290b4.js 8.26kb +0.00b 656.00ms +97.00ms ⚠️
dist/panel-error.8bc896be.js 8.19kb +0.00b 657.00ms +98.00ms ⚠️
dist/panel.6acb9fb3.js 8.18kb +0.00b 657.00ms +98.00ms ⚠️
dist/table.500adb35.js 8.18kb +0.00b 656.00ms +97.00ms ⚠️
dist/panel-success.7636d22e.js 8.13kb +0.00b 657.00ms +98.00ms ⚠️
dist/panel-note.2eea2289.js 8.13kb +0.00b 657.00ms +98.00ms ⚠️
dist/16.073347bf.js 5.24kb +0.00b 657.00ms +92.00ms ⚠️
dist/16.c4ee6c00.js 5.17kb +0.00b 658.00ms +93.00ms ⚠️
dist/16.7f86346a.js 4.89kb +0.00b 657.00ms +92.00ms ⚠️
dist/16.5f13de00.js 4.84kb +0.00b 658.00ms +93.00ms ⚠️
dist/16.51c4a0ba.js 4.82kb +0.00b 657.00ms +93.00ms ⚠️
dist/16.c81c0695.js 4.82kb +0.00b 657.00ms +93.00ms ⚠️
dist/16.61fcf150.js 4.78kb +0.00b 657.00ms +93.00ms ⚠️
dist/16.7b85ceeb.js 4.73kb +0.00b 657.00ms +92.00ms ⚠️
dist/16.ba932c2e.js 4.70kb +0.00b 657.00ms +92.00ms ⚠️
dist/16.232fb9da.js 4.69kb +0.00b 657.00ms +93.00ms ⚠️
dist/16.60895c0e.js 4.65kb +0.00b 657.00ms +92.00ms ⚠️
dist/16.771934f3.js 4.65kb +0.00b 658.00ms +93.00ms ⚠️
dist/16.8a21dead.js 4.64kb +0.00b 657.00ms +92.00ms ⚠️
dist/16.ba7ed30e.js 4.64kb +0.00b 657.00ms +92.00ms ⚠️
dist/16.ea6e7d4b.js 4.63kb +0.00b 658.00ms +93.00ms ⚠️
dist/16.ba0c7d86.js 4.56kb +0.00b 657.00ms +93.00ms ⚠️
dist/EmojiPickerComponent.11d65c6e.js 3.72kb +0.00b 656.00ms +98.00ms ⚠️
dist/ak-editor.b0c28b13.css 3.38kb +52.00b ⚠️ 654.00ms +97.00ms ⚠️
dist/EmojiUploadComponent.b1f515dc.js 2.53kb +0.00b 656.00ms +98.00ms ⚠️
dist/ResourcedEmojiComponent.4495d16e.js 2.32kb +0.00b 668.00ms +102.00ms ⚠️
dist/workerHasher.853c799b.js 1.67kb +0.00b 656.00ms +98.00ms ⚠️
dist/media-picker-analytics-error-boundary.17cad0d5.js 1.63kb +0.00b 654.00ms +96.00ms ⚠️
dist/media-card-analytics-error-boundary.030a93f8.js 1.62kb +0.00b 655.00ms +97.00ms ⚠️
dist/media-viewer-analytics-error-boundary.62b79dc4.js 1.59kb +0.00b 655.00ms +97.00ms ⚠️
dist/simpleHasher.3db92b55.js 642.00b +0.00b 656.00ms +98.00ms ⚠️
dist/EmojiPickerComponent.39e7a3dc.js 467.00b +0.00b 656.00ms +98.00ms ⚠️
dist/index.html 212.00b +0.00b 670.00ms +102.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.

@DeMoorJasper
Copy link
Member

DeMoorJasper commented Apr 7, 2020

@wbinnssmith the new source-map package is fully compatible with the old one, main differences is that it's no longer async and a lot stricter. (ie addMap moved into various different functions addIndexedMappings, addRawMappings, ...)

I've updated the tests, they're pretty much all failing somewhere so the maps should be incorrect at the moment. Also updated the typescript sourcemap tests as they were still disabled, shouldn't have any negative impact on this PR

@wbinnssmith
Copy link
Contributor Author

Just pushed a change that allows for mappings corresponding to the nearest contiguous series of spaces or tabs. I also continued skipping LESS and SASS tests as those can be addressed in a followup PR. cc @mischnic @DeMoorJasper

Parcel 2 automation moved this from Needs review to Reviewer approved Apr 15, 2020
@DeMoorJasper DeMoorJasper merged commit 8e80016 into v2 Apr 15, 2020
Parcel 2 automation moved this from Reviewer approved to Done Apr 15, 2020
@DeMoorJasper DeMoorJasper deleted the wbinnssmith/css-sourcemaps branch April 15, 2020 08:16
@maximal
Copy link

maximal commented Apr 29, 2020

What about --no-source-maps option?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Parcel 2
  
Done
Development

Successfully merging this pull request may close these issues.

None yet

5 participants