csstools / postcss-nesting

Nest style rules inside each other

Home Page:https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unwanted whitespace when nesting CSS.

nileshprajapati opened this issue · comments

Test Code:

a {
   color: blue;
   
   &:hover {
      color: red;
   }
}

Expected result:

a {
   color: blue
}

a:hover {
   color: red;
}

Actual result (output):

a {
   color: blue
}

a:hover {
      color: red;
   }

postcss-nesting add unwanted spacing when the child nesting/multi-nesting, resulting in the CSS Properties and closing end curly bracket having additional whitespace.

I’m not against this enhancement, but I want to point out that this is currently a deliberate choice (see #32). There are similar issues in the PostCSS repository.

This project does not attempt to modify internal spacing data. Instead, it preserves the original whitespace that the author gave to each child of the nesting rule. To remove the space, this would require determining the indentation of the nesting rule, removing that, and then removing two of those from each child node of the nesting element.