@tailwindcss/typography - npm Package Compare versions

Comparing version 0.5.2 to 0.5.3

package.json

 {
   "name": "@tailwindcss/typography",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.",
@@ -29,3 +29,3 @@ "main": "src/index.js",
   "peerDependencies": {
-    "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || insiders"
+    "tailwindcss": ">=3.0.0 || insiders"
   },
@@ -32,0 +32,0 @@ "devDependencies": {

src/index.js

@@ -13,29 +13,26 @@ const plugin = require('tailwindcss/plugin')
   let prefixedNot = prefix(`.not-${className}`).slice(1)
+  let selectorPrefix = selector.startsWith('>') ? `.${className} ` : ''
 
   if (selector.endsWith('::before')) {
-    if (selector.startsWith('>')) {
-      return `> :where(${selector.slice(2, -8)}):not(:where([class~="${prefixedNot}"] *))::before`
-    }
-    return `:where(${selector.slice(0, -8)}):not(:where([class~="${prefixedNot}"] *))::before`
+    return `:where(${selectorPrefix}${selector.slice(
+      0,
+      -8
+    )}):not(:where([class~="${prefixedNot}"] *))::before`
   }
 
   if (selector.endsWith('::after')) {
-    if (selector.startsWith('>')) {
-      return `> :where(${selector.slice(2, -7)}):not(:where([class~="${prefixedNot}"] *))::after`
-    }
-    return `:where(${selector.slice(0, -7)}):not(:where([class~="${prefixedNot}"] *))::after`
+    return `:where(${selectorPrefix}${selector.slice(
+      0,
+      -7
+    )}):not(:where([class~="${prefixedNot}"] *))::after`
   }
 
   if (selector.endsWith('::marker')) {
-    if (selector.startsWith('>')) {
-      return `> :where(${selector.slice(2, -8)}):not(:where([class~="${prefixedNot}"] *))::marker`
-    }
-    return `:where(${selector.slice(0, -8)}):not(:where([class~="${prefixedNot}"] *))::marker`
+    return `:where(${selectorPrefix}${selector.slice(
+      0,
+      -8
+    )}):not(:where([class~="${prefixedNot}"] *))::marker`
   }
 
-  if (selector.startsWith('>')) {
-    return `> :where(${selector.slice(2)}):not(:where([class~="${prefixedNot}"] *))`
-  }
-
-  return `:where(${selector}):not(:where([class~="${prefixedNot}"] *))`
+  return `:where(${selectorPrefix}${selector}):not(:where([class~="${prefixedNot}"] *))`
 }
@@ -93,5 +90,4 @@
 
-      for (let [name, selector = name] of [
-        ['headings', 'h1, h2, h3, h4, th'],
-        ['lead', '[class~="lead"]'],
+      for (let [name, ...selectors] of [
+        ['headings', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'th'],
         ['h1'],
@@ -101,2 +97,4 @@ ['h2'],
         ['h4'],
+        ['h5'],
+        ['h6'],
         ['p'],
@@ -122,4 +120,11 @@ ['a'],
         ['hr'],
+        ['lead', '[class~="lead"]'],
       ]) {
-        addVariant(`${className}-${name}`, `& :is(${inWhere(selector, options)})`)
+        selectors = selectors.length === 0 ? [name] : selectors
+
+        let selector = target === 'legacy'
+          ? selectors.map(selector => `& ${selector}`)
+          : selectors.join(', ')
+
+        addVariant(`${className}-${name}`, target === 'legacy' ? selector : `& :is(${inWhere(selector, options)})`)
       }
@@ -126,0 +131,0 @@

src/index.test.js

@@ -9,2 +9,51 @@ const path = require('path')
 
+let defaults = css`
+  *,
+  ::before,
+  ::after {
+    --tw-translate-x: 0;
+    --tw-translate-y: 0;
+    --tw-rotate: 0;
+    --tw-skew-x: 0;
+    --tw-skew-y: 0;
+    --tw-scale-x: 1;
+    --tw-scale-y: 1;
+    --tw-pan-x: ;
+    --tw-pan-y: ;
+    --tw-pinch-zoom: ;
+    --tw-scroll-snap-strictness: proximity;
+    --tw-ordinal: ;
+    --tw-slashed-zero: ;
+    --tw-numeric-figure: ;
+    --tw-numeric-spacing: ;
+    --tw-numeric-fraction: ;
+    --tw-ring-inset: ;
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: rgb(59 130 246 / 0.5);
+    --tw-ring-offset-shadow: 0 0 #0000;
+    --tw-ring-shadow: 0 0 #0000;
+    --tw-shadow: 0 0 #0000;
+    --tw-shadow-colored: 0 0 #0000;
+    --tw-blur: ;
+    --tw-brightness: ;
+    --tw-contrast: ;
+    --tw-grayscale: ;
+    --tw-hue-rotate: ;
+    --tw-invert: ;
+    --tw-saturate: ;
+    --tw-sepia: ;
+    --tw-drop-shadow: ;
+    --tw-backdrop-blur: ;
+    --tw-backdrop-brightness: ;
+    --tw-backdrop-contrast: ;
+    --tw-backdrop-grayscale: ;
+    --tw-backdrop-hue-rotate: ;
+    --tw-backdrop-invert: ;
+    --tw-backdrop-opacity: ;
+    --tw-backdrop-saturate: ;
+    --tw-backdrop-sepia: ;
+  }
+`
+
 function run(config, plugin = tailwind) {
@@ -79,44 +128,48 @@ let { currentTestName } = expect.getState()
   return run(config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      .prose {
-        color: var(--tw-prose-body);
-        max-width: 65ch;
-      }
-      .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
-        color: var(--tw-prose-lead);
-      }
-      .prose :where(strong):not(:where([class~='not-prose'] *)) {
-        color: var(--tw-prose-bold);
-        font-weight: 600;
-      }
-      .prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
-        list-style-type: upper-alpha;
-      }
-      .prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before {
-        content: open-quote;
-      }
-      .prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
-        content: close-quote;
-      }
-      .prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
-        font-weight: 700;
-      }
-      .prose :where(figure > *):not(:where([class~='not-prose'] *)) {
-        margin: 0;
-      }
-      .prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
-        font-weight: 400;
-        color: var(--tw-prose-counters);
-      }
-      .prose > :where(ul > li p):not(:where([class~='not-prose'] *)) {
-        margin-top: 16px;
-        margin-bottom: 16px;
-      }
-      .prose :where(code):not(:where([class~='not-prose'] *))::before {
-        content: '`';
-      }
-      .prose :where(code):not(:where([class~='not-prose'] *))::after {
-        content: '`';
-      }
-    `)
+    expect(result.css).toMatchFormattedCss(
+      css`
+        ${defaults}
+
+        .prose {
+          color: var(--tw-prose-body);
+          max-width: 65ch;
+        }
+        .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+          color: var(--tw-prose-lead);
+        }
+        .prose :where(strong):not(:where([class~='not-prose'] *)) {
+          color: var(--tw-prose-bold);
+          font-weight: 600;
+        }
+        .prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
+          list-style-type: upper-alpha;
+        }
+        .prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before {
+          content: open-quote;
+        }
+        .prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
+          content: close-quote;
+        }
+        .prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
+          font-weight: 700;
+        }
+        .prose :where(figure > *):not(:where([class~='not-prose'] *)) {
+          margin: 0;
+        }
+        .prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
+          font-weight: 400;
+          color: var(--tw-prose-counters);
+        }
+        .prose :where(.prose > ul > li p):not(:where([class~='not-prose'] *)) {
+          margin-top: 16px;
+          margin-bottom: 16px;
+        }
+        .prose :where(code):not(:where([class~='not-prose'] *))::before {
+          content: '`';
+        }
+        .prose :where(code):not(:where([class~='not-prose'] *))::after {
+          content: '`';
+        }
+      `
+    )
   })
@@ -209,70 +262,74 @@ })
   return run(config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      .prose {
-        color: var(--tw-prose-body);
-        max-width: 65ch;
-      }
-      .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
-        color: var(--tw-prose-lead);
-      }
-      .prose :where(strong):not(:where([class~='not-prose'] *)) {
-        color: var(--tw-prose-bold);
-        font-weight: 600;
-      }
-      .prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
-        list-style-type: upper-alpha;
-      }
-      .prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before {
-        content: open-quote;
-      }
-      .prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
-        content: close-quote;
-      }
-      .prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
-        font-weight: 700;
-      }
-      .prose :where(figure > *):not(:where([class~='not-prose'] *)) {
-        margin: 0;
-      }
-      .prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
-        font-weight: 400;
-        color: var(--tw-prose-counters);
-      }
-      .prose :where(code):not(:where([class~='not-prose'] *))::before {
-        content: '`';
-      }
-      .prose :where(code):not(:where([class~='not-prose'] *))::after {
-        content: '`';
-      }
-      .prose-lg {
-        font-size: 18px;
-        line-height: 1.75;
-      }
-      .prose-lg :where(p):not(:where([class~='not-prose'] *)) {
-        margin-top: 24px;
-        margin-bottom: 24px;
-      }
-      .prose-lg :where([class~='lead']):not(:where([class~='not-prose'] *)) {
-        font-size: 22px;
-      }
-      .prose-lg :where(blockquote):not(:where([class~='not-prose'] *)) {
-        margin-top: 40px;
-        margin-bottom: 40px;
-      }
-      .prose-lg :where(h1):not(:where([class~='not-prose'] *)) {
-        font-size: 48px;
-        margin-top: 0;
-        margin-bottom: 40px;
-      }
-      .prose-lg :where(h2):not(:where([class~='not-prose'] *)) {
-        font-size: 30px;
-        margin-top: 56px;
-        margin-bottom: 32px;
-      }
-      .prose-lg :where(h3):not(:where([class~='not-prose'] *)) {
-        font-size: 24px;
-        margin-top: 40px;
-        margin-bottom: 16px;
-      }
-    `)
+    expect(result.css).toMatchFormattedCss(
+      css`
+        ${defaults}
+
+        .prose {
+          color: var(--tw-prose-body);
+          max-width: 65ch;
+        }
+        .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+          color: var(--tw-prose-lead);
+        }
+        .prose :where(strong):not(:where([class~='not-prose'] *)) {
+          color: var(--tw-prose-bold);
+          font-weight: 600;
+        }
+        .prose :where(ol[type='A']):not(:where([class~='not-prose'] *)) {
+          list-style-type: upper-alpha;
+        }
+        .prose :where(blockquote p:first-of-type):not(:where([class~='not-prose'] *))::before {
+          content: open-quote;
+        }
+        .prose :where(blockquote p:last-of-type):not(:where([class~='not-prose'] *))::after {
+          content: close-quote;
+        }
+        .prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
+          font-weight: 700;
+        }
+        .prose :where(figure > *):not(:where([class~='not-prose'] *)) {
+          margin: 0;
+        }
+        .prose :where(ol > li):not(:where([class~='not-prose'] *))::marker {
+          font-weight: 400;
+          color: var(--tw-prose-counters);
+        }
+        .prose :where(code):not(:where([class~='not-prose'] *))::before {
+          content: '`';
+        }
+        .prose :where(code):not(:where([class~='not-prose'] *))::after {
+          content: '`';
+        }
+        .prose-lg {
+          font-size: 18px;
+          line-height: 1.75;
+        }
+        .prose-lg :where(p):not(:where([class~='not-prose'] *)) {
+          margin-top: 24px;
+          margin-bottom: 24px;
+        }
+        .prose-lg :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+          font-size: 22px;
+        }
+        .prose-lg :where(blockquote):not(:where([class~='not-prose'] *)) {
+          margin-top: 40px;
+          margin-bottom: 40px;
+        }
+        .prose-lg :where(h1):not(:where([class~='not-prose'] *)) {
+          font-size: 48px;
+          margin-top: 0;
+          margin-bottom: 40px;
+        }
+        .prose-lg :where(h2):not(:where([class~='not-prose'] *)) {
+          font-size: 30px;
+          margin-top: 56px;
+          margin-bottom: 32px;
+        }
+        .prose-lg :where(h3):not(:where([class~='not-prose'] *)) {
+          font-size: 24px;
+          margin-top: 40px;
+          margin-bottom: 16px;
+        }
+      `
+    )
   })
@@ -284,3 +341,3 @@ })
     plugins: [typographyPlugin({ target: 'legacy' })],
-    content: [{ raw: html`<div class="prose"></div>` }],
+    content: [{ raw: html`<div class="prose prose-h1:text-center prose-headings:text-ellipsis"></div>` }],
     theme: {
@@ -333,40 +390,68 @@ typography: {
   return run(config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      .prose {
-        color: var(--tw-prose-body);
-        max-width: 65ch;
-      }
-      .prose [class~='lead'] {
-        color: var(--tw-prose-lead);
-      }
-      .prose strong {
-        color: var(--tw-prose-bold);
-        font-weight: 600;
-      }
-      .prose ol[type='A'] {
-        list-style-type: upper-alpha;
-      }
-      .prose blockquote p:first-of-type::before {
-        content: open-quote;
-      }
-      .prose blockquote p:last-of-type::after {
-        content: close-quote;
-      }
-      .prose h4 strong {
-        font-weight: 700;
-      }
-      .prose figure > * {
-        margin: 0;
-      }
-      .prose ol > li::marker {
-        font-weight: 400;
-        color: var(--tw-prose-counters);
-      }
-      .prose code::before {
-        content: '&#96;';
-      }
-      .prose code::after {
-        content: '&#96;';
-      }
-    `)
+    expect(result.css).toMatchFormattedCss(
+      css`
+        ${defaults}
+
+        .prose {
+          color: var(--tw-prose-body);
+          max-width: 65ch;
+        }
+        .prose [class~='lead'] {
+          color: var(--tw-prose-lead);
+        }
+        .prose strong {
+          color: var(--tw-prose-bold);
+          font-weight: 600;
+        }
+        .prose ol[type='A'] {
+          list-style-type: upper-alpha;
+        }
+        .prose blockquote p:first-of-type::before {
+          content: open-quote;
+        }
+        .prose blockquote p:last-of-type::after {
+          content: close-quote;
+        }
+        .prose h4 strong {
+          font-weight: 700;
+        }
+        .prose figure > * {
+          margin: 0;
+        }
+        .prose ol > li::marker {
+          font-weight: 400;
+          color: var(--tw-prose-counters);
+        }
+        .prose code::before {
+          content: '&#96;';
+        }
+        .prose code::after {
+          content: '&#96;';
+        }
+        .prose-headings\:text-ellipsis h1 {
+          text-overflow: ellipsis;
+        }
+        .prose-headings\:text-ellipsis h2 {
+          text-overflow: ellipsis;
+        }
+        .prose-headings\:text-ellipsis h3 {
+          text-overflow: ellipsis;
+        }
+        .prose-headings\:text-ellipsis h4 {
+          text-overflow: ellipsis;
+        }
+        .prose-headings\:text-ellipsis h5 {
+          text-overflow: ellipsis;
+        }
+        .prose-headings\:text-ellipsis h6 {
+          text-overflow: ellipsis;
+        }
+        .prose-headings\:text-ellipsis th {
+          text-overflow: ellipsis;
+        }
+        .prose-h1\:text-center h1 {
+          text-align: center;
+        }
+      `
+    )
   })
