1. postcss-resolve-nested-selector
Resolve a nested selector in a PostCSS AST
postcss-resolve-nested-selector
Package: postcss-resolve-nested-selector
Last modified: Fri, 24 Jun 2022 10:46:48 GMT
Version: 0.1.1
License: MIT
Downloads: 16,665,646

Install

npm install postcss-resolve-nested-selector
yarn add postcss-resolve-nested-selector

postcss-resolve-nested-selector

Build Status

Given a (nested) selector in a PostCSS AST, return an array of resolved selectors.

Tested to work with the syntax of
postcss-nested
and postcss-nesting.
Should also work with SCSS and Less syntax. If you'd like to help out by
adding some automated tests for those, that'd be swell. In fact, if you'd
like to add any automated tests, you are a winner!

API

resolveNestedSelector(selector, node)

Returns an array of selectors resolved from selector.

For example, given this JS:

 var resolvedNestedSelector = require('postcss-resolve-nested-selector');
postcssRoot.eachRule(function(rule) {
  rule.selectors.forEach(function(selector) {
    console.log(resolvedNestedSelector(selector, rule));
  });
});

And the following CSS:

 .foo {
  .bar {
    color: pink;
  }
}

This should log:

['.foo']
['.foo .bar']

Or with this CSS:

 .foo {
  .bar &,
  a {
    color: pink;
  }
}

This should log:

['.foo']
['.bar .foo']
['.foo a']

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code