Add skip option

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:

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
 }
 

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,
             }
           ),
         }))

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);
+      }
+    `)
+  })
+})