postcss-inrule
The one rule to nest them all!
https://css-tricks.com/instyle-current-selector-sass/
Just like a nested media query, inRule
describes its parent element. Configurable special characters are used to easily modify all possible relationships inside its parent tree and produce new selectors.
Also available for SASS 3.4+.
Installation
npm install postcss-inrule
Needs to be used before style unwrappers like postcss-nested
.
Append
Appending to one of current element parents is done with the <
special character. Each additional use of this character targets a higher parent (works the same for all features).
; } @; } {
Insert
Inserting a new selector at a certain position above the current element is done with the ^
special character.
table { table-layout: fixed; thead { font-weight: normal; } tr { height: 30px; @in ^thead { height: 50px; // table thead tr { }; } }}
Replace
Replacing a certain selector is done using the @
character. Multiselectors that become duplicit due to the replacement are removed from the rendered selector.
ul, ol { list-style: none; li { display: inline-block; a { text-decoration: underline; @in @.modifier { color: orange; // ul .modifier a, ol .modifier a { }; } @in @@.links @span { background: pink; // .links span a { }; } } }}
Options
Special character tags are configurable by passing new options to the plugin.
{ tagAppend: '<', tagInsert: '\\^', tagReplace: '@' }