@@ -426,40 +511,45 @@ })
   return run(config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      .markdown {
-        color: var(--tw-prose-body);
-        max-width: 65ch;
-      }
-      .markdown :where([class~='lead']):not(:where([class~='not-markdown'] *)) {
-        color: var(--tw-prose-lead);
-      }
-      .markdown :where(strong):not(:where([class~='not-markdown'] *)) {
-        color: var(--tw-prose-bold);
-        font-weight: 600;
-      }
-      .markdown :where(ol[type='A']):not(:where([class~='not-markdown'] *)) {
-        list-style-type: upper-alpha;
-      }
-      .markdown :where(blockquote p:first-of-type):not(:where([class~='not-markdown'] *))::before {
-        content: open-quote;
-      }
-      .markdown :where(blockquote p:last-of-type):not(:where([class~='not-markdown'] *))::after {
-        content: close-quote;
-      }
-      .markdown :where(h4 strong):not(:where([class~='not-markdown'] *)) {
-        font-weight: 700;
-      }
-      .markdown :where(figure > *):not(:where([class~='not-markdown'] *)) {
-        margin: 0;
-      }
-      .markdown :where(ol > li):not(:where([class~='not-markdown'] *))::marker {
-        font-weight: 400;
-        color: var(--tw-prose-counters);
-      }
-      .markdown :where(code):not(:where([class~='not-markdown'] *))::before {
-        content: '&#96;';
-      }
-      .markdown :where(code):not(:where([class~='not-markdown'] *))::after {
-        content: '&#96;';
-      }
-    `)
+    expect(result.css).toMatchFormattedCss(
+      css`
+        ${defaults}
+
+        .markdown {
+          color: var(--tw-prose-body);
+          max-width: 65ch;
+        }
+        .markdown :where([class~='lead']):not(:where([class~='not-markdown'] *)) {
+          color: var(--tw-prose-lead);
+        }
+        .markdown :where(strong):not(:where([class~='not-markdown'] *)) {
+          color: var(--tw-prose-bold);
+          font-weight: 600;
+        }
+        .markdown :where(ol[type='A']):not(:where([class~='not-markdown'] *)) {
+          list-style-type: upper-alpha;
+        }
+        .markdown
+          :where(blockquote p:first-of-type):not(:where([class~='not-markdown'] *))::before {
+          content: open-quote;
+        }
+        .markdown :where(blockquote p:last-of-type):not(:where([class~='not-markdown'] *))::after {
+          content: close-quote;
+        }
+        .markdown :where(h4 strong):not(:where([class~='not-markdown'] *)) {
+          font-weight: 700;
+        }
+        .markdown :where(figure > *):not(:where([class~='not-markdown'] *)) {
+          margin: 0;
+        }
+        .markdown :where(ol > li):not(:where([class~='not-markdown'] *))::marker {
+          font-weight: 400;
+          color: var(--tw-prose-counters);
+        }
+        .markdown :where(code):not(:where([class~='not-markdown'] *))::before {
+          content: '&#96;';
+        }
+        .markdown :where(code):not(:where([class~='not-markdown'] *))::after {
+          content: '&#96;';
+        }
+      `
+    )
   })
@@ -528,110 +618,110 @@ })
   return run(config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      :is(:where(hr):not(:where([class~='not-prose'] *))) {
-        --tw-border-opacity: 1;
-        border-color: rgb(229 231 235 / var(--tw-border-opacity));
-      }
-      .prose {
-        color: var(--tw-prose-body);
-      }
-      .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
-        color: var(--tw-prose-lead);
-      }
-      .prose :where(strong):not(:where([class~='not-prose'] *)) {
-        color: var(--tw-prose-bold);
-        font-weight: 600;
-      }
-      .prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
-        font-weight: 700;
-      }
-      .prose-headings\:underline
-        :is(:where(h1, h2, h3, h4, th):not(:where([class~='not-prose'] *))) {
-        text-decoration: underline;
-      }
-      .prose-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-prose'] *))) {
-        font-style: italic;
-      }
-      .prose-h1\:text-3xl :is(:where(h1):not(:where([class~='not-prose'] *))) {
-        font-size: 1.875rem;
-        line-height: 2.25rem;
-      }
-      .prose-h2\:text-2xl :is(:where(h2):not(:where([class~='not-prose'] *))) {
-        font-size: 1.5rem;
-        line-height: 2rem;
-      }
-      .prose-h3\:text-xl :is(:where(h3):not(:where([class~='not-prose'] *))) {
-        font-size: 1.25rem;
-        line-height: 1.75rem;
-      }
-      .prose-h4\:text-lg :is(:where(h4):not(:where([class~='not-prose'] *))) {
-        font-size: 1.125rem;
-        line-height: 1.75rem;
-      }
-      .prose-p\:text-gray-700 :is(:where(p):not(:where([class~='not-prose'] *))) {
-        --tw-text-opacity: 1;
-        color: rgb(55 65 81 / var(--tw-text-opacity));
-      }
-      .prose-a\:font-bold :is(:where(a):not(:where([class~='not-prose'] *))) {
-        font-weight: 700;
-      }
-      .prose-blockquote\:italic :is(:where(blockquote):not(:where([class~='not-prose'] *))) {
-        font-style: italic;
-      }
-      .prose-figure\:mx-auto :is(:where(figure):not(:where([class~='not-prose'] *))) {
-        margin-left: auto;
-        margin-right: auto;
-      }
-      .prose-figcaption\:opacity-75 :is(:where(figcaption):not(:where([class~='not-prose'] *))) {
-        opacity: 0.75;
-      }
-      .prose-strong\:font-medium :is(:where(strong):not(:where([class~='not-prose'] *))) {
-        font-weight: 500;
-      }
-      .prose-em\:italic :is(:where(em):not(:where([class~='not-prose'] *))) {
-        font-style: italic;
-      }
-      .prose-code\:font-mono :is(:where(code):not(:where([class~='not-prose'] *))) {
-        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-          'Courier New', monospace;
-      }
-      .prose-pre\:font-mono :is(:where(pre):not(:where([class~='not-prose'] *))) {
-        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-          'Courier New', monospace;
-      }
-      .prose-ol\:pl-6 :is(:where(ol):not(:where([class~='not-prose'] *))) {
-        padding-left: 1.5rem;
-      }
-      .prose-ul\:pl-8 :is(:where(ul):not(:where([class~='not-prose'] *))) {
-        padding-left: 2rem;
-      }
-      .prose-li\:my-4 :is(:where(li):not(:where([class~='not-prose'] *))) {
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-      }
-      .prose-table\:my-8 :is(:where(table):not(:where([class~='not-prose'] *))) {
-        margin-top: 2rem;
-        margin-bottom: 2rem;
-      }
-      .prose-thead\:border-red-300 :is(:where(thead):not(:where([class~='not-prose'] *))) {
-        --tw-border-opacity: 1;
-        border-color: rgb(252 165 165 / var(--tw-border-opacity));
-      }
-      .prose-tr\:border-red-200 :is(:where(tr):not(:where([class~='not-prose'] *))) {
-        --tw-border-opacity: 1;
-        border-color: rgb(254 202 202 / var(--tw-border-opacity));
-      }
-      .prose-th\:text-left :is(:where(th):not(:where([class~='not-prose'] *))) {
-        text-align: left;
-      }
-      .prose-img\:rounded-lg :is(:where(img):not(:where([class~='not-prose'] *))) {
-        border-radius: 0.5rem;
-      }
-      .prose-video\:my-12 :is(:where(video):not(:where([class~='not-prose'] *))) {
-        margin-top: 3rem;
-        margin-bottom: 3rem;
-      }
-      .prose-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-prose'] *))) {
-        border-top-width: 2px;
-      }
-    `)
+    expect(result.css).toMatchFormattedCss(
+      css`
+        ${defaults}
+
+        .prose {
+          color: var(--tw-prose-body);
+        }
+        .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+          color: var(--tw-prose-lead);
+        }
+        .prose :where(strong):not(:where([class~='not-prose'] *)) {
+          color: var(--tw-prose-bold);
+          font-weight: 600;
+        }
+        .prose :where(h4 strong):not(:where([class~='not-prose'] *)) {
+          font-weight: 700;
+        }
+        .prose-headings\:underline
+          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-prose'] *))) {
+          text-decoration-line: underline;
+        }
+        .prose-h1\:text-3xl :is(:where(h1):not(:where([class~='not-prose'] *))) {
+          font-size: 1.875rem;
+          line-height: 2.25rem;
+        }
+        .prose-h2\:text-2xl :is(:where(h2):not(:where([class~='not-prose'] *))) {
+          font-size: 1.5rem;
+          line-height: 2rem;
+        }
+        .prose-h3\:text-xl :is(:where(h3):not(:where([class~='not-prose'] *))) {
+          font-size: 1.25rem;
+          line-height: 1.75rem;
+        }
+        .prose-h4\:text-lg :is(:where(h4):not(:where([class~='not-prose'] *))) {
+          font-size: 1.125rem;
+          line-height: 1.75rem;
+        }
+        .prose-p\:text-gray-700 :is(:where(p):not(:where([class~='not-prose'] *))) {
+          --tw-text-opacity: 1;
+          color: rgb(55 65 81 / var(--tw-text-opacity));
+        }
+        .prose-a\:font-bold :is(:where(a):not(:where([class~='not-prose'] *))) {
+          font-weight: 700;
+        }
+        .prose-blockquote\:italic :is(:where(blockquote):not(:where([class~='not-prose'] *))) {
+          font-style: italic;
+        }
+        .prose-figure\:mx-auto :is(:where(figure):not(:where([class~='not-prose'] *))) {
+          margin-left: auto;
+          margin-right: auto;
+        }
+        .prose-figcaption\:opacity-75 :is(:where(figcaption):not(:where([class~='not-prose'] *))) {
+          opacity: 0.75;
+        }
+        .prose-strong\:font-medium :is(:where(strong):not(:where([class~='not-prose'] *))) {
+          font-weight: 500;
+        }
+        .prose-em\:italic :is(:where(em):not(:where([class~='not-prose'] *))) {
+          font-style: italic;
+        }
+        .prose-code\:font-mono :is(:where(code):not(:where([class~='not-prose'] *))) {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+            'Courier New', monospace;
+        }
+        .prose-pre\:font-mono :is(:where(pre):not(:where([class~='not-prose'] *))) {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+            'Courier New', monospace;
+        }
+        .prose-ol\:pl-6 :is(:where(ol):not(:where([class~='not-prose'] *))) {
+          padding-left: 1.5rem;
+        }
+        .prose-ul\:pl-8 :is(:where(ul):not(:where([class~='not-prose'] *))) {
+          padding-left: 2rem;
+        }
+        .prose-li\:my-4 :is(:where(li):not(:where([class~='not-prose'] *))) {
+          margin-top: 1rem;
+          margin-bottom: 1rem;
+        }
+        .prose-table\:my-8 :is(:where(table):not(:where([class~='not-prose'] *))) {
+          margin-top: 2rem;
+          margin-bottom: 2rem;
+        }
+        .prose-thead\:border-red-300 :is(:where(thead):not(:where([class~='not-prose'] *))) {
+          --tw-border-opacity: 1;
+          border-color: rgb(252 165 165 / var(--tw-border-opacity));
+        }
+        .prose-tr\:border-red-200 :is(:where(tr):not(:where([class~='not-prose'] *))) {
+          --tw-border-opacity: 1;
+          border-color: rgb(254 202 202 / var(--tw-border-opacity));
+        }
+        .prose-th\:text-left :is(:where(th):not(:where([class~='not-prose'] *))) {
+          text-align: left;
+        }
+        .prose-img\:rounded-lg :is(:where(img):not(:where([class~='not-prose'] *))) {
+          border-radius: 0.5rem;
+        }
+        .prose-video\:my-12 :is(:where(video):not(:where([class~='not-prose'] *))) {
+          margin-top: 3rem;
+          margin-bottom: 3rem;
+        }
+        .prose-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-prose'] *))) {
+          border-top-width: 2px;
+        }
+        .prose-lead\:italic :is(:where([class~="lead"]):not(:where([class~="not-prose"] *))) {
+          font-style: italic;
+        }
+      `
+    )
   })
