Refactor to unist-util-select (chrisg86#3)

* Refactor to unist-util-select

* Version bump, next major with breaking changes

* More examples

* Fix class name

* Update classMap section

Author: chrisg86

README.md

@@ -1,14 +1,17 @@
 # gatsby-remark-classes
+
 Automatically add class attributes to markdown elements.
 
 This is a plugin for [gatsby-transformer-remark](https://www.gatsbyjs.org/packages/gatsby-transformer-remark/?=gatsby-transformer-remark).
 
 ## Install
+
 ```
 npm install --save gatsby-remark-classes
 ```
 
 ## Configure
+
 In your `gatsby-config.js`:
 
 ```js
@@ -20,9 +23,9 @@ In your `gatsby-config.js`:
         resolve: `gatsby-remark-classes`,
         options: {
           classMap: {
-            h1: 'title',
-            h2: 'subtitle',
-            paragraph: 'para'
+            "heading[depth=1]": "title",
+            "heading[depth=2]": "subtitle",
+            paragraph: "para",
           }
         }
       }
@@ -35,27 +38,47 @@ The rules above applied to the following markdown
 
 ```markdown
 # Main heading
+
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, odio.
 
 ## Sub header
+
 Lorem ipsum dolor sit amet, consectetur adipisicing.
 ```
 
 Will result in this HTML output:
 
 ```html
 <h1 class="title">Main heading</h1>
-<p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, odio.</p>
+<p class="para">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, odio.
+</p>
 
 <h2 class="subtitle">Sub header</h2>
 <p class="para">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
 ```
 
 ## The classMap
-Right now you can add styles for **heading** elements (h1 - h6), **paragraphs** and **tables**. 
+
+For supported selectors please please consult [syntax-tree/mdast](https://github.com/syntax-tree/mdast#nodes) for the node list and have a look at the [Support section of unist-util-select](https://github.com/syntax-tree/unist-util-select#support)
 
 ## Motivation
 
 Applying custom styles is also possible by just wrapping your converted markdown in a parent element and write the styles for that. This will however not work if you use atomic css in your project or a framework like Semantic UI or Tailwind CSS.
 
 With this project you define which classes get assigned to which element.
+
+## Upgrade guide
+
+When upgrading from version 0.x.x to 1.x.x, you will have to update the selectors in your `gatsby-config.js` file.
+
+Some common selectors:
+
+- `h1` is now `heading[depth=1]`
+- `h2` is now `heading[depth=2]`
+- `ul` is now `list[ordered=false]`
+- `ol` is now `list[ordered=true]`
+- `li` is now `listItem`
+- `paragraph` is still `paragraph`
+
+Additionally you have now the chance to target child elements `code > pre` or even adjacent elements `paragraph + paragraph`. As stated above, please consult [syntax-tree/mdast](https://github.com/syntax-tree/mdast#nodes) for the node list and [syntax-tree/unist-util-select](https://github.com/syntax-tree/unist-util-select#support) for pseudo selectors and syntax.

index.js

@@ -1,4 +1,4 @@
-const visit = require('unist-util-visit');
+const { selectAll } = require('unist-util-select');
 
 const applyClassesToNode = (node, classes) => {
   node.data = node.data || {};
@@ -11,28 +11,11 @@ const applyClassesToNode = (node, classes) => {
 };
 
 module.exports = ({ markdownAST }, { classMap = {} }) => {
-  // @see: https://github.com/syntax-tree/mdast#nodes
-  visit(markdownAST, `heading`, (node) => {
-    const selector = `h${node.depth}`;
+  Object.keys(classMap).forEach((selector) => {
+    const nodes = selectAll(selector, markdownAST);
 
-    if (selector in classMap) {
+    nodes.forEach((node) => {
       node = applyClassesToNode(node, classMap[selector]);
-    }
-  });
-
-  visit(markdownAST, `table`, (node) => {
-    const selector = `table`;
-
-    if (selector in classMap) {
-      node = applyClassesToNode(node, classMap[selector]);
-    }
-  });
-
-  visit(markdownAST, `paragraph`, (node) => {
-    const selector = `paragraph`;
-
-    if (selector in classMap) {
-      node = applyClassesToNode(node, classMap[selector]);
-    }
+    });
   });
 };

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-remark-classes",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "description": "Automatically add class attributes to rendered markdown elements",
   "main": "index.js",
   "keywords": [
@@ -10,7 +10,7 @@
   "author": "Chris Greindl <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "unist-util-visit": "^1.4.0"
+    "unist-util-select": "^2.0.2"
   },
   "repository": {
     "type": "git",