CSS fixes and dependency upgrades #7564

devongovett · 2022-01-17T04:19:16Z

Fixes In Dev, background image URIs are missing enclosed quotes #7556. This was caused by a change I made to make the old CSS transformer in line with @parcel/css, but it resulted in a bug. Now we preserve the quotes, and I added them to Parcel CSS as well to match. That way we don't need to deal with escaping. That will be handled by the minifier if needed.
Fixes Development build not downleveling nested selectors? lightningcss#56. Back in Do not compile with babel by default #4838 we removed the default browser targets for perf reasons with Babel at the time. But now that we are on SWC it shouldn't make much difference if we default to the latest browser versions. That way features that aren't supported anywhere yet like CSS nesting will get compiled.

Also updates a bunch of dependencies to fix security warnings and reduce the number of duplicates we have:

Fixes Regular Expression Denial of Service in postcss used by uncss #7543. This bumps htmlnano to 2.0.0, which removes uncss. That results in many very old dependencies being removed, such as jsdom and old postcss versions.
Removes css-module-loader-core which is unmaintained, and switches to the copy inside postcss-modules. Also upgrades postcss-modules. This removes all old versions of PostCSS from the lock file.
Bumps the Vue compiler to the latest as well, to get rid of old PostCSS dep.
Bumps SVGR to v6
Normalizes version of JSON5 to v2
http-proxy-middleware v2
And several other random bumps noted in the security audit

Hopefully these solve the security audit issues for now, and starts to reduce the number of dependencies we have.

height · 2022-01-17T04:19:17Z

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

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

parcel-benchmark · 2022-01-17T04:56:14Z

Benchmark Results

Kitchen Sink ✅

Timings

Description	Time	Difference
Cold	1.92s	-0.00ms
Cached	320.00ms	-10.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

Bundle	Size	Difference	Time	Difference
dist/legacy/parcel.7cdb0fad.webp	102.94kb	+0.00b	240.00ms	-303.00ms 🚀
dist/legacy/parcel.7cdb0fad.webp	102.94kb	+0.00b	240.00ms	-304.00ms 🚀
dist/modern/parcel.7cdb0fad.webp	102.94kb	+0.00b	241.00ms	-303.00ms 🚀

React HackerNews ✅

Timings

Description	Time	Difference
Cold	9.54s	+186.00ms
Cached	456.00ms	+14.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

AtlasKit Editor ✅

Timings

Description	Time	Difference
Cold	1.04m	+543.00ms
Cached	1.50s	+11.00ms

Cold Bundles

Bundle	Size	Difference	Time	Difference
dist/index.7b91daf8.js	1.78mb	+8.00b ⚠️	17.68s	+306.00ms
dist/index.c8c11eb0.js	693.84kb	-2.00b 🚀	46.99s	-24.00ms

Cached Bundles

Bundle	Size	Difference	Time	Difference
dist/index.6713c57d.js	1.78mb	+8.00b ⚠️	17.57s	-18.00ms
dist/index.c8c11eb0.js	693.84kb	-2.00b 🚀	47.10s	-26.00ms
dist/editorView.124f5fc0.js	594.92kb	+0.00b	46.16s	+11.26s ⚠️
dist/popup.64bc9a82.js	209.67kb	+0.00b	46.16s	+11.26s ⚠️
dist/Toolbar.1af0e801.js	107.23kb	+0.00b	46.16s	+11.26s ⚠️
dist/Modal.cd71eaf3.js	45.33kb	+0.00b	46.16s	+11.26s ⚠️
dist/ui.5d3f7adc.js	14.94kb	+0.00b	46.16s	+11.25s ⚠️
dist/smartMediaEditor.48c8cf63.js	13.25kb	+0.00b	46.16s	+11.26s ⚠️
dist/dropzone.39132d0c.js	12.16kb	+0.00b	46.16s	+11.26s ⚠️
dist/EmojiPickerComponent.0482d6c0.js	3.73kb	+0.00b	46.16s	+11.25s ⚠️
dist/dropzone.55bef257.js	3.29kb	+0.00b	46.16s	+11.26s ⚠️
dist/clipboard.df70240c.js	2.93kb	+0.00b	46.16s	+11.26s ⚠️
dist/ResourcedEmojiComponent.667554b4.js	2.12kb	+0.00b	46.16s	+11.25s ⚠️
dist/browser.4e039ed7.js	1.69kb	+0.00b	46.16s	+11.26s ⚠️
dist/media-card-analytics-error-boundary.c718a9a7.js	1.12kb	+0.00b	46.16s	+11.26s ⚠️
dist/media-picker-analytics-error-boundary.8b2547e5.js	966.00b	+0.00b	46.16s	+11.26s ⚠️
dist/simpleHasher.fc0d6100.js	643.00b	+0.00b	46.16s	+11.25s ⚠️

Three.js ✅

Timings

Description	Time	Difference
Cold	6.63s	+125.00ms
Cached	382.00ms	-0.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

No bundle changes detected.

Click here to view a detailed benchmark overview.

This partially reverts commit a313f76.

devongovett · 2022-01-17T06:24:06Z

Ended up reverting the babel upgrade because it caused a significant performance regression. Parcel's code compiled with the new Babel runs slower for some reason...

packages/optimizers/css/package.json

