Add modern spacing utilities from design system

[shawnbot]

Until we figure out what's up with the safelist not working in SFDigitalServices/sfgov#1462, we need to add these spacing utilities here to fix existing forms.

This one ended up being way more complicated than I'd hoped. Adding new CSS and then changing the templates fails the build because the snapshots need to be updated. But I couldn't figure out why my snapshots weren't matching in CI until I remembered that the tests run the built JS, so you have to build the JS before updating the snapshots:

npm run build-js
npx jest -u

Of course, this yielded a cryptic error:

> [email protected] build-js
> rollup -c


src/standalone.js → dist/formio-sfds.standalone.js...
[!] (plugin postcss) Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer
dist/formio-sfds.css
Error: You must provide the URL of lib/mappings.wasm by calling SourceMapConsumer.initialize({ 'lib/mappings.wasm': ... }) before using SourceMapConsumer
    at readWasm (/Users/shawn.allen/sfds/formio-sfds/node_modules/@csstools/postcss-sass/node_modules/source-map/lib/read-wasm.js:8:13)
    at wasm (/Users/shawn.allen/sfds/formio-sfds/node_modules/@csstools/postcss-sass/node_modules/source-map/lib/wasm.js:25:16)
    at /Users/shawn.allen/sfds/formio-sfds/node_modules/@csstools/postcss-sass/node_modules/source-map/lib/source-map-consumer.js:264:14
    at async Promise.all (index 0)

I fixed this with npm i -D source-map, as suggested in mozilla/source-map#432.

Heads up to @aekong on this too 😄

[github-actions]

Size Change: +2.66 kB (+3%)

Total Size: 92.5 kB

Filename	Size	Change
dist/formio-sfds.css	15.1 kB	+1.29 kB (+9%)	🔍
dist/formio-sfds.standalone.js	70.8 kB	+1.37 kB (+2%)

ℹ️ View Unchanged

Filename	Size
dist/portal.js	6.65 kB

_{compressed-size-action}

[shawnbot]

We don't use the xs breakpoint in any of our templates, so this can go away (and saves us a ton on CSS payload size).

[shawnbot]

I'm leaving this commented out for now because we don't appear to use it anywhere, and adding it has a big impact on our CSS bundle size because of how the utilities are generated.

[shawnbot]

I've replaced all of the instances of [mp][trblxy]-[45] with the -60 and -96 equivalents in our templates.

[joni-f-g]

what's the thinking for having different tokens for the same value, e.g. 40/3 for 40px? do we need to keep both to get around this safelist issue and maintain support across templates?

[shawnbot]

It's really just for backwards compatibility: I didn't go all the way in replacing the -3 utilities in the templates, and there might be forms out there with classes hard-coded in HTML components that I don't want to break.

[joni-f-g]

got it, I'm seeing the -40 utilities in the deployment so I'll approve!