Miss any of our Open RFC calls?Watch the recordings here! »

print-selector-list

1.1.3 • Public • Published

print-selector-list

A helper function that accepts a query selector and returns a list of selectors as single-line-separated, commented-out lines of CSS.

Install

npm install --save-dev print-selector-list

Usage

Most useful for styling components if you use shallow BEM-like selectors:

<section class="article-section">
  <h1 class="article-section__heading">Article heading</h1>
  <article class="article-section__body">
    Lorem exercitationem minus vel aperiam similique doloribus Assumenda nostrum quasi labore voluptatum veniam esse Exercitationem laborum eaque ex doloremque temporibus delectus Quibusdam voluptatem aut officia ab laudantium, doloribus dolore quod.
    <div class="article-section__body__share-article__wrapper">
      <button class="article-section__body__share-article__button btn btn--main">
        <app-icon class="article-section__body__share-article__button__icon"/>
        Share article
      </button>
    </div>
  </article>
</section>
import printSelectorList from 'print-selector-list'
 
printSelectorList('.article-section')
 
/* outputs:
 
"
// .article-section__heading {}
 
// .article-section__body {}
 
// .article-section__body__share-article__wrapper {}
 
// .article-section__body__share-article__button {}
 
// .article-section__body__share-article__button__icon {}
"
*/

Note that printSelectorList returns only the first class in each element's list, which is why it is important to list unique classes first, and generic ones after that.

<!-- DO: -->
 
<button class="article-section__body__share-article__button btn btn--main">
</button>
 
<!-- DON'T: -->
 
<button class="btn btn--main article-section__body__share-article__button">
</button>
 

Options

printSelectorList accepts 2 parameters:

  • selector [String] (mandatory): passed into document.querySelector (usually it's the component's wrapper class);

  • logToConsole [Boolean] (optional): if set to true, logs output to console. Default: false.

Install

npm i print-selector-list

DownloadsWeekly Downloads

10

Version

1.1.3

License

MIT

Unpacked Size

3.43 kB

Total Files

3

Last publish

Collaborators

  • avatar