@@ -701,111 +791,112 @@ })
   return run(config).then((result) => {
-    expect(result.css).toMatchFormattedCss(css`
-      :is(:where(hr):not(:where([class~='not-markdown'] *))) {
-        --tw-border-opacity: 1;
-        border-color: rgb(229 231 235 / var(--tw-border-opacity));
-      }
-      .markdown {
-        color: var(--tw-prose-body);
-      }
-      .markdown :where([class~='lead']):not(:where([class~='not-markdown'] *)) {
-        color: var(--tw-prose-lead);
-      }
-      .markdown :where(strong):not(:where([class~='not-markdown'] *)) {
-        color: var(--tw-prose-bold);
-        font-weight: 600;
-      }
-      .markdown :where(h4 strong):not(:where([class~='not-markdown'] *)) {
-        font-weight: 700;
-      }
-      .markdown-headings\:underline
-        :is(:where(h1, h2, h3, h4, th):not(:where([class~='not-markdown'] *))) {
-        text-decoration: underline;
-      }
-      .markdown-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-markdown'] *))) {
-        font-style: italic;
-      }
-      .markdown-h1\:text-3xl :is(:where(h1):not(:where([class~='not-markdown'] *))) {
-        font-size: 1.875rem;
-        line-height: 2.25rem;
-      }
-      .markdown-h2\:text-2xl :is(:where(h2):not(:where([class~='not-markdown'] *))) {
-        font-size: 1.5rem;
-        line-height: 2rem;
-      }
-      .markdown-h3\:text-xl :is(:where(h3):not(:where([class~='not-markdown'] *))) {
-        font-size: 1.25rem;
-        line-height: 1.75rem;
-      }
-      .markdown-h4\:text-lg :is(:where(h4):not(:where([class~='not-markdown'] *))) {
-        font-size: 1.125rem;
-        line-height: 1.75rem;
-      }
-      .markdown-p\:text-gray-700 :is(:where(p):not(:where([class~='not-markdown'] *))) {
-        --tw-text-opacity: 1;
-        color: rgb(55 65 81 / var(--tw-text-opacity));
-      }
-      .markdown-a\:font-bold :is(:where(a):not(:where([class~='not-markdown'] *))) {
-        font-weight: 700;
-      }
-      .markdown-blockquote\:italic :is(:where(blockquote):not(:where([class~='not-markdown'] *))) {
-        font-style: italic;
-      }
-      .markdown-figure\:mx-auto :is(:where(figure):not(:where([class~='not-markdown'] *))) {
-        margin-left: auto;
-        margin-right: auto;
-      }
-      .markdown-figcaption\:opacity-75
-        :is(:where(figcaption):not(:where([class~='not-markdown'] *))) {
-        opacity: 0.75;
-      }
-      .markdown-strong\:font-medium :is(:where(strong):not(:where([class~='not-markdown'] *))) {
-        font-weight: 500;
-      }
-      .markdown-em\:italic :is(:where(em):not(:where([class~='not-markdown'] *))) {
-        font-style: italic;
-      }
-      .markdown-code\:font-mono :is(:where(code):not(:where([class~='not-markdown'] *))) {
-        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-          'Courier New', monospace;
-      }
-      .markdown-pre\:font-mono :is(:where(pre):not(:where([class~='not-markdown'] *))) {
-        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
-          'Courier New', monospace;
-      }
-      .markdown-ol\:pl-6 :is(:where(ol):not(:where([class~='not-markdown'] *))) {
-        padding-left: 1.5rem;
-      }
-      .markdown-ul\:pl-8 :is(:where(ul):not(:where([class~='not-markdown'] *))) {
-        padding-left: 2rem;
-      }
-      .markdown-li\:my-4 :is(:where(li):not(:where([class~='not-markdown'] *))) {
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-      }
-      .markdown-table\:my-8 :is(:where(table):not(:where([class~='not-markdown'] *))) {
-        margin-top: 2rem;
-        margin-bottom: 2rem;
-      }
-      .markdown-thead\:border-red-300 :is(:where(thead):not(:where([class~='not-markdown'] *))) {
-        --tw-border-opacity: 1;
-        border-color: rgb(252 165 165 / var(--tw-border-opacity));
-      }
-      .markdown-tr\:border-red-200 :is(:where(tr):not(:where([class~='not-markdown'] *))) {
-        --tw-border-opacity: 1;
-        border-color: rgb(254 202 202 / var(--tw-border-opacity));
-      }
-      .markdown-th\:text-left :is(:where(th):not(:where([class~='not-markdown'] *))) {
-        text-align: left;
-      }
-      .markdown-img\:rounded-lg :is(:where(img):not(:where([class~='not-markdown'] *))) {
-        border-radius: 0.5rem;
-      }
-      .markdown-video\:my-12 :is(:where(video):not(:where([class~='not-markdown'] *))) {
-        margin-top: 3rem;
-        margin-bottom: 3rem;
-      }
-      .markdown-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-markdown'] *))) {
-        border-top-width: 2px;
-      }
-    `)
+    expect(result.css).toMatchFormattedCss(
+      css`
+        ${defaults}
+
+        .markdown {
+          color: var(--tw-prose-body);
+        }
+        .markdown :where([class~='lead']):not(:where([class~='not-markdown'] *)) {
+          color: var(--tw-prose-lead);
+        }
+        .markdown :where(strong):not(:where([class~='not-markdown'] *)) {
+          color: var(--tw-prose-bold);
+          font-weight: 600;
+        }
+        .markdown :where(h4 strong):not(:where([class~='not-markdown'] *)) {
+          font-weight: 700;
+        }
+        .markdown-headings\:underline
+          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-markdown'] *))) {
+          text-decoration-line: underline;
+        }
+        .markdown-h1\:text-3xl :is(:where(h1):not(:where([class~='not-markdown'] *))) {
+          font-size: 1.875rem;
+          line-height: 2.25rem;
+        }
+        .markdown-h2\:text-2xl :is(:where(h2):not(:where([class~='not-markdown'] *))) {
+          font-size: 1.5rem;
+          line-height: 2rem;
+        }
+        .markdown-h3\:text-xl :is(:where(h3):not(:where([class~='not-markdown'] *))) {
+          font-size: 1.25rem;
+          line-height: 1.75rem;
+        }
+        .markdown-h4\:text-lg :is(:where(h4):not(:where([class~='not-markdown'] *))) {
+          font-size: 1.125rem;
+          line-height: 1.75rem;
+        }
+        .markdown-p\:text-gray-700 :is(:where(p):not(:where([class~='not-markdown'] *))) {
+          --tw-text-opacity: 1;
+          color: rgb(55 65 81 / var(--tw-text-opacity));
+        }
+        .markdown-a\:font-bold :is(:where(a):not(:where([class~='not-markdown'] *))) {
+          font-weight: 700;
+        }
+        .markdown-blockquote\:italic
+          :is(:where(blockquote):not(:where([class~='not-markdown'] *))) {
+          font-style: italic;
+        }
+        .markdown-figure\:mx-auto :is(:where(figure):not(:where([class~='not-markdown'] *))) {
+          margin-left: auto;
+          margin-right: auto;
+        }
+        .markdown-figcaption\:opacity-75
+          :is(:where(figcaption):not(:where([class~='not-markdown'] *))) {
+          opacity: 0.75;
+        }
+        .markdown-strong\:font-medium :is(:where(strong):not(:where([class~='not-markdown'] *))) {
+          font-weight: 500;
+        }
+        .markdown-em\:italic :is(:where(em):not(:where([class~='not-markdown'] *))) {
+          font-style: italic;
+        }
+        .markdown-code\:font-mono :is(:where(code):not(:where([class~='not-markdown'] *))) {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+            'Courier New', monospace;
+        }
+        .markdown-pre\:font-mono :is(:where(pre):not(:where([class~='not-markdown'] *))) {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+            'Courier New', monospace;
+        }
+        .markdown-ol\:pl-6 :is(:where(ol):not(:where([class~='not-markdown'] *))) {
+          padding-left: 1.5rem;
+        }
+        .markdown-ul\:pl-8 :is(:where(ul):not(:where([class~='not-markdown'] *))) {
+          padding-left: 2rem;
+        }
+        .markdown-li\:my-4 :is(:where(li):not(:where([class~='not-markdown'] *))) {
+          margin-top: 1rem;
+          margin-bottom: 1rem;
+        }
+        .markdown-table\:my-8 :is(:where(table):not(:where([class~='not-markdown'] *))) {
+          margin-top: 2rem;
+          margin-bottom: 2rem;
+        }
+        .markdown-thead\:border-red-300 :is(:where(thead):not(:where([class~='not-markdown'] *))) {
+          --tw-border-opacity: 1;
+          border-color: rgb(252 165 165 / var(--tw-border-opacity));
+        }
+        .markdown-tr\:border-red-200 :is(:where(tr):not(:where([class~='not-markdown'] *))) {
+          --tw-border-opacity: 1;
+          border-color: rgb(254 202 202 / var(--tw-border-opacity));
+        }
+        .markdown-th\:text-left :is(:where(th):not(:where([class~='not-markdown'] *))) {
+          text-align: left;
+        }
+        .markdown-img\:rounded-lg :is(:where(img):not(:where([class~='not-markdown'] *))) {
+          border-radius: 0.5rem;
+        }
+        .markdown-video\:my-12 :is(:where(video):not(:where([class~='not-markdown'] *))) {
+          margin-top: 3rem;
+          margin-bottom: 3rem;
+        }
+        .markdown-hr\:border-t-2 :is(:where(hr):not(:where([class~='not-markdown'] *))) {
+          border-top-width: 2px;
+        }
+        .markdown-lead\:italic :is(:where([class~="lead"]):not(:where([class~="not-markdown"] *))) {
+          font-style: italic;
+        }
+      `
+    )
   })
