postcss-selector-property

Find and use CSS properties with selectors.

Usage

Install with npm or yarn.

npm install postcss-selector-property --save-dev

yarn add postcss-selector-property -D

Examples

From /test/index.js.

Simple selectors

.a { color: blue }
.z { color: ref(.a, color) }

Becomes

.a { color: blue }
.z { color: blue }

Compound selectors

.a,
.b { color: blue }
.x,
.z { color: ref(.a, color) }

Becomes

.a,
.b { color: blue }
.x,
.z { color: blue }

Pseudo selectors

.a { color: blue }
.a:hover:not(:first-child) { background: darkblue }
.z { background: ref(.a:hover:not(:first-child), background) }

Becomes

.a { color: blue }
.a:hover:not(:first-child) { background: darkblue }
.z { background: darkblue }

Local selectors

Use the & sigil to substitute the current selector, like in SASS, LESS, etc.

.a { color: blue; background: ref(&, color); border-color: ref(&-b, color) }
.a-b { color: red }

Becomes

.a { color: blue; background: blue; border-color: red }
.a-b { color: red }

Chained properties

.a { color: blue }
.b { color: ref(.a, color) }
.c { color: ref(.d, color) }
.d { color: ref(.b, color) }

Becomes

.a { color: blue }
.b { color: blue }
.c { color: blue }
.d { color: blue }

Fallbacks

Fallbacks work when the referenced property is missing:

.a { color: blue }
.z { color: ref(.a, non-existent, white) }

Becomes

.a { color: blue }
.z { color: white }

And they work when the referenced selector is missing:

.a { color: blue }
.m { color: ref(.n, color, #f00) }

Becomes

.a { color: blue }
.m { color: #f00 }

License

MIT