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 |