@tailwindcss/typography - npm Package Compare versions

Comparing version 0.0.0-insiders.289b2ba to 0.0.0-insiders.2cca6ca

CHANGELOG.md

@@ -10,7 +10,46 @@ # Changelog
 
+- Nothing yet!
+
+## [0.5.9] - 2023-01-10
+
+### Fixed
+
+- Ensure `p` styles are inserted before `.lead` styles ([#294](https://github.com/tailwindlabs/tailwindcss-typography/pull/294))
+
+## [0.5.8] - 2022-11-07
+
+### Fixed
+
+- Fix selector when using a non-default class (e.g. `prose-sm`) ([#289](https://github.com/tailwindlabs/tailwindcss-typography/pull/289))
+
+## [0.5.7] - 2022-09-02
+
+### Fixed
+
+- Update TypeScript types ([#284](https://github.com/tailwindlabs/tailwindcss-typography/pull/284))
+
+## [0.5.6] - 2022-09-01
+
+- Actually publish types ([a54c1a8](https://github.com/tailwindlabs/tailwindcss-typography/commit/a54c1a82a64efdf23aab57e62edaa369d1a857f1))
+
+## [0.5.5] - 2022-09-01
+
 ### Added
 
+- Add typescript types ([#283](https://github.com/tailwindlabs/tailwindcss-typography/pull/283))
+
+## [0.5.4] - 2022-07-12
+
+### Fixed
+
+- Update `strong` and `code` color styles to inherit from parent ([#276](https://github.com/tailwindlabs/tailwindcss-typography/pull/276))
+
+## [0.5.3] - 2022-07-07
+
+### Added
+
 - Add styles for `tfoot` elements ([#243](https://github.com/tailwindlabs/tailwindcss-typography/pull/243))
+- Add `prose-h5` and `prose-h6` variants ([#273](https://github.com/tailwindlabs/tailwindcss-typography/pull/273))
 
-## Fixed
+### Fixed
 
@@ -21,2 +60,4 @@ - Fix prose elements `legacy` mode ([#259](https://github.com/tailwindlabs/tailwindcss-typography/pull/259))
 - Fix `figure` spacing ([#267](https://github.com/tailwindlabs/tailwindcss-typography/pull/267))
+- Fix child combinator `:where` selectors ([#268](https://github.com/tailwindlabs/tailwindcss-typography/pull/267))
+- Fix `prose-headings` variant to include `h5` and `h6` elements ([#273](https://github.com/tailwindlabs/tailwindcss-typography/pull/273))
 
@@ -128,3 +169,8 @@ ## [0.5.2] - 2022-02-14
 
-[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.2...HEAD
+[unreleased]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.7...HEAD
+[0.5.7]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.6...v0.5.7
+[0.5.6]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.5...v0.5.6
+[0.5.5]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.4...v0.5.5
+[0.5.4]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.3...v0.5.4
+[0.5.3]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.2...v0.5.3
 [0.5.2]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.1...v0.5.2
@@ -131,0 +177,0 @@ [0.5.1]: https://github.com/tailwindlabs/tailwindcss-typography/compare/v0.5.0...v0.5.1

package.json

 {
   "name": "@tailwindcss/typography",
-  "version": "0.0.0-insiders.289b2ba",
+  "version": "0.0.0-insiders.2cca6ca",
   "description": "A Tailwind CSS plugin for automatically styling plain HTML content with beautiful typographic defaults.",
   "main": "src/index.js",
+  "types": "src/index.d.ts",
   "files": [
     "src/*.js",
+    "src/*.d.ts",
     "dist/"
@@ -44,3 +46,3 @@ ],
     "react-dom": "^17.0.2",
-    "tailwindcss": "^3.0.0-alpha.2"
+    "tailwindcss": "^3.2.2"
   },
@@ -50,3 +52,4 @@ "dependencies": {
     "lodash.isplainobject": "^4.0.6",
-    "lodash.merge": "^4.6.2"
+    "lodash.merge": "^4.6.2",
+    "postcss-selector-parser": "6.0.10"
   },
@@ -53,0 +56,0 @@ "jest": {

README.md

 <p>
-  <a href="https://tailwindcss.com/docs/typography-plugin#gh-light-mode-only" target="_blank">
-    <img src="./.github/logo-light.svg" alt="Tailwind CSS Typography" width="450" height="70">
+  <a href="https://tailwindcss.com/docs/typography-plugin" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-light.svg">
+      <img alt="Tailwind CSS Typography" src="https://raw.githubusercontent.com/tailwindlabs/tailwindcss-typography/HEAD/.github/logo-light.svg" width="450" height="70" style="max-width: 100%;">
+    </picture>
   </a>
-  <a href="https://tailwindcss.com/docs/typography-plugin#gh-dark-mode-only" target="_blank">
-    <img src="./.github/logo-dark.svg" alt="Tailwind CSS Typography" width="450" height="70">
-  </a>
 </p>
@@ -9,0 +10,0 @@

src/index.js

@@ -5,2 +5,3 @@ const plugin = require('tailwindcss/plugin')
 const styles = require('./styles')
+const { commonTrailingPseudos } = require('./utils')
 
@@ -12,31 +13,16 @@ const computed = {
 
-function inWhere(selector, { className, prefix }) {
+function inWhere(selector, { className, modifier, prefix }) {
   let prefixedNot = prefix(`.not-${className}`).slice(1)
+  let selectorPrefix = selector.startsWith('>')
+    ? `${modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`} `
+    : ''
 
-  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`
-  }
+  // Parse the selector, if every component ends in the same pseudo element(s) then move it to the end
+  let [trailingPseudo, rebuiltSelector] = commonTrailingPseudos(selector)
 
-  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`
+  if (trailingPseudo) {
+    return `:where(${selectorPrefix}${rebuiltSelector}):not(:where([class~="${prefixedNot}"] *))${trailingPseudo}`
   }
 
-  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`
-  }
-
-  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}"] *))`
 }
@@ -48,3 +34,3 @@
 
-function configToCss(config = {}, { target, className, prefix }) {
+function configToCss(config = {}, { target, className, modifier, prefix }) {
   function updateSelector(k, v) {
@@ -63,3 +49,3 @@ if (target === 'legacy') {
         return [
-          inWhere(k, { className, prefix }),
+          inWhere(k, { className, modifier, prefix }),
           v,
@@ -70,3 +56,3 @@ Object.fromEntries(Object.entries(v).map(([k, v]) => updateSelector(k, v))),
 
-      return [inWhere(k, { className, prefix }), v]
+      return [inWhere(k, { className, modifier, prefix }), v]
     }
@@ -98,3 +84,3 @@
       for (let [name, ...selectors] of [
-        ['headings', 'h1', 'h2', 'h3', 'h4', 'th'],
+        ['headings', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'th'],
         ['h1'],
@@ -104,2 +90,4 @@ ['h2'],
         ['h4'],
+        ['h5'],
+        ['h6'],
         ['p'],
@@ -129,7 +117,9 @@ ['a'],
 
-        let selector = target === 'legacy'
-          ? selectors.map(selector => `& ${selector}`)
-          : selectors.join(', ')
+        let selector =
+          target === 'legacy' ? selectors.map((selector) => `& ${selector}`) : selectors.join(', ')
 
-        addVariant(`${className}-${name}`, target === 'legacy' ? selector : `& :is(${inWhere(selector, options)})`)
+        addVariant(
+          `${className}-${name}`,
+          target === 'legacy' ? selector : `& :is(${inWhere(selector, options)})`
+        )
       }
@@ -144,2 +134,3 @@
               className,
+              modifier,
               prefix,
@@ -146,0 +137,0 @@ }

src/index.test.js

@@ -9,2 +9,48 @@ const path = require('path')
 
+let vars = `
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --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: ;
+`
 let defaults = css`
@@ -14,45 +60,7 @@ *,
   ::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: ;
+    ${vars}
   }
+  ::backdrop {
+    ${vars}
+  }
 `
@@ -163,3 +171,3 @@
         }
-        .prose > :where(ul > li p):not(:where([class~='not-prose'] *)) {
+        .prose :where(.prose > ul > li p):not(:where([class~='not-prose'] *)) {
           margin-top: 16px;
@@ -179,2 +187,85 @@ margin-bottom: 16px;
 
+test('variants', async () => {
+  let config = {
+    content: [{ raw: html`<div class="sm:prose hover:prose-lg lg:prose-lg"></div>` }],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: [
+            {
+              color: 'red',
+              p: {
+                color: 'lime',
+              },
+              '> ul > li': {
+                color: 'purple',
+              },
+            },
+          ],
+        },
+        lg: {
+          css: {
+            color: 'green',
+            p: {
+              color: 'tomato',
+            },
+            '> ul > li': {
+              color: 'blue',
+            },
+          },
+        },
+        xl: {
+          css: {
+            color: 'yellow',
+            '> ul > li': {
+              color: 'hotpink',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toMatchFormattedCss(
+      css`
+        ${defaults}
+
+        .hover\:prose-lg:hover {
+          color: green;
+        }
+        .hover\:prose-lg:hover :where(p):not(:where([class~='not-prose'] *)) {
+          color: tomato;
+        }
+        .hover\:prose-lg:hover
+          :where(.hover\:prose-lg:hover > ul > li):not(:where([class~='not-prose'] *)) {
+          color: blue;
+        }
+        @media (min-width: 640px) {
+          .sm\:prose {
+            color: red;
+          }
+          .sm\:prose :where(p):not(:where([class~='not-prose'] *)) {
+            color: lime;
+          }
+          .sm\:prose :where(.sm\:prose > ul > li):not(:where([class~='not-prose'] *)) {
+            color: purple;
+          }
+        }
+        @media (min-width: 1024px) {
+          .lg\:prose-lg {
+            color: green;
+          }
+          .lg\:prose-lg :where(p):not(:where([class~='not-prose'] *)) {
+            color: tomato;
+          }
+          .lg\:prose-lg :where(.lg\:prose-lg > ul > li):not(:where([class~='not-prose'] *)) {
+            color: blue;
+          }
+        }
+      `
+    )
+  })
+})
+
 test('modifiers', async () => {
@@ -241,2 +332,5 @@ let config = {
               },
+              '> ul > li': {
+                paddingLeft: '12px',
+              },
               h1: {
@@ -320,2 +414,5 @@ fontSize: '48px',
         }
+        .prose-lg :where(.prose-lg > ul > li):not(:where([class~='not-prose'] *)) {
+          padding-left: 12px;
+        }
         .prose-lg :where(h1):not(:where([class~='not-prose'] *)) {
@@ -344,3 +441,5 @@ font-size: 48px;
     plugins: [typographyPlugin({ target: 'legacy' })],
-    content: [{ raw: html`<div class="prose prose-h1:text-center prose-headings:text-ellipsis"></div>` }],
+    content: [
+      { raw: html`<div class="prose prose-h1:text-center prose-headings:text-ellipsis"></div>` },
+    ],
     theme: {
@@ -445,2 +544,8 @@ typography: {
         }
+        .prose-headings\:text-ellipsis h5 {
+          text-overflow: ellipsis;
+        }
+        .prose-headings\:text-ellipsis h6 {
+          text-overflow: ellipsis;
+        }
         .prose-headings\:text-ellipsis th {
@@ -632,3 +737,3 @@ text-overflow: ellipsis;
         .prose-headings\:underline
-          :is(:where(h1, h2, h3, h4, th):not(:where([class~='not-prose'] *))) {
+          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-prose'] *))) {
           text-decoration-line: underline;
@@ -718,3 +823,3 @@ }
         }
-        .prose-lead\:italic :is(:where([class~="lead"]):not(:where([class~="not-prose"] *))) {
+        .prose-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-prose'] *))) {
           font-style: italic;
@@ -806,3 +911,3 @@ }
         .markdown-headings\:underline
-          :is(:where(h1, h2, h3, h4, th):not(:where([class~='not-markdown'] *))) {
+          :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~='not-markdown'] *))) {
           text-decoration-line: underline;
@@ -894,3 +999,3 @@ }
         }
-        .markdown-lead\:italic :is(:where([class~="lead"]):not(:where([class~="not-markdown"] *))) {
+        .markdown-lead\:italic :is(:where([class~='lead']):not(:where([class~='not-markdown'] *))) {
           font-style: italic;
@@ -985,1 +1090,248 @@ }
 })
+
+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;
+      }
+    `)
+  })
+})
+
+it('should not break with multiple selectors with pseudo elements using variants', () => {
+  let config = {
+    darkMode: 'class',
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="dark:prose"></div>`,
+      },
+    ],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: {
+            'ol li::before, ul li::before': {
+              color: 'red',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::before {
+        color: red;
+      }
+    `)
+  })
+})
+
+it('lifts all common, trailing pseudo elements when the same across all selectors', () => {
+  let config = {
+    darkMode: 'class',
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="prose dark:prose"></div>`,
+      },
+    ],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: {
+            'ol li::marker::before, ul li::marker::before': {
+              color: 'red',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::marker::before {
+        color: red;
+      }
+    `)
+
+    // TODO: The output here is a bug in tailwindcss variant selector rewriting
+    // IT should be ::marker::before
+    expect(result.css).toIncludeCss(css`
+      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::before::marker {
+        color: red;
+      }
+    `)
+  })
+})
+
+it('does not modify selectors with differing pseudo elements', () => {
+  let config = {
+    darkMode: 'class',
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="prose dark:prose"></div>`,
+      },
+    ],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: {
+            'ol li::before, ul li::after': {
+              color: 'red',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .prose :where(ol li::before, ul li::after):not(:where([class~='not-prose'] *)) {
+        color: red;
+      }
+    `)
+
+    // TODO: The output here is a bug in tailwindcss variant selector rewriting
+    expect(result.css).toIncludeCss(css`
+      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::before,
+      ::after {
+        color: red;
+      }
+    `)
+  })
+})
+
+it('lifts only the common, trailing pseudo elements from selectors', () => {
+  let config = {
+    darkMode: 'class',
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="prose dark:prose"></div>`,
+      },
+    ],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: {
+            'ol li::scroll-thumb::before, ul li::scroll-track::before': {
+              color: 'red',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .prose
+        :where(ol li::scroll-thumb, ul li::scroll-track):not(:where([class~='not-prose']
+            *))::before {
+        color: red;
+      }
+    `)
+
+    // TODO: The output here is a bug in tailwindcss variant selector rewriting
+    expect(result.css).toIncludeCss(css`
+      .dark .dark\:prose :where(ol li, ul li):not(:where([class~='not-prose'] *))::scroll-thumb,
+      ::scroll-track,
+      ::before {
+        color: red;
+      }
+    `)
+  })
+})
+
+it('ignores common non-trailing pseudo-elements in selectors', () => {
+  let config = {
+    darkMode: 'class',
+    plugins: [typographyPlugin()],
+    content: [
+      {
+        raw: html`<div class="prose dark:prose"></div>`,
+      },
+    ],
+    theme: {
+      typography: {
+        DEFAULT: {
+          css: {
+            'ol li::before::scroll-thumb, ul li::before::scroll-track': {
+              color: 'red',
+            },
+          },
+        },
+      },
+    },
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(css`
+      .prose
+        :where(ol li::before::scroll-thumb, ul
+          li::before::scroll-track):not(:where([class~='not-prose'] *)) {
+        color: red;
+      }
+    `)
+
+    // TODO: The output here is a bug in tailwindcss variant selector rewriting
+    expect(result.css).toIncludeCss(css`
+      .dark
+        .dark\:prose
+        :where(ol li::scroll-thumb, ul li::scroll-track):not(:where([class~='not-prose']
+            *))::before,
+      ::before {
+        color: red;
+      }
+    `)
+  })
+})
+
+test('lead styles are inserted after paragraph styles', async () => {
+  let config = {
+    content: [{ raw: html`<div class="prose"></div>` }],
+  }
+
+  return run(config).then((result) => {
+    expect(result.css).toIncludeCss(
+      css`
+        .prose {
+          color: var(--tw-prose-body);
+          max-width: 65ch;
+        }
+        .prose :where(p):not(:where([class~='not-prose'] *)) {
+          margin-top: 1.25em;
+          margin-bottom: 1.25em;
+        }
+        .prose :where([class~='lead']):not(:where([class~='not-prose'] *)) {
+          color: var(--tw-prose-lead);
+          font-size: 1.25em;
+          line-height: 1.6;
+          margin-top: 1.2em;
+          margin-bottom: 1.2em;
+        }
+      `
+    )
+  })
+})

src/styles.js

@@ -1240,2 +1240,4 @@ const colors = require('tailwindcss/colors')
         maxWidth: '65ch',
+        // TODO: Figure out how to not need this, it's a merging issue
+        p: {},
         '[class~="lead"]': {
@@ -1253,2 +1255,11 @@ color: 'var(--tw-prose-lead)',
         },
+        'a strong': {
+          color: 'inherit',
+        },
+        'blockquote strong': {
+          color: 'inherit',
+        },
+        'thead th strong': {
+          color: 'inherit',
+        },
         ol: {
@@ -1318,2 +1329,3 @@ listStyleType: 'decimal',
           fontWeight: '900',
+          color: 'inherit',
         },
@@ -1326,2 +1338,3 @@ h2: {
           fontWeight: '800',
+          color: 'inherit',
         },
@@ -1334,2 +1347,3 @@ h3: {
           fontWeight: '700',
+          color: 'inherit',
         },
@@ -1342,2 +1356,3 @@ h4: {
           fontWeight: '700',
+          color: 'inherit',
         },
@@ -1361,4 +1376,22 @@ // TODO: Figure out how to not need these, it's a merging issue
         'a code': {
-          color: 'var(--tw-prose-links)',
+          color: 'inherit',
         },
+        'h1 code': {
+          color: 'inherit',
+        },
+        'h2 code': {
+          color: 'inherit',
+        },
+        'h3 code': {
+          color: 'inherit',
+        },
+        'h4 code': {
+          color: 'inherit',
+        },
+        'blockquote code': {
+          color: 'inherit',
+        },
+        'thead th code': {
+          color: 'inherit',
+        },
         pre: {
@@ -1365,0 +1398,0 @@ color: 'var(--tw-prose-pre-code)',

src/utils.js

 const isPlainObject = require('lodash.isplainobject')
 
+const parser = require('postcss-selector-parser')
+const parseSelector = parser()
+
 module.exports = {
@@ -7,2 +10,54 @@ isUsableColor(color, values) {
   },
+
+  /**
+   * @param {string} selector
+   */
+  commonTrailingPseudos(selector) {
+    let ast = parseSelector.astSync(selector)
+
+    /** @type {import('postcss-selector-parser').Pseudo[][]} */
+    let matrix = []
+
+    // Put the pseudo elements in reverse order in a sparse, column-major 2D array
+    for (let [i, sel] of ast.nodes.entries()) {
+      for (const [j, child] of [...sel.nodes].reverse().entries()) {
+        // We only care about pseudo elements
+        if (child.type !== 'pseudo' || !child.value.startsWith('::')) {
+          break
+        }
+
+        matrix[j] = matrix[j] || []
+        matrix[j][i] = child
+      }
+    }
+
+    let trailingPseudos = parser.selector()
+
+    // At this point the pseudo elements are in a column-major 2D array
+    // This means each row contains one "column" of pseudo elements from each selector
+    // We can compare all the pseudo elements in a row to see if they are the same
+    for (const pseudos of matrix) {
+      // It's a sparse 2D array so there are going to be holes in the rows
+      // We skip those
+      if (!pseudos) {
+        continue
+      }
+
+      let values = new Set([...pseudos.map((p) => p.value)])
+
+      // The pseudo elements are not the same
+      if (values.size > 1) {
+        break
+      }
+
+      pseudos.forEach((pseudo) => pseudo.remove())
+      trailingPseudos.prepend(pseudos[0])
+    }
+
+    if (trailingPseudos.nodes.length) {
+      return [trailingPseudos.toString(), ast.toString()]
+    }
+
+    return [null, selector]
+  },
 }

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

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

94444

increased by15.73%

Number of package files

9

increased by12.5%

Lines of code

2878

increased by16.47%

Number of lines in readme file

28

increased by3.7%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedpostcss-selector-parser@6.0.10

• + Addedpostcss-selector-parser@6.0.10(transitive)