postcss-space-between

postcss-space-between

Changelog

Postcss plugin to add postcss plugin to add vertical / horizontal spacing between direct children

Input

.horizontal-list {
  @space-x 40px;
}
.vertical-list {
  --vertical-spacing: 40px;
  @space-y var(--vertical-spacing);
}
.global-variant {
  /* for usage in css module or web framework that uses :global (such as svelte) */
  @gspace-x 40px;
  @gspace-y 40px;
}

Output

.horizontal-list * > * {
  margin-left: 40px;
}
.vertical-list * > * {
  margin-top: 40px;
}
:global(.global-variant * > *) {
  margin-left: 40px;
  margin-top: 40px;
}

Installation

npm install --save-dev postcss postcss-space-between

Add to your postcss config

module.exports = {
  plugins: [
+   require('postcss-space-between'),
  ],
};

Supported At Rules

At Rule	Description
@space-x	Add horizontal spacing between direct children
@gspace-x	Add horizontal spacing between direct children with :global
@space-y	Add vertical spacing between direct children
@gspace-y	Add vertical spacing between direct children with :global

Test Cases & Examples

The following table lists test cases covered by this plugin, please refer to tests for details and to test input css as examples

Test Case	Description	Input	Output
in media queries	@media min-width: 768px { .list { @space-x 40px; } }	input	output
with combined selector	.list-1, .list2 { @space-y: 40px; }	input	output
with postcss-nesting	section { & .list { @space-x 40px; } }	input	output
with postcss-nested	section { .list { @space-x 40px; } }	input	output