@@ -833,8 +924,12 @@ })
   return run(config).then((result) => {
-    // TODO: Fix this test. It should list both properties but there's a bug in tailwind that's overriding them.
-    expect(result.css).toMatchFormattedCss(css`
-      .prose {
-        text-align: match-parent;
-      }
-    `)
+    expect(result.css).toMatchFormattedCss(
+      css`
+        ${defaults}
+
+        .prose {
+          text-align: -webkit-match-parent;
+          text-align: match-parent;
+        }
+      `
+    )
   })
@@ -893,1 +988,25 @@ })
 })
+
+it('should be possible to specify custom h5 and h6 styles', () => {
+  let config = {
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="prose prose-h5:text-sm prose-h6:text-xl"></div>`,
+      },
+    ],
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .prose-h5\:text-sm :is(:where(h5):not(:where([class~='not-prose'] *))) {
+        font-size: 0.875rem;
+        line-height: 1.25rem;
+      }
+      .prose-h6\:text-xl :is(:where(h6):not(:where([class~='not-prose'] *))) {
+        font-size: 1.25rem;
+        line-height: 1.75rem;
+      }
+    `)
+  })
+})

src/styles.js

@@ -99,2 +99,3 @@ const colors = require('tailwindcss/colors')
           marginBottom: em(16, 14),
