Fix spacing utility demos

[Josh68]

Overview

• Reuses postcss plugin config for both Webpack and Gulp tasks (not necessary for this update, but these were out of sync)
• Removes postcss-preset-env plugin
• Updates spacing util demos to replace shorthand examples with -start and -end combinations, to fix issues across supported browsers.
  • postcss-preset-env with postcss-logical was unable to solve these issues and introduced others

Screenshots

Utilities -> Spacing -> Padding demo, PR 651:

Same demo, this PR (note .u-pad-block-1 and .u-pad-inline-1):

Testing

1. Preview theme utils-spacing-padding preview
2. PR 651 utils-spacing-padding preview - From before the introduction of postcss-preset-env
3. Preview theme utils-spacing-margin preview
4. PR 651 utils-spacing-margin preview
5. See that shorthand examples (.u-pad-inline-1, .u-pad-block-1, .u-space-pad-1, and .u-space-block-1) all look correct in the previews for this PR
6. Confirm in Chrome, FF, and Safari / iOS Safari (+ new Edge, if you like)

---

• Fixes *-inline-start and *-inline-end utilities not functioning #661

/CC @person

[Josh68]

@tylersticka and @calebeby: I am putting this out for review having completely removed postcss-preset-env, for the moment. I was unable to make the logical-properties-and-values feature work as intended, either with or without the preserve option.

If in the future we were to add this back, demo markup and CSS would need to be revised to add dir attributes to demo containers, while preserving layout (I went through these changes along the way, and they're in the commit history). Even these additions did not work to fix all the demos, with or without postcss-preset-env.

The logical-properties plugin did not seem to be converting all values correctly, particularly for the Utilities -> Spacing -> Logical Properties examples, with varied direction and writing modes. I've tried to raise the issue with the maintainer, so maybe it will be usable sometime in the future, if there are actually bugs that can be fixed.

TBH, I get pretty confused by some of the combinations, particularly with vertical writing modes, but I think the examples in Utilities -> Spacing -> Logical Properties look correct as they were in #651. This update does not affect those demos, but fixes shorthand property examples (see screenshots and testing) by substituting, e.g., padding-inline with padding-inline-start + padding-inline-end -- within the core mixin. I added comments to this effect and hope this is considered OK for the time being.

If there's a feeling we should be keeping postcss-preset-env in the project for other reasons, we'd have to consider setting it to stage 3 or 4, because the default -- stage 2 -- will automatically apply logical-properties transformations and reintroduce issues.

Please let me know if you have any questions about this update. Thanks

[tylersticka]

Others are welcome to review, but please don't merge until I've had a chance to. Thank you!

[Josh68]

@tylersticka, ready for re-review. Thanks

[Josh68]

@tylersticka, thanks for the feedback. Updated and postcss-preset-env removed.

[tylersticka]

Nit: We usually align the first asterisks (not the second), like jsdoc.

[Josh68]

I tried that and the linter changed it. I'll try again.

[Josh68]

No idea why, but this time I reverted it to the way I had it and the linter didn't complain, so updated.

[Josh68]

@tylersticka, whenever you have a moment ^