JSPM

postcss-resolve-nested-selector

0.1.5
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5464243
  • Score
    100M100P100Q246398F
  • License MIT

Resolve a nested selector in a PostCSS AST

Package Exports

  • postcss-resolve-nested-selector
  • postcss-resolve-nested-selector/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-resolve-nested-selector) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

postcss-resolve-nested-selector

test

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

Tested to work with the syntax of postcss-nested. 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!

If you want to resolve selectors in the same style as postcss-nesting you should instead use selector-resolve-nested

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']