From e7eef8fc2eee1180e23ae4d46ce1a74fd82c3705 Mon Sep 17 00:00:00 2001 From: Lqvrent Date: Sun, 24 Mar 2024 22:59:15 -0700 Subject: [PATCH 1/2] Add `prose-kbd` element modifier Add selector, update readme and tests. --- README.md | 1 + src/index.js | 1 + src/index.test.js | 10 ++++++++++ 3 files changed, 12 insertions(+) diff --git a/README.md b/README.md index f428984..a44f2b1 100644 --- a/README.md +++ b/README.md @@ -181,6 +181,7 @@ 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 --git a/src/index.js b/src/index.js index 7b32ca7..57b9814 100644 --- a/src/index.js +++ b/src/index.js @@ -104,6 +104,7 @@ module.exports = plugin.withOptions( ['video'], ['hr'], ['lead', '[class~="lead"]'], + ['kbd'], ]) { selectors = selectors.length === 0 ? [name] : selectors diff --git a/src/index.test.js b/src/index.test.js index 94e3552..dc3c5f1 100644 --- a/src/index.test.js +++ b/src/index.test.js @@ -708,6 +708,7 @@ test('element variants', async () => { prose-img:rounded-lg prose-video:my-12 prose-hr:border-t-2 + prose-kbd:border-b-2 " >`, }, @@ -863,6 +864,10 @@ 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; + } ` ) }) @@ -902,6 +907,7 @@ 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 " >`, }, @@ -1063,6 +1069,10 @@ 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; + } ` ) }) From 88c50341ed992ee096960055166ad1d25b519a22 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Tue, 26 Mar 2024 08:10:04 -0400 Subject: [PATCH 2/2] Change order of `kbd` modifier --- README.md | 2 +- src/index.js | 2 +- src/index.test.js | 20 ++++++++++---------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index a44f2b1..950c9a5 100644 --- a/README.md +++ b/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 --git a/src/index.js b/src/index.js index 57b9814..04830b9 100644 --- a/src/index.js +++ b/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 --git a/src/index.test.js b/src/index.test.js index dc3c5f1..8db6c6c 100644 --- a/src/index.test.js +++ b/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 " >`, }, @@ -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 " >`, }, @@ -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; - } ` ) })