Change order of kbd modifier

Author: reinink

Diff for: README.md

@@ -168,6 +168,7 @@ Here's a complete list of available element modifiers:
 | `prose-figcaption:{utility}` | `figcaption`                 |
 | `prose-strong:{utility}`     | `strong`                     |
 | `prose-em:{utility}`         | `em`                         |
+| `prose-kbd:{utility}`        | `kbd`                        |
 | `prose-code:{utility}`       | `code`                       |
 | `prose-pre:{utility}`        | `pre`                        |
 | `prose-ol:{utility}`         | `ol`                         |
@@ -181,7 +182,6 @@ Here's a complete list of available element modifiers:
 | `prose-img:{utility}`        | `img`                        |
 | `prose-video:{utility}`      | `video`                      |
 | `prose-hr:{utility}`         | `hr`                         |
-| `prose-kbd:{utility}`        | `kbd`                        |
 
 When stacking these modifiers with other modifiers like `hover`, you most likely want the other modifier to come first:
 

Diff for: src/index.js

@@ -90,6 +90,7 @@ module.exports = plugin.withOptions(
         ['figcaption'],
         ['strong'],
         ['em'],
+        ['kbd'],
         ['code'],
         ['pre'],
         ['ol'],
@@ -104,7 +105,6 @@ module.exports = plugin.withOptions(
         ['video'],
         ['hr'],
         ['lead', '[class~="lead"]'],
-        ['kbd'],
       ]) {
         selectors = selectors.length === 0 ? [name] : selectors
 

Diff for: src/index.test.js

@@ -695,6 +695,7 @@ test('element variants', async () => {
             prose-figcaption:opacity-75
             prose-strong:font-medium
             prose-em:italic
+            prose-kbd:border-b-2
             prose-code:font-mono
             prose-pre:font-mono
             prose-ol:pl-6
@@ -708,7 +709,6 @@ test('element variants', async () => {
             prose-img:rounded-lg
             prose-video:my-12
             prose-hr:border-t-2
-            prose-kbd:border-b-2
         "
         ></div>`,
       },
@@ -808,6 +808,10 @@ test('element variants', async () => {
           :is(:where(em):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-style: italic;
         }
+        .prose-kbd\:border-b-2
+          :is(:where(kbd):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
+          border-bottom-width: 2px;
+        }
         .prose-code\:font-mono
           :is(:where(code):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
@@ -864,10 +868,6 @@ test('element variants', async () => {
           :is(:where([class~='lead']):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           font-style: italic;
         }
-        .prose-kbd\:border-b-2
-          :is(:where(kbd):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
-          border-bottom-width: 2px;
-        }
       `
     )
   })
@@ -894,6 +894,7 @@ test('element variants with custom class name', async () => {
             markdown-figcaption:opacity-75
             markdown-strong:font-medium
             markdown-em:italic
+            markdown-kbd:border-b-2
             markdown-code:font-mono
             markdown-pre:font-mono
             markdown-ol:pl-6
@@ -907,7 +908,6 @@ test('element variants with custom class name', async () => {
             markdown-img:rounded-lg
             markdown-video:my-12
             markdown-hr:border-t-2
-            markdown-kbd:border-b-2
         "
         ></div>`,
       },
@@ -1009,6 +1009,10 @@ test('element variants with custom class name', async () => {
           :is(:where(em):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-style: italic;
         }
+        .markdown-kbd\:border-b-2
+          :is(:where(kbd):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
+          border-bottom-width: 2px;
+        }
         .markdown-code\:font-mono
           :is(:where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
@@ -1069,10 +1073,6 @@ test('element variants with custom class name', async () => {
                 *))) {
           font-style: italic;
         }
-        .markdown-kbd\:border-b-2
-          :is(:where(kbd):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
-          border-bottom-width: 2px;
-        }
       `
     )
   })