postcss-space-between v0.2.0

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

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