Add element modifiers for picture and images

Fixes tailwindlabs#366

Add element modifiers `prose-picture:*` and `prose-images:*` to target `<picture>` and `<img> <picture>` respectively.

* Modify `src/index.js` to include element modifiers for `prose-picture:*` and `prose-images:*`.
* Update `README.md` to list `prose-picture:*` and `prose-images:*` as available element modifiers.
* Add default styles for `prose-picture:*` and `prose-images:*` in `src/styles.js`.
* Add tests for the new element modifiers `prose-picture:*` and `prose-images:*` in `src/index.test.js`.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/tailwindlabs/tailwindcss-typography/issues/366?shareId=XXXX-XXXX-XXXX-XXXX).

README.md

@@ -180,6 +180,8 @@ Here's a complete list of available element modifiers:
 | `prose-th:{utility}`         | `th`                         |
 | `prose-td:{utility}`         | `td`                         |
 | `prose-img:{utility}`        | `img`                        |
+| `prose-picture:{utility}`    | `picture`                    |
+| `prose-images:{utility}`     | `img`, `picture > img`       |
 | `prose-video:{utility}`      | `video`                      |
 | `prose-hr:{utility}`         | `hr`                         |
 

src/index.js

@@ -102,6 +102,8 @@ module.exports = plugin.withOptions(
         ['th'],
         ['td'],
         ['img'],
+        ['picture'],
+        ['img', 'picture > img'],
         ['video'],
         ['hr'],
         ['lead', '[class~="lead"]'],

src/index.test.js

@@ -707,6 +707,8 @@ test('element variants', async () => {
             prose-th:text-left
             prose-td:align-center
             prose-img:rounded-lg
+            prose-picture:rounded-lg
+            prose-images:rounded-lg
             prose-video:my-12
             prose-hr:border-t-2
         "
@@ -855,6 +857,14 @@ test('element variants', async () => {
           :is(:where(img):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           border-radius: 0.5rem;
         }
+        .prose-picture\:rounded-lg
+          :is(:where(picture):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
+          border-radius: 0.5rem;
+        }
+        .prose-images\:rounded-lg
+          :is(:where(img, picture > img):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
+          border-radius: 0.5rem;
+        }
         .prose-video\:my-12
           :is(:where(video):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
           margin-top: 3rem;
@@ -906,6 +916,8 @@ test('element variants with custom class name', async () => {
             markdown-th:text-left
             markdown-td:align-center
             markdown-img:rounded-lg
+            markdown-picture:rounded-lg
+            markdown-images:rounded-lg
             markdown-video:my-12
             markdown-hr:border-t-2
         "
@@ -1059,6 +1071,14 @@ test('element variants with custom class name', async () => {
           :is(:where(img):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           border-radius: 0.5rem;
         }
+        .markdown-picture\:rounded-lg
+          :is(:where(picture):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
+          border-radius: 0.5rem;
+        }
+        .markdown-images\:rounded-lg
+          :is(:where(img, picture > img):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
+          border-radius: 0.5rem;
+        }
         .markdown-video\:my-12
           :is(:where(video):not(:where([class~='not-markdown'], [class~='not-markdown'] *))) {
           margin-top: 3rem;