Fix apply custom className to CSS variables as well

When "className" is used to change the default class from "prose" to something custom, the associated CSS variables would still be named "tw-prose-xyz". This PR is making sure that if a user is asking for a custom class name, it is also applied to the underlying CSS variables.
tailwindlabs · Apr 18, 2024 · 669ee2f · 669ee2f
1 parent cacc7dc
commit 669ee2f
Show file tree

Hide file tree

Showing 3 changed files with 1,571 additions and 1,567 deletions.
diff --git a/src/index.js b/src/index.js
@@ -132,9 +132,10 @@ module.exports = plugin.withOptions(
       )
     }
   },
-  () => {
+  (args) => {
+    const className = args?.className || 'prose'
     return {
-      theme: { typography: styles },
+      theme: { typography: styles({ className }) },
     }
   }
 )
diff --git a/src/index.test.js b/src/index.test.js
@@ -576,13 +576,13 @@ test('custom class name', async () => {
         DEFAULT: {
           css: [
             {
-              color: 'var(--tw-prose-body)',
+              color: 'var(--tw-markdown-body)',
               maxWidth: '65ch',
               '[class~="lead"]': {
-                color: 'var(--tw-prose-lead)',
+                color: 'var(--tw-markdown-lead)',
               },
               strong: {
-                color: 'var(--tw-prose-bold)',
+                color: 'var(--tw-markdown-bold)',
                 fontWeight: '600',
               },
               'ol[type="A"]': {
@@ -602,7 +602,7 @@ test('custom class name', async () => {
               },
               'ol > li::marker': {
                 fontWeight: '400',
-                color: 'var(--tw-prose-counters)',
+                color: 'var(--tw-markdown-counters)',
               },
               'code::before': {
                 content: '"&#96;"',
@@ -623,15 +623,15 @@ test('custom class name', async () => {
         ${defaults}
 
         .markdown {
-          color: var(--tw-prose-body);
+          color: var(--tw-markdown-body);
           max-width: 65ch;
         }
         .markdown
           :where([class~='lead']):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
-          color: var(--tw-prose-lead);
+          color: var(--tw-markdown-lead);
         }
         .markdown :where(strong):not(:where([class~='not-markdown'], [class~='not-markdown'] *)) {
-          color: var(--tw-prose-bold);
+          color: var(--tw-markdown-bold);
           font-weight: 600;
         }
         .markdown
@@ -660,7 +660,7 @@ test('custom class name', async () => {
         .markdown
           :where(ol > li):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::marker {
           font-weight: 400;
-          color: var(--tw-prose-counters);
+          color: var(--tw-markdown-counters);
         }
         .markdown
           :where(code):not(:where([class~='not-markdown'], [class~='not-markdown'] *))::before {