+          paddingLeft: em(22, 14),
         },
@@ -104,2 +105,3 @@ ul: {
           marginBottom: em(16, 14),
+          paddingLeft: em(22, 14),
         },
@@ -110,11 +112,5 @@ li: {
         },
-        ol: {
-          paddingLeft: em(22, 14),
-        },
         'ol > li': {
           paddingLeft: em(6, 14),
         },
-        ul: {
-          paddingLeft: em(22, 14),
-        },
         'ul > li': {
@@ -174,3 +170,3 @@ paddingLeft: em(6, 14),
         },
-        'tbody td': {
+        'tbody td, tfoot td': {
           paddingTop: em(8, 12),
@@ -181,6 +177,6 @@ paddingRight: em(12, 12),
         },
-        'tbody td:first-child': {
+        'tbody td:first-child, tfoot td:first-child': {
           paddingLeft: '0',
         },
-        'tbody td:last-child': {
+        'tbody td:last-child, tfoot td:last-child': {
           paddingRight: '0',
@@ -286,2 +282,3 @@ },
           marginBottom: em(20, 16),
+          paddingLeft: em(26, 16),
         },
@@ -291,2 +288,3 @@ ul: {
           marginBottom: em(20, 16),
+          paddingLeft: em(26, 16),
         },
@@ -297,11 +295,5 @@ li: {
         },
-        ol: {
-          paddingLeft: em(26, 16),
-        },
         'ol > li': {
           paddingLeft: em(6, 16),
         },
-        ul: {
-          paddingLeft: em(26, 16),
-        },
         'ul > li': {
@@ -361,3 +353,3 @@ paddingLeft: em(6, 16),
         },
-        'tbody td': {
+        'tbody td, tfoot td': {
           paddingTop: em(8, 14),
@@ -368,6 +360,6 @@ paddingRight: em(8, 14),
         },
-        'tbody td:first-child': {
+        'tbody td:first-child, tfoot td:first-child': {
           paddingLeft: '0',
         },
-        'tbody td:last-child': {
+        'tbody td:last-child, tfoot td:last-child': {
           paddingRight: '0',
@@ -473,2 +465,3 @@ },
           marginBottom: em(24, 18),
+          paddingLeft: em(28, 18),
         },
@@ -478,2 +471,3 @@ ul: {
           marginBottom: em(24, 18),
+          paddingLeft: em(28, 18),
         },
@@ -484,11 +478,5 @@ li: {
         },
-        ol: {
-          paddingLeft: em(28, 18),
-        },
         'ol > li': {
           paddingLeft: em(8, 18),
         },
-        ul: {
-          paddingLeft: em(28, 18),
-        },
         'ul > li': {
@@ -548,3 +536,3 @@ paddingLeft: em(8, 18),
         },
-        'tbody td': {
+        'tbody td, tfoot td': {
           paddingTop: em(12, 16),
@@ -555,6 +543,6 @@ paddingRight: em(12, 16),
         },
-        'tbody td:first-child': {
+        'tbody td:first-child, tfoot td:first-child': {
           paddingLeft: '0',
         },
-        'tbody td:last-child': {
+        'tbody td:last-child, tfoot td:last-child': {
           paddingRight: '0',
@@ -660,2 +648,3 @@ },
           marginBottom: em(24, 20),
+          paddingLeft: em(32, 20),
         },
@@ -665,2 +654,3 @@ ul: {
           marginBottom: em(24, 20),
+          paddingLeft: em(32, 20),
         },
@@ -671,11 +661,5 @@ li: {
         },
-        ol: {
-          paddingLeft: em(32, 20),
-        },
         'ol > li': {
           paddingLeft: em(8, 20),
         },
-        ul: {
-          paddingLeft: em(32, 20),
-        },
         'ul > li': {
@@ -735,3 +719,3 @@ paddingLeft: em(8, 20),
         },
-        'tbody td': {
+        'tbody td, tfoot td': {
           paddingTop: em(16, 18),
@@ -742,6 +726,6 @@ paddingRight: em(12, 18),
         },
-        'tbody td:first-child': {
+        'tbody td:first-child, tfoot td:first-child': {
           paddingLeft: '0',
         },
-        'tbody td:last-child': {
+        'tbody td:last-child, tfoot td:last-child': {
           paddingRight: '0',
@@ -847,2 +831,3 @@ },
           marginBottom: em(32, 24),
+          paddingLeft: em(38, 24),
         },
@@ -852,2 +837,3 @@ ul: {
           marginBottom: em(32, 24),
+          paddingLeft: em(38, 24),
         },
@@ -858,11 +844,5 @@ li: {
         },
-        ol: {
-          paddingLeft: em(38, 24),
-        },
         'ol > li': {
           paddingLeft: em(10, 24),
         },
-        ul: {
-          paddingLeft: em(38, 24),
-        },
         'ul > li': {
@@ -922,3 +902,3 @@ paddingLeft: em(10, 24),
         },
-        'tbody td': {
+        'tbody td, tfoot td': {
           paddingTop: em(16, 20),
@@ -929,6 +909,6 @@ paddingRight: em(12, 20),
         },
-        'tbody td:first-child': {
+        'tbody td:first-child, tfoot td:first-child': {
           paddingLeft: '0',
         },
-        'tbody td:last-child': {
+        'tbody td:last-child, tfoot td:last-child': {
           paddingRight: '0',
@@ -1383,3 +1363,4 @@ },
         },
-        // TODO: Figure out how to not need this, it's a merging issue
+        // TODO: Figure out how to not need these, it's a merging issue
+        img: {},
         'figure > *': {},
@@ -1451,2 +1432,9 @@ figcaption: {
         },
+        tfoot: {
+          borderTopWidth: '1px',
+          borderTopColor: 'var(--tw-prose-th-borders)',
+        },
+        'tfoot td': {
+          verticalAlign: 'top',
+        },
       },
@@ -1453,0 +1441,0 @@ defaultModifiers.gray.css,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

76447

increased by4.56%

Lines of code

2499

increased by4.21%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes