postcss-merge-longhand

Merge longhand properties into shorthand with PostCSS.

Install

With npm do:

npm install postcss-merge-longhand --save

Example

Merge longhand properties into shorthand; works with margin, padding, inset, scroll-margin, scroll-padding, border, columns and the box alignment place-* shorthands. For more examples see the tests.

Input

h1 {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}

h2 {
  column-width: 12em;
  column-count: 2;
}

Output

h1 {
  margin: 10px 20px;
}

h2 {
  columns: 12em 2;
}

Usage

See the PostCSS documentation for examples for your environment.

Browser support

A browser that does not know place-content, place-items or place-self ignores the whole declaration and loses both axes. The plugin therefore merges alignment longhands into these shorthands only when every browser in your Browserslist targets is known to support all three. A target without compatibility data, such as Opera Mini, counts as unsupported, so the Browserslist defaults query keeps the longhands.

The plugin accepts the Browserslist options overrideBrowserslist, stats, path and env. The browser build for the web has no access to your targets and assumes a fixed list that includes KaiOS, UC Browser and QQ Browser for Android, so it keeps the longhands.

Values that a target may not parse, such as safe, unsafe, last baseline, left, right, legacy, anchor-center and safe normal, merge only with a value that depends on the same keywords. A browser that lacks one of them drops the whole shorthand, where it would drop only one longhand.

The same holds for inset, the -block and -inline shorthands of margin, padding, inset, scroll-margin and scroll-padding, and the scroll-margin and scroll-padding shorthands, which arrived long after their longhands. The plugin creates or grows one only when every target supports it, and otherwise keeps the longhands. It still shortens a shorthand that is already there.

Writing modes

A flow-relative property such as margin-block-start sets a different physical side depending on the writing-mode and direction of the element, which any other rule may set. The plugin therefore never assumes either. It moves a declaration, or drops one that a later declaration overrides, only when the result is the same for every combination of the two. A physical declaration (margin-top) between a flow-relative one and its shorthand stops the move, and so does the legacy scroll-snap-margin-* spelling.

Contributors

See CONTRIBUTORS.md.

License

MIT © Ben Briggs