PostCSS Nested Selectors
Note: This is a fork of postcss-nested-ancestors.
PostCSS plugin to reference any ancestor selector in nested CSS.
Getting ancestor selectors
When writing modular nested CSS, &
current parent selector is often not enough.
PostCSS Nested Selectors introduces ^&
selector which let you reference any parent ancestor selector with an easy and customizable interface.
This plugin should be used before a POSTCSS rules unwrapper like postcss-nested.
See PostCSS docs for examples for your environment.
Ancestor selectors schema
.level-1 {
| | .level-2 {
| | | .level-3 {
| | | | .level-4 {
| | | | |
| | | | --- & {} /* & = ".level-1 .level-2 .level-3 .level-4" */
| | | ------- ^& {} /* ^& = ".level-1 .level-2 .level-3" */
| | ----------- ^^& {} /* ^^& = ".level-1 .level-2" */
| --------------- ^^^& {} /* ^^^& = ".level-1" */
------------------- ^^^^& {} /* ^^^^& = "" */
}
}
}
}
A real example
/* Without postcss-nested-selectors */ & /* Must manually repeat ".MyComponent" for each child */ }} /* With postcss-nested-selectors */ & /* Skip ":hover" inheritance here */ }} /* After postcss-nested-selectors */ &} /* After postcss-nested */ /* No ":hover" inheritance here! */
Why?
Currently another plugin - postcss-current-selector - has tried to solve the problem of referencing ancestors selector. It works great, but its approach involves assigning ancestor selectors to special variables to be later processed by a further postcss plugin postcss-simple-vars.
PostCSS Nested Selectors instead replaces special ancestor selectors, makes no use of variable assignment and produces an output ready to be unwrapped with postcss-nested.
Installation
$ npm install postcss-nested-selectors
Usage
;
Options
placeholder
Type: string
Default: ^&
Ancestor selector pattern (utility option to automatically set both levelSymbol
and parentSymbol
)
levelSymbol
Type: string
Default: ^
Define ancestor selector fragment reative to the matching nesting level
parentSymbol
Type: string
Default: &
Ancestor selector base symbol