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 ancestors 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-ancestors

Usage

postcss([ require('postcss-nested-ancestors') ]);

Options

placeholder

Type: string
Default: ^&

Ancestor selector pattern (utility option to automatically set both levelSymbol and parentSymbol)

Known issues

Multiple ancestor placeholders in same selector

This plugin currently fails when trying to replace more than one different ancestor pleceholder in a single rule selector. This scenario has not been considered in order to not bloat the code with a remote use case.

More precisely, all ancestor placeholders are replaced, but processed as if they where the equal to the first ancestor placeholder found in selector.

In general, do not use more than one ancestor placeholder in a single rule selector. Anyway, this use case can be rewritten by splitting the selectors in multiple nested rules (see edge case 2).