mischnic · 2022-01-17T13:22:58Z

AFAICT, the only change from the Babel upgrade (so the state before the "Revert babel upgrade" commit) is that public and private class properties are transpiled.

devongovett · 2022-01-17T15:21:52Z

Oh that's weird! Why would Babel start transpiling class properties?

mischnic · 2022-01-17T15:26:35Z

Happens in the Babel REPL as well, they are transpiled with Node <=14

https://babeljs.io/repl#?browsers=&build=&builtIns=false&corejs=false&spec=false&loose=false&code_lz=MYGwhgzhAEAa0G8BQ1oE9oF5oCYDcK0AxAF5bQAsBAvkA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=true&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env&prettier=false&targets=Node-14&version=7.16.9&externalPlugins=&assumptions=%7B%7D

Maybe because these version don't actually support them 100%?

devongovett · 2022-01-17T15:35:53Z

Hmm well I think it was working for us before just fine. Plus, node 12 is almost out of LTS (in April) so I'm not too concerned. Better to keep the improved performance.

mischnic · 2022-01-17T16:02:20Z

preset-env 7.14.0 is the first version that transpiles them, it works fine with

{
  "dependencies": {
    "@babel/cli": "^7.16.8",
    "@babel/core": "^7.16.7",
    "@babel/preset-env": "^7.13.0"
  }
}

So probably somehow caused by babel/babel#13091

Plus, node 12 is almost out of LTS (in April) so I'm not too concerned.

Bumping the target from Node 12 to Node 14 still transpiles them. It's only with 16 that they are left in

devongovett · 2022-01-17T16:08:32Z

It's weird because this still shows node 12: https://github.com/babel/babel/blob/main/packages/babel-compat-data/data/plugins.json#L25. But running with the debug option in preset env shows this:

Using plugins:
  proposal-class-static-block { node < 16.11 }
  proposal-private-property-in-object { node < 16.9 }
  proposal-class-properties { node < 14.6 }
  proposal-private-methods { node < 14.6 }

I thought maybe disabling class static block, etc. would help but it was still transpiled with:

exclude: [
  '@babel/plugin-proposal-private-methods',
  '@babel/plugin-proposal-private-property-in-object',
  '@babel/plugin-proposal-class-static-block'
]

devongovett · 2022-01-17T16:10:21Z

Going to merge this for now so we can get the security upgrades out, and file an issue with Babel.

devongovett · 2022-01-17T16:19:31Z

babel/babel#14167

devongovett added 8 commits January 16, 2022 18:46

Preserve quotes in url dependencies to avoid escaping issues

c068201

Use a default set of modern browser targets

2d5a823

Remove css-modules-loader-core

7d620f2

Bump postcss and htmlnano dependencies

9f3f047

Bump vue and svgr deps

2bc32a4

Dedup babel deps

68b28f3

Bump more dependencies

a313f76

Bump @parcel/css

d57336f

devongovett added 2 commits January 16, 2022 23:59

Fix package manager with @parcel/css

0831c82

Revert babel upgrade

2c00f54

This partially reverts commit a313f76.

thewilkybarkid reviewed Jan 17, 2022

View reviewed changes

packages/optimizers/css/package.json Outdated Show resolved Hide resolved

Update package.json

ac7d85f

mischnic approved these changes Jan 17, 2022

View reviewed changes

devongovett merged commit 0cf11f7 into v2 Jan 17, 2022

devongovett deleted the css-fixes branch January 17, 2022 16:28

devongovett mentioned this pull request Jan 19, 2022

Reduce the number of npm dependencies needed by parcel #7576

Merged

mischnic mentioned this pull request Feb 15, 2022

Broken url strings in CSS #7710

Closed

Shinyaigeek mentioned this pull request Mar 2, 2022

Fix: escape double quote of url value in CSS url() #7718

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS fixes and dependency upgrades #7564

CSS fixes and dependency upgrades #7564

devongovett commented Jan 17, 2022

height bot commented Jan 17, 2022

parcel-benchmark commented Jan 17, 2022 •

edited

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

devongovett commented Jan 17, 2022

mischnic commented Jan 17, 2022 •

edited

devongovett commented Jan 17, 2022

mischnic commented Jan 17, 2022

devongovett commented Jan 17, 2022

mischnic commented Jan 17, 2022 •

edited

devongovett commented Jan 17, 2022

devongovett commented Jan 17, 2022

devongovett commented Jan 17, 2022

CSS fixes and dependency upgrades #7564

CSS fixes and dependency upgrades #7564

Conversation

devongovett commented Jan 17, 2022

height bot commented Jan 17, 2022

parcel-benchmark commented Jan 17, 2022 • edited

Benchmark Results

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

Timings

Cold Bundles

Cached Bundles

devongovett commented Jan 17, 2022

mischnic commented Jan 17, 2022 • edited

devongovett commented Jan 17, 2022

mischnic commented Jan 17, 2022

devongovett commented Jan 17, 2022

mischnic commented Jan 17, 2022 • edited

devongovett commented Jan 17, 2022

devongovett commented Jan 17, 2022

devongovett commented Jan 17, 2022

parcel-benchmark commented Jan 17, 2022 •

edited

mischnic commented Jan 17, 2022 •

edited

mischnic commented Jan 17, 2022 •

edited