From d4821968faa63c5a6b00d652776843b4aba55e88 Mon Sep 17 00:00:00 2001
From: Imam Darmawan <79206804+immdrmwn@users.noreply.github.com>
Date: Thu, 3 Oct 2024 21:29:24 +0700
Subject: [PATCH 1/3] Add a skip option

- Add a skip option to undo the typography styles using specified classes
- Setup test for the skip option
---
 package-lock.json |  6 +++---
 src/index.js      | 24 ++++++++++++++++--------
 src/index.test.js | 18 ++++++++++++++++++
 3 files changed, 37 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 001b8a5..4894829 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@tailwindcss/typography",
-  "version": "0.5.14",
+  "version": "0.5.15",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@tailwindcss/typography",
-      "version": "0.5.14",
+      "version": "0.5.15",
       "license": "MIT",
       "dependencies": {
         "lodash.castarray": "^4.4.0",
@@ -30,7 +30,7 @@
         "tailwindcss": "^3.2.2"
       },
       "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || insiders"
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20"
       }
     },
     "node_modules/@ampproject/remapping": {
diff --git a/src/index.js b/src/index.js
index 04830b9..93abac1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,7 +9,7 @@ const computed = {
   // bulletColor: (color) => ({ 'ul > li::before': { backgroundColor: color } }),
 }
 
-function inWhere(selector, { className, modifier, prefix }) {
+function inWhere(selector, { className, modifier, prefix, skip }) {
   let prefixedNot = prefix(`.not-${className}`).slice(1)
   let selectorPrefix = selector.startsWith('>')
     ? `${modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`} `
@@ -18,18 +18,25 @@ function inWhere(selector, { className, modifier, prefix }) {
   // Parse the selector, if every component ends in the same pseudo element(s) then move it to the end
   let [trailingPseudo, rebuiltSelector] = commonTrailingPseudos(selector)
 
+  // Convert the specified class names that act as undo from typography style into attribute selectors.
+  let classesNot = skip
+    .map((className) => {
+      return `,[class~="${className}"], [class~="${className}"] *`
+    })
+    .join('')
+
   if (trailingPseudo) {
-    return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))${trailingPseudo}`
+    return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] * ${classesNot}))${trailingPseudo}`
   }
 
-  return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] *))`
+  return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"],[class~="${prefixedNot}"] * ${classesNot}))`
 }
 
 function isObject(value) {
   return typeof value === 'object' && value !== null
 }
 
-function configToCss(config = {}, { target, className, modifier, prefix }) {
+function configToCss(config = {}, { target, className, modifier, prefix, skip }) {
   function updateSelector(k, v) {
     if (target === 'legacy') {
       return [k, v]
@@ -43,13 +50,13 @@ function configToCss(config = {}, { target, className, modifier, prefix }) {
       let nested = Object.values(v).some(isObject)
       if (nested) {
         return [
-          inWhere(k, { className, modifier, prefix }),
+          inWhere(k, { className, modifier, prefix, skip }),
           v,
           Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v))),
         ]
       }
 
-      return [inWhere(k, { className, modifier, prefix }), v]
+      return [inWhere(k, { className, modifier, prefix, skip }), v]
     }
 
     return [k, v]
@@ -69,11 +76,11 @@ function configToCss(config = {}, { target, className, modifier, prefix }) {
 }
 
 module.exports = plugin.withOptions(
-  ({ className = 'prose', target = 'modern' } = {}) => {
+  ({ className = 'prose', target = 'modern', skip = [] } = {}) => {
     return function ({ addVariant, addComponents, theme, prefix }) {
       let modifiers = theme('typography')
 
-      let options = { className, prefix }
+      let options = { className, prefix, skip }
 
       for (let [name, ...selectors] of [
         ['headings', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'th'],
@@ -126,6 +133,7 @@ module.exports = plugin.withOptions(
               className,
               modifier,
               prefix,
+              skip,
             }
           ),
         }))
diff --git a/src/index.test.js b/src/index.test.js
index 8db6c6c..69484c0 100644
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -1421,3 +1421,21 @@ test('lead styles are inserted after paragraph styles', async () => {
     )
   })
 })
+
+test('should be possible to undo the typography style using specified class names', async () => {
+  let config = {
+    plugins: [typographyPlugin({ skip: ['class-name-1', 'class-name-2'] })],
+    content: [{ raw: html`<div class="prose"></div>` }],
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .prose
+        :where(ul > li):not(:where([class~='not-prose'], [class~='not-prose']
+            *, [class~='class-name-1'], [class~='class-name-1']
+            *, [class~='class-name-2'], [class~='class-name-2'] *))::marker {
+        color: var(--tw-prose-bullets);
+      }
+    `)
+  })
+})

From 3d8c095b5c0b8e09cc37bf56ab52dbc76cf3f047 Mon Sep 17 00:00:00 2001
From: Imam Darmawan <79206804+immdrmwn@users.noreply.github.com>
Date: Thu, 3 Oct 2024 21:49:06 +0700
Subject: [PATCH 2/3] Update README.md

---
 README.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/README.md b/README.md
index a4d73c5..38d6845 100644
--- a/README.md
+++ b/README.md
@@ -232,6 +232,23 @@ If you have a block of markup embedded in some content that shouldn't inherit th
 
 Note that you can't nest new `prose` instances within a `not-prose` block at this time.
 
+You can also specify a list of classes that will act like `not-prose` by using the `skip` option.
+
+```js {{ filename: 'tailwind.config.js' }}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    // ...
+  },
+  plugins: [
+    require('@tailwindcss/typography')({
+      skip: ['my-component']
+    }),
+  ]
+  ...
+}
+```
+
 ### Adding custom color themes
 
 You can create your own color theme by adding a new key in the `typography` section of your `tailwind.config.js` file and providing your colors under the `css` key:

From c087dd265aa92e28e552d412660dc4571afc6236 Mon Sep 17 00:00:00 2001
From: Imam Darmawan <79206804+immdrmwn@users.noreply.github.com>
Date: Fri, 4 Oct 2024 07:59:56 +0700
Subject: [PATCH 3/3] Add type for skip option

---
 src/index.d.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/index.d.ts b/src/index.d.ts
index 5c38097..4ee449c 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -1,4 +1,6 @@
-declare function plugin(options?: Partial<{ className: string; target: 'modern' | 'legacy' }>): {
+declare function plugin(
+  options?: Partial<{ className: string; target: 'modern' | 'legacy'; skip: Array<string> }>
+): {
   handler: () => void
 }