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;
}
npm install --save-dev postcss postcss-space-between
Add to your postcss config
module.exports = {
plugins: [
+ require('postcss-space-between'),
],
};
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
|
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 |